ui-svelte 0.2.10 → 0.2.12

package/dist/css/decorations.css

@@ -0,0 +1,402 @@
+@layer components {
+	/* ==============================================
+	   BORDER DECORATIONS
+	   Clases para decorar bordes de tarjetas y botones
+	   ============================================== */
+
+	/* ------------------------------------------
+	   GLOW BORDERS - Bordes con efecto luminoso
+	   ------------------------------------------ */
+	.bd-glow {
+		position: relative;
+		border: 1px solid transparent;
+		box-shadow:
+			0 0 8px var(--bd-color, var(--primary)),
+			0 0 16px color-mix(in oklch, var(--bd-color, var(--primary)) 50%, transparent);
+		transition: box-shadow 0.3s ease;
+	}
+
+	.bd-glow:hover {
+		box-shadow:
+			0 0 12px var(--bd-color, var(--primary)),
+			0 0 24px var(--bd-color, var(--primary)),
+			0 0 40px color-mix(in oklch, var(--bd-color, var(--primary)) 40%, transparent);
+	}
+
+	/* ------------------------------------------
+	   NEON BORDERS - Bordes estilo neón intenso
+	   ------------------------------------------ */
+	.bd-neon {
+		position: relative;
+		border: 2px solid var(--bd-color, var(--secondary));
+		box-shadow:
+			0 0 5px var(--bd-color, var(--secondary)),
+			0 0 10px var(--bd-color, var(--secondary)),
+			0 0 20px var(--bd-color, var(--secondary)),
+			inset 0 0 10px color-mix(in oklch, var(--bd-color, var(--secondary)) 20%, transparent);
+		animation: neon-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes neon-pulse {
+		0%, 100% { 
+			box-shadow:
+				0 0 5px var(--bd-color, var(--secondary)),
+				0 0 10px var(--bd-color, var(--secondary)),
+				0 0 20px var(--bd-color, var(--secondary)),
+				inset 0 0 10px color-mix(in oklch, var(--bd-color, var(--secondary)) 20%, transparent);
+		}
+		50% { 
+			box-shadow:
+				0 0 10px var(--bd-color, var(--secondary)),
+				0 0 20px var(--bd-color, var(--secondary)),
+				0 0 40px var(--bd-color, var(--secondary)),
+				inset 0 0 15px color-mix(in oklch, var(--bd-color, var(--secondary)) 30%, transparent);
+		}
+	}
+
+	/* ------------------------------------------
+	   GRADIENT BORDERS - Bordes con gradiente
+	   ------------------------------------------ */
+	.bd-grad {
+		position: relative;
+		border: 2px solid transparent;
+		background: 
+			linear-gradient(var(--background), var(--background)) padding-box,
+			linear-gradient(135deg, var(--bd-from, var(--primary)), var(--bd-to, var(--secondary))) border-box;
+		transition: all 0.3s ease;
+	}
+
+	.bd-grad:hover {
+		box-shadow: 0 4px 20px color-mix(in oklch, var(--bd-from, var(--primary)) 30%, transparent);
+	}
+
+	/* ------------------------------------------
+	   RAINBOW BORDERS - Bordes multicolor animados
+	   ------------------------------------------ */
+	.bd-rainbow {
+		position: relative;
+		border: 2px solid transparent;
+		background: 
+			linear-gradient(var(--background), var(--background)) padding-box,
+			linear-gradient(var(--rainbow-angle, 90deg), 
+				var(--danger) 0%, 
+				var(--warning) 20%, 
+				var(--success) 40%, 
+				var(--info) 60%, 
+				var(--primary) 80%, 
+				var(--secondary) 100%
+			) border-box;
+		animation: rainbow-rotate 3s linear infinite;
+	}
+
+	@keyframes rainbow-rotate {
+		0% { --rainbow-angle: 0deg; }
+		100% { --rainbow-angle: 360deg; }
+	}
+
+	@property --rainbow-angle {
+		syntax: '<angle>';
+		initial-value: 0deg;
+		inherits: false;
+	}
+
+	/* ------------------------------------------
+	   SHIMMER BORDERS - Bordes con brillo desplazándose
+	   ------------------------------------------ */
+	.bd-shimmer {
+		position: relative;
+		overflow: hidden;
+		border: 2px solid color-mix(in oklch, var(--bd-color, var(--primary)) 40%, transparent);
+	}
+
+	.bd-shimmer::before {
+		content: '';
+		position: absolute;
+		inset: -2px;
+		background: linear-gradient(
+			90deg,
+			transparent 0%,
+			var(--bd-color, var(--primary)) 50%,
+			transparent 100%
+		);
+		background-size: 200% 100%;
+		animation: shimmer-slide 2s linear infinite;
+		pointer-events: none;
+		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		mask-composite: exclude;
+		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		-webkit-mask-composite: xor;
+		padding: 2px;
+		border-radius: inherit;
+	}
+
+	@keyframes shimmer-slide {
+		0% { background-position: 200% 0; }
+		100% { background-position: -200% 0; }
+	}
+
+	/* ------------------------------------------
+	   PULSE BORDERS - Bordes con pulso animado
+	   ------------------------------------------ */
+	.bd-pulse {
+		position: relative;
+		border: 2px solid var(--bd-color, var(--primary));
+	}
+
+	.bd-pulse::after {
+		content: '';
+		position: absolute;
+		inset: -4px;
+		border: 2px solid var(--bd-color, var(--primary));
+		border-radius: inherit;
+		opacity: 0;
+		animation: pulse-ring 1.5s ease-out infinite;
+		pointer-events: none;
+	}
+
+	@keyframes pulse-ring {
+		0% {
+			opacity: 0.6;
+			inset: -2px;
+		}
+		100% {
+			opacity: 0;
+			inset: -12px;
+		}
+	}
+
+	/* ------------------------------------------
+	   WAVE BORDERS - Bordes con onda animada
+	   ------------------------------------------ */
+	.bd-wave {
+		position: relative;
+		border: none;
+		overflow: hidden;
+	}
+
+	.bd-wave::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		padding: 2px;
+		background: conic-gradient(
+			from var(--wave-angle, 0deg),
+			var(--bd-color, var(--primary)),
+			transparent,
+			var(--bd-color, var(--primary))
+		);
+		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		mask-composite: exclude;
+		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+		-webkit-mask-composite: xor;
+		border-radius: inherit;
+		animation: wave-spin 2s linear infinite;
+		pointer-events: none;
+	}
+
+	@keyframes wave-spin {
+		0% { --wave-angle: 0deg; }
+		100% { --wave-angle: 360deg; }
+	}
+
+	@property --wave-angle {
+		syntax: '<angle>';
+		initial-value: 0deg;
+		inherits: false;
+	}
+
+	/* ------------------------------------------
+	   FROST BORDERS - Bordes con efecto escarcha
+	   ------------------------------------------ */
+	.bd-frost {
+		position: relative;
+		border: 1px solid color-mix(in oklch, var(--bd-color, var(--info)) 50%, white);
+		box-shadow:
+			0 0 10px color-mix(in oklch, var(--bd-color, var(--info)) 30%, white),
+			inset 0 0 20px color-mix(in oklch, var(--bd-color, var(--info)) 10%, white);
+		backdrop-filter: blur(4px);
+		transition: all 0.3s ease;
+	}
+
+	.bd-frost:hover {
+		box-shadow:
+			0 0 15px color-mix(in oklch, var(--bd-color, var(--info)) 40%, white),
+			inset 0 0 30px color-mix(in oklch, var(--bd-color, var(--info)) 15%, white);
+	}
+
+	/* ------------------------------------------
+	   EMBER BORDERS - Bordes con efecto fuego
+	   ------------------------------------------ */
+	.bd-ember {
+		position: relative;
+		border: 2px solid var(--danger);
+		box-shadow:
+			0 0 10px var(--warning),
+			0 0 20px var(--danger),
+			inset 0 0 10px color-mix(in oklch, var(--warning) 20%, transparent);
+		animation: ember-flicker 0.5s ease-in-out infinite alternate;
+	}
+
+	@keyframes ember-flicker {
+		0% {
+			box-shadow:
+				0 0 10px var(--warning),
+				0 0 20px var(--danger),
+				inset 0 0 10px color-mix(in oklch, var(--warning) 20%, transparent);
+		}
+		100% {
+			box-shadow:
+				0 0 15px var(--warning),
+				0 0 30px var(--danger),
+				0 0 40px color-mix(in oklch, var(--danger) 50%, transparent),
+				inset 0 0 15px color-mix(in oklch, var(--warning) 30%, transparent);
+		}
+	}
+
+	/* ------------------------------------------
+	   LASER BORDERS - Bordes con línea láser
+	   ------------------------------------------ */
+	.bd-laser {
+		position: relative;
+		border: 1px solid color-mix(in oklch, var(--bd-color, var(--primary)) 30%, transparent);
+		overflow: hidden;
+	}
+
+	.bd-laser::before {
+		content: '';
+		position: absolute;
+		width: 20%;
+		height: 2px;
+		background: linear-gradient(90deg, transparent, var(--bd-color, var(--primary)), transparent);
+		box-shadow: 0 0 10px var(--bd-color, var(--primary));
+		animation: laser-scan 2s linear infinite;
+		pointer-events: none;
+	}
+
+	@keyframes laser-scan {
+		0% { top: 0; left: -20%; }
+		25% { top: 0; left: 100%; }
+		25.01% { top: 0; left: 100%; transform: rotate(90deg); }
+		50% { top: 100%; left: 100%; transform: rotate(90deg); }
+		50.01% { top: 100%; left: 100%; transform: rotate(180deg); }
+		75% { top: 100%; left: -20%; transform: rotate(180deg); }
+		75.01% { top: 100%; left: -20%; transform: rotate(270deg); }
+		100% { top: 0; left: -20%; transform: rotate(270deg); }
+	}
+
+	/* ------------------------------------------
+	   SOLID BORDERS - Bordes sólidos simples
+	   ------------------------------------------ */
+	.bd-solid {
+		border: 2px solid var(--bd-color, var(--on-background));
+		transition: all 0.3s ease;
+	}
+
+	.bd-solid:hover {
+		box-shadow: 0 0 0 2px color-mix(in oklch, var(--bd-color, var(--on-background)) 30%, transparent);
+	}
+
+	/* ------------------------------------------
+	   DASHED BORDERS - Bordes punteados animados
+	   ------------------------------------------ */
+	.bd-dash {
+		border: 2px dashed var(--bd-color, var(--primary));
+		animation: dash-march 1s linear infinite;
+		background: 
+			linear-gradient(90deg, var(--bd-color, var(--primary)) 50%, transparent 50%) top/10px 2px repeat-x,
+			linear-gradient(90deg, var(--bd-color, var(--primary)) 50%, transparent 50%) bottom/10px 2px repeat-x,
+			linear-gradient(0deg, var(--bd-color, var(--primary)) 50%, transparent 50%) left/2px 10px repeat-y,
+			linear-gradient(0deg, var(--bd-color, var(--primary)) 50%, transparent 50%) right/2px 10px repeat-y;
+		border: none;
+		background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;
+		animation: dash-march 0.5s linear infinite;
+	}
+
+	@keyframes dash-march {
+		0% { background-position: 0 0, 0 100%, 0 0, 100% 0; }
+		100% { background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px; }
+	}
+
+	/* ==============================================
+	   COLOR VARIANTS
+	   ============================================== */
+
+	/* Primary */
+	.bd-glow-primary { --bd-color: var(--primary); }
+	.bd-neon-primary { --bd-color: var(--primary); }
+	.bd-grad-primary { --bd-from: var(--primary); --bd-to: color-mix(in oklch, var(--primary) 60%, var(--secondary)); }
+	.bd-shimmer-primary { --bd-color: var(--primary); }
+	.bd-pulse-primary { --bd-color: var(--primary); }
+	.bd-wave-primary { --bd-color: var(--primary); }
+	.bd-frost-primary { --bd-color: var(--primary); }
+	.bd-laser-primary { --bd-color: var(--primary); }
+	.bd-solid-primary { --bd-color: var(--primary); }
+	.bd-dash-primary { --bd-color: var(--primary); }
+
+	/* Secondary */
+	.bd-glow-secondary { --bd-color: var(--secondary); }
+	.bd-neon-secondary { --bd-color: var(--secondary); }
+	.bd-grad-secondary { --bd-from: var(--secondary); --bd-to: color-mix(in oklch, var(--secondary) 60%, var(--primary)); }
+	.bd-shimmer-secondary { --bd-color: var(--secondary); }
+	.bd-pulse-secondary { --bd-color: var(--secondary); }
+	.bd-wave-secondary { --bd-color: var(--secondary); }
+	.bd-frost-secondary { --bd-color: var(--secondary); }
+	.bd-laser-secondary { --bd-color: var(--secondary); }
+	.bd-solid-secondary { --bd-color: var(--secondary); }
+	.bd-dash-secondary { --bd-color: var(--secondary); }
+
+	/* Success */
+	.bd-glow-success { --bd-color: var(--success); }
+	.bd-neon-success { --bd-color: var(--success); }
+	.bd-grad-success { --bd-from: var(--success); --bd-to: color-mix(in oklch, var(--success) 60%, var(--info)); }
+	.bd-shimmer-success { --bd-color: var(--success); }
+	.bd-pulse-success { --bd-color: var(--success); }
+	.bd-wave-success { --bd-color: var(--success); }
+	.bd-frost-success { --bd-color: var(--success); }
+	.bd-laser-success { --bd-color: var(--success); }
+	.bd-solid-success { --bd-color: var(--success); }
+	.bd-dash-success { --bd-color: var(--success); }
+
+	/* Warning */
+	.bd-glow-warning { --bd-color: var(--warning); }
+	.bd-neon-warning { --bd-color: var(--warning); }
+	.bd-grad-warning { --bd-from: var(--warning); --bd-to: color-mix(in oklch, var(--warning) 60%, var(--danger)); }
+	.bd-shimmer-warning { --bd-color: var(--warning); }
+	.bd-pulse-warning { --bd-color: var(--warning); }
+	.bd-wave-warning { --bd-color: var(--warning); }
+	.bd-frost-warning { --bd-color: var(--warning); }
+	.bd-laser-warning { --bd-color: var(--warning); }
+	.bd-solid-warning { --bd-color: var(--warning); }
+	.bd-dash-warning { --bd-color: var(--warning); }
+
+	/* Danger */
+	.bd-glow-danger { --bd-color: var(--danger); }
+	.bd-neon-danger { --bd-color: var(--danger); }
+	.bd-grad-danger { --bd-from: var(--danger); --bd-to: color-mix(in oklch, var(--danger) 60%, var(--warning)); }
+	.bd-shimmer-danger { --bd-color: var(--danger); }
+	.bd-pulse-danger { --bd-color: var(--danger); }
+	.bd-wave-danger { --bd-color: var(--danger); }
+	.bd-frost-danger { --bd-color: var(--danger); }
+	.bd-laser-danger { --bd-color: var(--danger); }
+	.bd-solid-danger { --bd-color: var(--danger); }
+	.bd-dash-danger { --bd-color: var(--danger); }
+
+	/* Info */
+	.bd-glow-info { --bd-color: var(--info); }
+	.bd-neon-info { --bd-color: var(--info); }
+	.bd-grad-info { --bd-from: var(--info); --bd-to: color-mix(in oklch, var(--info) 60%, var(--primary)); }
+	.bd-shimmer-info { --bd-color: var(--info); }
+	.bd-pulse-info { --bd-color: var(--info); }
+	.bd-wave-info { --bd-color: var(--info); }
+	.bd-frost-info { --bd-color: var(--info); }
+	.bd-laser-info { --bd-color: var(--info); }
+	.bd-solid-info { --bd-color: var(--info); }
+	.bd-dash-info { --bd-color: var(--info); }
+
+	/* ==============================================
+	   BORDER WIDTH MODIFIERS
+	   ============================================== */
+	.bd-thin { --bd-width: 1px; }
+	.bd-thick { --bd-width: 3px; }
+	.bd-bold { --bd-width: 4px; }
+}