@salmexio/ui 1.0.0 → 1.2.0

package/dist/primitives/Button/Button.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Button
 
-  Neo-Brutalist Dark — Glassmorphism button with glow effects.
+  INFRARED — Glassmorphism button with glow effects.
   Clean geometry, expressive energy, world-class accessibility.
 
   @example
@@ -107,7 +107,7 @@ const isDisabled = $derived(disabled);
 
 <style>
 	/* ========================================
-	   BASE BUTTON - Neo-Brutalist Dark
+	   BASE BUTTON - INFRARED
 	   ======================================== */
 	.sx-btn {
 		position: relative;
@@ -134,11 +134,11 @@ const isDisabled = $derived(disabled);
 
 	/* Focus */
 	.sx-btn:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
-	/* Primary focus needs white outline since cyan-on-cyan is invisible */
+	/* Primary focus needs white outline since vermilion-on-vermilion is invisible */
 	.sx-btn-primary:focus-visible {
 		outline-color: var(--sx-white);
 	}
@@ -206,38 +206,174 @@ const isDisabled = $derived(disabled);
 	}
 
 	/* ========================================
-	   VARIANT STYLES - Neo-Brutalist Dark
+	   VARIANT STYLES - INFRARED
 	   ======================================== */
 
-	/* Default variant */
+	/* Default variant — Neutral 3D panel.
+	   Same physical language as primary but with neutral
+	   surface colors. Top-lit bevel + stacked extrusion. */
 	.sx-btn-default {
 		background: var(--sx-color-surface-2);
 		color: var(--sx-color-text);
 		border: 1px solid var(--sx-color-border-strong);
+		overflow: hidden;
+
+		/* 3D extrusion — neutral dark tones */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.04),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 5px 10px -3px rgba(0, 0, 0, 0.4);
 	}
 
