@julseb-lib/react 0.1.10 → 0.1.12

package/dist/index.css

@@ -2,6 +2,12 @@
 @import "tailwindcss";
 /* @custom-variant dark (&:where(.dark, .dark *)); */
 
+:root {
+	--font-lato: "Lato", sans-serif;
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
+}
+
 @theme {
 	--color-primary-50: var(--color-blue-50);
 	--color-primary-100: var(--color-blue-100);
@@ -73,12 +79,6 @@
 	--color-background: var(--color-white);
 	--color-font: var(--color-black);
 
-	--font-lato:
-		"Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-		sans-serif;
-	--font-family-body: var(--font-lato);
-	--font-family-code: monospace;
-
 	--font-weight-thin: 100;
 	--font-weight-light: 300;
 	--font-weight-normal: 400;
@@ -100,7 +100,16 @@
 		rgba(255, 255, 255, 0.35) 100%
 	);
 
-	--rounded-full: calc(infinity * 1px);
+	--font-sans: var(--font-lato);
+	--font-mono: monospace;
+
+	--spacer-2xs: 4px;
+	--spacer-xs: 8px;
+	--spacer-sm: 12px;
+	--spacer-md: 16px;
+	--spacer-lg: 24px;
+	--spacer-xl: 32px;
+	--spacer-2xl: 48px;
 
 	--main-default: 600px;
 	--main-large: 800px;
@@ -109,64 +118,54 @@
 	--aside-default: 250px;
 	--aside-small: 200px;
 
-	--shadow-2xl:
-		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-xl:
-		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
-	--shadow-lg:
-		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
-	--shadow-md:
-		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
-	--shadow-sm:
-		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 	--shadow-xs:
 		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-2xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm:
+		0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-md:
+		0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
+	--shadow-lg:
+		0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
+	--shadow-xl:
+		0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
+	--shadow-2xl:
+		0px 10px 14px 8px rgba(0, 0, 0, 0.2), 0px 4px 4px rgba(0, 0, 0, 0.3);
 	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
 	--shadow-none: none;
 
-	--spacer-2xs: 4px;
-	--spacer-xs: 8px;
-	--spacer-sm: 12px;
-	--spacer-md: 16px;
-	--spacer-lg: 24px;
-	--spacer-xl: 32px;
-	--spacer-2xl: 48px;
-
 	--animate-cubic-bezier: cubic-bezier(0.5, 0, 0.5, 1);
 
-	--font-size-display-h1: 5rem;
-	--font-size-display-h2: 4rem;
-	--font-size-display-h3: 3.5rem;
-	--font-size-display-h4: 3rem;
-	--font-size-display-h5: 2.5rem;
-	--font-size-h1: 2.5rem;
-	--font-size-h2: 2rem;
-	--font-size-h3: 1.8rem;
-	--font-size-h4: 1.5rem;
-	--font-size-h5: 1.3rem;
-	--font-size-h6: 1.1rem;
-	--font-size-body: 1rem;
-	--font-size-small: 0.875rem;
-}
-
-@layer base {
-	html,
-	body {
-		font-family: var(--font-family-body);
-	}
+	--transition-short: all 200ms ease;
+	--transition-long: all 500ms ease;
+	--transition-bezier: all 500ms cubic-bezier(0.25, 0.75, 0, 0.66);
+
+	--text-display-h1: 5rem;
+	--text-display-h2: 4rem;
+	--text-display-h3: 3.5rem;
+	--text-display-h4: 3rem;
+	--text-display-h5: 2.5rem;
+	--text-h1: 2.5rem;
+	--text-h2: 2rem;
+	--text-h3: 1.8rem;
+	--text-h4: 1.5rem;
+	--text-h5: 1.3rem;
+	--text-h6: 1.1rem;
+	--text-body: 1rem;
+	--text-small: 0.875rem;
 }
 
 /*====================== Common styles ======================*/
 
 html,
 body {
-	font-family: var(--font-family-body) !important;
+	font-family: var(--font-sans);
 	width: 100%;
 	min-height: 100vh;
 	background-color: var(--color-background);
 	color: var(--color-font);
 	max-width: 100dvw;
+	line-height: var(--leading-normal);
 
 	&.dark {
 		--color-background: var(--color-black);
@@ -181,7 +180,7 @@ body {
 a,
 button {
 	cursor: pointer;
-	transition: all 200ms ease;
+	transition: var(--transition-short);
 
 	&:disabled {
 		cursor: not-allowed;
@@ -195,73 +194,73 @@ button {
 		max-width: 100%;
 	}
 
-	.no-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
-
 	.no-scrollbar {
 		-ms-overflow-style: none;
 		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
 	}
 
 	/*====================== Fonts ======================*/
 
 	.lato-thin {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: normal;
 	}
 
 	.lato-light {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: normal;
 	}
 
 	.lato-regular {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: normal;
 	}
 
 	.lato-bold {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: normal;
 	}
 
 	.lato-black {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: normal;
 	}
 
 	.lato-thin-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-thin);
 		font-style: italic;
 	}
 
 	.lato-light-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-light);
 		font-style: italic;
 	}
 
 	.lato-regular-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-normal);
 		font-style: italic;
 	}
 
 	.lato-bold-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-bold);
 		font-style: italic;
 	}
 
 	.lato-black-italic {
-		font-family: var(--font-family-body);
+		font-family: var(--font-sans);
 		font-weight: var(--font-weight-black);
 		font-style: italic;
 	}
@@ -360,24 +359,6 @@ button {
 		}
 	}
 
-	.animate-shine {
-		position: relative;
-		overflow: hidden;
-
-		&:before {
-			content: "";
-			position: absolute;
-			top: -200px;
-			bottom: -200px;
-			background-color: var(--color-white);
-			opacity: 0.7;
-			filter: blur(20px);
-			width: 100px;
-			transform: skew(-15deg);
-			animation: shine 2000ms ease-in-out infinite;
-		}
-	}
-
 	@keyframes spin {
 		from {
 			transform: rotate(0deg);
@@ -388,15 +369,6 @@ button {
 		}
 	}
 
-	.animate-spin {
-		animation: spin 1200ms linear infinite;
-	}
-
-	.animate-bezier {
-		animation: spin 1200ms var(--animate-cubic-bezier) infinite;
-		animation-delay: var(--spinner-delay);
-	}
-
 	@keyframes loader-pulse {
 		0%,
 		100% {
@@ -408,30 +380,6 @@ button {
 		}
 	}
 
-	.dot {
-		animation: loader-pulse 1200ms linear infinite;
-		animation-delay: var(--dot-delay);
-	}
-
-	input::-webkit-slider-thumb {
-		box-shadow: var(--shadow-lg);
-	}
-
-	@keyframes toast-timer-animation {
-		0% {
-			width: 100%;
-		}
-
-		100% {
-			width: 0;
-		}
-	}
-
-	.toast-timer {
-		animation: toast-timer-animation var(--toast-timer-duration) linear
-			forwards;
-	}
-
 	.Toastify__progress-bar--bg {
 		background-color: transparent !important;
 	}
@@ -445,8 +393,4 @@ button {
 			width: var(--meter-value);
 		}
 	}
-
-	.progress-bar-animated:before {
-		animation: progress-bar calc(var(--progress-speed) * 50ms) ease forwards;
-	}
 }