-	/* Primary variant — cyan glow */
+	/* Top-lit bevel for default */
+	.sx-btn-default::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.06) 0%,
+				rgba(255, 255, 255, 0.02) 35%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.08) 100%
+			);
+	}
+
+	.sx-btn-default:hover:not(:disabled) {
+		transform: translateY(-2px);
+		border-color: var(--sx-color-border-hover);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.05),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 4px 0 0 rgba(0, 0, 0, 0.06),
+			0 8px 16px -3px rgba(0, 0, 0, 0.5);
+	}
+
+	.sx-btn-default:active:not(:disabled) {
+		transform: translateY(1px);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.1),
+			0 1px 3px -1px rgba(0, 0, 0, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
+	}
+
+	/* Primary variant — INFRARED Forge.
+	   Multi-color gradient surface (vermilion → brass → teal) that
+	   drifts slowly. 3D extruded depth via stacked box-shadows.
+	   Top-lit bevel highlight via ::before. Grain texture via ::after.
+	   Traveling border-light sweep on hover. */
 	.sx-btn-primary {
-		background: var(--sx-color-cyan);
+		background:
+			linear-gradient(
+				135deg,
+				#FF6B35 0%,
+				#E05520 20%,
+				#C8A84E 50%,
+				#8B8B3D 80%,
+				#FF6B35 100%
+			);
+		background-size: 300% 300%;
 		color: var(--sx-color-text-inverse);
 		border: none;
-		font-weight: 600;
+		font-weight: 700;
+		letter-spacing: 0.3px;
+		overflow: hidden;
+		isolation: isolate;
+		animation: sx-forge-drift 8s ease-in-out infinite;
+
+		/* 3D extrusion — stacked shadows create physical depth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 140, 90, 0.4),
+			0 2px 0 0 #A63D10,
+			0 3px 0 0 #8B3210,
+			0 4px 0 0 #702810,
+			0 6px 12px -2px rgba(0, 0, 0, 0.5),
+			0 0 16px -4px rgba(255, 107, 53, 0.3);
+	}
+
+	/* Top-lit bevel — light source from above */
+	.sx-btn-primary::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.25) 0%,
+				rgba(255, 255, 255, 0.08) 30%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.15) 100%
+			);
+	}
+
+	/* Grain texture — SVG feTurbulence noise at low opacity */
+	.sx-btn-primary::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 2;
+		opacity: 0.08;
+		mix-blend-mode: overlay;
+		background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+	}
+
+	/* Gradient drift — visible color shift across the surface */
+	@keyframes sx-forge-drift {
+		0%, 100% { background-position: 0% 50%; }
+		25% { background-position: 100% 0%; }
+		50% { background-position: 100% 100%; }
+		75% { background-position: 0% 100%; }
 	}
 
 	.sx-btn-primary:hover:not(:disabled) {
-		transform: translateY(-2px);
-		box-shadow: var(--sx-shadow-glow-cyan);
+		transform: translateY(-3px);
+		animation: sx-forge-drift 5s ease-in-out infinite;
+
+		/* Lift increases the extrusion depth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 140, 90, 0.5),
+			0 2px 0 0 #A63D10,
+			0 3px 0 0 #8B3210,
+			0 4px 0 0 #702810,
+			0 5px 0 0 #5A2010,
+			0 6px 0 0 #451810,
+			0 10px 20px -3px rgba(0, 0, 0, 0.6),
+			0 0 28px -4px rgba(255, 107, 53, 0.5);
 	}
 
+	/* Active — press into the surface, collapse depth */
 	.sx-btn-primary:active:not(:disabled) {
-		transform: translateY(0);
-		box-shadow: var(--sx-shadow-sm);
+		transform: translateY(2px);
+		box-shadow:
+			0 1px 0 0 #8B3210,
+			0 2px 4px -1px rgba(0, 0, 0, 0.4),
+			0 0 8px -3px rgba(255, 107, 53, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
+	}
+
+	.sx-btn-primary:disabled {
+		animation-play-state: paused;
 	}
 
-	/* Ghost variant — transparent, subtle */
+	/* Ghost variant — Flat at rest, materializes on hover.
+	   Rises out of the surface with a thin extrusion when
+	   you reach for it. Stays part of the physical language. */
 	.sx-btn-ghost {
 		background: transparent;
-		border: none;
+		border: 1px solid transparent;
 		color: var(--sx-color-text-secondary);
 		box-shadow: none;
 	}
@@ -245,33 +381,86 @@ const isDisabled = $derived(disabled);
 	.sx-btn-ghost:hover:not(:disabled) {
 		background: var(--sx-color-surface-2);
 		color: var(--sx-color-text);
-		transform: none;
-		box-shadow: none;
+		border-color: var(--sx-color-border);
+		transform: translateY(-1px);
+
+		/* Materializes — thin extrusion appears */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.08),
+			0 3px 6px -2px rgba(0, 0, 0, 0.25);
 	}
 
 	.sx-btn-ghost:active:not(:disabled) {
 		background: var(--sx-color-surface-2);
 		transform: translateY(0);
-		box-shadow: none;
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.08),
+			0 1px 2px -1px rgba(0, 0, 0, 0.15);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
-	/* Danger variant — red glow */
+	/* Danger variant — Dark crimson surface, light text.
+	   Red enough to read as danger, dark enough to not
+	   overwhelm. Light text for readability. */
 	.sx-btn-danger {
-		background: var(--sx-color-red-hover);
-		color: var(--sx-color-red);
-		border: 1px solid rgba(255, 59, 59, 0.2);
+		background: #3A1010;
+		color: var(--sx-color-text);
+		border: 1px solid rgba(220, 38, 38, 0.3);
+		overflow: hidden;
+
+		/* 3D extrusion — deep crimson tones */
+		box-shadow:
+			0 1px 0 0 rgba(220, 60, 60, 0.12),
+			0 2px 0 0 #2A0808,
+			0 3px 0 0 #1E0505,
+			0 4px 0 0 #140303,
+			0 6px 12px -2px rgba(0, 0, 0, 0.5),
+			0 0 12px -4px rgba(220, 38, 38, 0.2);
+	}
+
+	/* Top-lit bevel for danger — red-tinted highlight */
+	.sx-btn-danger::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 1;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(220, 60, 60, 0.12) 0%,
+				rgba(255, 255, 255, 0.04) 25%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.15) 100%
+			);
 	}
 
 	.sx-btn-danger:hover:not(:disabled) {
-		background: rgba(255, 59, 59, 0.2);
 		transform: translateY(-2px);
-		box-shadow: var(--sx-shadow-glow-red);
-		border-color: rgba(255, 59, 59, 0.4);
+		background: #451212;
+		border-color: rgba(220, 38, 38, 0.45);
+
+		box-shadow:
+			0 1px 0 0 rgba(220, 60, 60, 0.18),
+			0 2px 0 0 #2A0808,
+			0 3px 0 0 #1E0505,
+			0 4px 0 0 #140303,
+			0 5px 0 0 #0C0202,
+			0 9px 18px -3px rgba(0, 0, 0, 0.6),
+			0 0 22px -4px rgba(220, 38, 38, 0.3);
 	}
 
 	.sx-btn-danger:active:not(:disabled) {
-		transform: translateY(0);
-		box-shadow: var(--sx-shadow-sm);
+		transform: translateY(2px);
+		background: #2A0808;
+		box-shadow:
+			0 1px 0 0 #1E0505,
+			0 2px 4px -1px rgba(0, 0, 0, 0.4),
+			0 0 6px -3px rgba(220, 38, 38, 0.12);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
 	/* ========================================
@@ -282,7 +471,7 @@ const isDisabled = $derived(disabled);
 		align-items: center;
 		gap: var(--sx-space-2);
 		position: relative;
-		z-index: 1;
+		z-index: 3;
 	}
 
 	.sx-btn-icon {
@@ -302,16 +491,18 @@ const isDisabled = $derived(disabled);
 		border-radius: var(--sx-radius-sm);
 	}
 
-	/* Shortcut on primary: white text on darker translucent bg */
+	/* Shortcut on primary: frosted inset against the multi-color fill */
 	.sx-btn-primary .sx-btn-shortcut {
-		background: rgba(0, 0, 0, 0.3);
-		color: var(--sx-white);
+		background: rgba(0, 0, 0, 0.25);
+		color: var(--sx-color-text-inverse);
+		border: 1px solid rgba(255, 255, 255, 0.1);
 	}
 
-	/* Shortcut on danger: match the red text */
+	/* Shortcut on danger: red-tinted badge */
 	.sx-btn-danger .sx-btn-shortcut {
-		background: rgba(255, 59, 59, 0.15);
-		color: var(--sx-color-red);
+		background: rgba(220, 38, 38, 0.12);
+		color: var(--sx-color-text);
+		border: 1px solid rgba(220, 38, 38, 0.15);
 	}
 
 	/* Shortcut on ghost: subtle */
@@ -335,5 +526,34 @@ const isDisabled = $derived(disabled);
 		.sx-btn:active:not(:disabled) {
 			transform: none;
 		}
+
+		/* Primary — solid gradient, no drift, simple depth */
+		.sx-btn-primary {
+			animation: none;
+			background: linear-gradient(135deg, #FF6B35, #C8A84E);
+			box-shadow:
+				0 2px 0 0 #8B3210,
+				0 4px 8px -2px rgba(0, 0, 0, 0.4);
+		}
+
+		.sx-btn-primary:hover:not(:disabled) {
+			box-shadow:
+				0 3px 0 0 #8B3210,
+				0 6px 12px -2px rgba(0, 0, 0, 0.5);
+		}
+
+		/* Default — simple depth */
+		.sx-btn-default {
+			box-shadow:
+				0 2px 0 0 rgba(0, 0, 0, 0.15),
+				0 4px 8px -2px rgba(0, 0, 0, 0.3);
+		}
+
+		/* Danger — simple depth */
+		.sx-btn-danger {
+			box-shadow:
+				0 2px 0 0 #4A0A0A,
+				0 4px 8px -2px rgba(0, 0, 0, 0.3);
+		}
 	}
 </style>

package/dist/primitives/Button/Button.svelte.d.ts

@@ -27,7 +27,7 @@ interface Props extends Omit<HTMLButtonAttributes, 'class'> {
 /**
  * Button
  *
- * Neo-Brutalist Dark — Glassmorphism button with glow effects.
+ * INFRARED — Glassmorphism button with glow effects.
  * Clean geometry, expressive energy, world-class accessibility.
  *
  * @example

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Tooltip
 
-  Neo-Brutalist Dark — Accessible tooltip with configurable placement,
+  INFRARED — Accessible tooltip with configurable placement,
   keyboard support, hover/focus triggers, and arrow indicator.
   Uses fixed positioning with smart viewport-aware flipping.
 
@@ -187,13 +187,21 @@ function positionTooltip() {
 		padding: var(--sx-space-1-5) var(--sx-space-3);
 		background: var(--sx-color-surface-3);
 		border: 1px solid var(--sx-color-border-strong);
+		border-top-color: rgba(255, 255, 255, 0.06);
 		border-radius: var(--sx-radius-sm);
 		font-family: var(--sx-font-body);
 		font-size: var(--sx-text-xs);
 		font-weight: 500;
 		color: var(--sx-color-text);
 		line-height: var(--sx-leading-normal);
-		box-shadow: var(--sx-shadow-lg);
+		box-shadow:
+			/* Thin 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			/* Ambient shadow */
+			0 4px 12px -2px rgba(0, 0, 0, 0.4),
+			/* Subtle warm edge glow */
+			0 0 8px -4px rgba(255, 107, 53, 0.1);
 		pointer-events: none;
 		animation: sx-tooltip-in 150ms var(--sx-ease-out) both;
 		word-wrap: break-word;

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts

@@ -18,7 +18,7 @@ interface Props {
 /**
  * Tooltip
  *
- * Neo-Brutalist Dark — Accessible tooltip with configurable placement,
+ * INFRARED — Accessible tooltip with configurable placement,
  * keyboard support, hover/focus triggers, and arrow indicator.
  * Uses fixed positioning with smart viewport-aware flipping.
  *