@salmexio/ui 0.3.1 → 1.0.0

package/dist/dialogs/Modal/Modal.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Modal
 
-  Win2K × Basquiat — Dialog with canvas surface, bold 3px border, title bar header.
+  Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
   Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
   aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
   For full inert support (background not focusable), render modal in a portal
@@ -88,10 +88,10 @@ function setInitialFocus() {
 		return;
 	}
 	if (!dialogElement) return;
-	const titleEl = dialogElement.querySelector<HTMLElement>('.salmex-modal-title-wrap');
-	const body = dialogElement.querySelector('.salmex-modal-body');
+	const titleEl = dialogElement.querySelector<HTMLElement>('.sx-modal-title-wrap');
+	const body = dialogElement.querySelector('.sx-modal-body');
 	const first = body?.querySelector<HTMLElement>(FOCUSABLE);
-	const closeBtn = dialogElement.querySelector<HTMLElement>('.salmex-modal-close');
+	const closeBtn = dialogElement.querySelector<HTMLElement>('.sx-modal-close');
 
 	if (initialFocusStrategy === 'title' && titleEl) {
 		titleEl.focus();
@@ -163,7 +163,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 {#if open}
 	<!-- Backdrop -->
 	<div
-		class="salmex-modal-backdrop salmex-modal-position-{position}"
+		class="sx-modal-backdrop sx-modal-position-{position}"
 		role="presentation"
 		onclick={handleBackdropClick}
 		onkeydown={() => {}}
@@ -171,7 +171,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 		<div
 			bind:this={dialogElement}
 			id={modalId}
-			class="salmex-modal-container salmex-modal-{size} salmex-modal-scroll-{scrollBehavior} {className}"
+			class="sx-modal-container sx-modal-{size} sx-modal-scroll-{scrollBehavior} {className}"
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby={titleId}
@@ -179,18 +179,18 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 			data-testid={testId}
 		>
 			{#if header || title || showCloseButton}
-				<div class="salmex-modal-header">
-					<div id={titleId} class="salmex-modal-title-wrap" tabindex="-1">
+				<div class="sx-modal-header">
+					<div id={titleId} class="sx-modal-title-wrap" tabindex="-1">
 						{#if header}
 							{@render header()}
 						{:else if title}
-							<h2 class="salmex-modal-title">{title}</h2>
+							<h2 class="sx-modal-title">{title}</h2>
 						{/if}
 					</div>
 					{#if showCloseButton && !preventClose}
 						<button
 							type="button"
-							class="salmex-modal-close"
+							class="sx-modal-close"
 							onclick={handleClose}
 							aria-label={closeLabel}
 						>
@@ -203,12 +203,12 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 				</div>
 			{/if}
 			{#if children}
-				<div id={descriptionId} class="salmex-modal-body">
+				<div id={descriptionId} class="sx-modal-body">
 					{@render children()}
 				</div>
 			{/if}
 			{#if footer}
-				<div class="salmex-modal-footer">
+				<div class="sx-modal-footer">
 					{@render footer()}
 				</div>
 			{/if}
@@ -217,28 +217,32 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 {/if}
 
 <style>
-	.salmex-modal-backdrop {
+	/* ========================================
+	   BACKDROP
+	   ======================================== */
+	.sx-modal-backdrop {
 		position: fixed;
 		inset: 0;
-		z-index: var(--salmex-z-modal-backdrop, 1040);
+		z-index: var(--sx-z-modal-backdrop, 1040);
 		display: flex;
 		justify-content: center;
-		padding: var(--salmex-space-6);
-		background: rgb(0 0 0 / 0.6);
+		padding: var(--sx-space-6);
+		background: rgba(10, 10, 15, 0.7);
+		backdrop-filter: blur(4px);
 		overflow-y: auto;
-		animation: salmex-modal-fade-in var(--salmex-transition-base);
+		animation: sx-modal-fade-in var(--sx-transition-base);
 	}
 
-	.salmex-modal-position-center {
+	.sx-modal-position-center {
 		align-items: center;
 	}
 
-	.salmex-modal-position-top {
+	.sx-modal-position-top {
 		align-items: flex-start;
 		padding-top: 3rem;
 	}
 
-	@keyframes salmex-modal-fade-in {
+	@keyframes sx-modal-fade-in {
 		from {
 			opacity: 0;
 		}
@@ -247,178 +251,184 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 		}
 	}
 
-	.salmex-modal-container {
+	/* ========================================
+	   CONTAINER
+	   ======================================== */
+	.sx-modal-container {
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		max-height: calc(100vh - 2rem);
-		background: rgb(var(--salmex-window-surface));
-		border: 3px solid rgb(var(--salmex-button-dark-edge));
-		box-shadow: var(--salmex-shadow-lg);
-		animation: salmex-modal-scale-in var(--salmex-transition-slow) ease-out;
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-lg);
+		box-shadow: var(--sx-shadow-xl);
+		animation: sx-modal-scale-in 200ms ease-out;
 		overflow: hidden;
 	}
 
-	@keyframes salmex-modal-scale-in {
+	@keyframes sx-modal-scale-in {
 		from {
 			opacity: 0;
-			transform: scale(0.97) translateY(8px);
+			transform: scale(0.95);
 		}
 		to {
 			opacity: 1;
-			transform: scale(1) translateY(0);
+			transform: scale(1);
 		}
 	}
 
-	.salmex-modal-sm {
+	/* ========================================
+	   SIZES
+	   ======================================== */
+	.sx-modal-sm {
 		max-width: 24rem;
 	}
-	.salmex-modal-md {
+	.sx-modal-md {
 		max-width: 28rem;
 	}
-	.salmex-modal-lg {
+	.sx-modal-lg {
 		max-width: 32rem;
 	}
-	.salmex-modal-xl {
+	.sx-modal-xl {
 		max-width: 40rem;
 	}
-	.salmex-modal-full {
+	.sx-modal-full {
 		max-width: 56rem;
 	}
 
-	.salmex-modal-scroll-inside {
+	/* ========================================
+	   SCROLL BEHAVIOR
+	   ======================================== */
+	.sx-modal-scroll-inside {
 		max-height: calc(100vh - 4rem);
 	}
 
-	.salmex-modal-scroll-inside .salmex-modal-body {
+	.sx-modal-scroll-inside .sx-modal-body {
 		overflow-y: auto;
 	}
 
-	/* Title bar — Win2K gradient */
-	.salmex-modal-header {
+	/* ========================================
+	   HEADER
+	   ======================================== */
+	.sx-modal-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: var(--salmex-space-4);
-		padding: var(--salmex-space-4);
-		background: linear-gradient(
-			90deg,
-			rgb(var(--salmex-electric-blue)),
-			rgb(var(--salmex-titlebar-bold))
-		);
-		color: rgb(var(--salmex-chalk-white));
-		border-bottom: 3px solid rgb(var(--salmex-button-dark-edge));
+		gap: var(--sx-space-4);
+		padding: var(--sx-space-4);
+		background: var(--sx-color-surface-2);
+		border-bottom: 1px solid var(--sx-color-border);
+		border-radius: calc(var(--sx-radius-lg) - 1px) calc(var(--sx-radius-lg) - 1px) 0 0;
 		flex-shrink: 0;
-		font-family: var(--salmex-font-display);
 	}
 
-	:global([data-theme='dark']) .salmex-modal-header {
-		background: linear-gradient(
-			90deg,
-			rgb(0 100 220),
-			rgb(0 140 255)
-		);
-	}
-
-	.salmex-modal-title-wrap {
+	.sx-modal-title-wrap {
 		flex: 1;
 		min-width: 0;
 		outline: none;
 	}
 
-	.salmex-modal-title-wrap:focus-visible {
-		outline: 2px solid rgb(var(--salmex-crown-yellow));
+	.sx-modal-title-wrap:focus-visible {
+		outline: 2px solid var(--sx-color-cyan);
 		outline-offset: 2px;
 	}
 
-	.salmex-modal-title {
+	.sx-modal-title {
 		margin: 0;
-		font-size: var(--salmex-font-size-md);
-		font-weight: 900;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
+		font-family: var(--sx-font-display);
+		font-size: var(--sx-text-lg);
+		font-weight: 600;
 		line-height: 1.3;
+		color: var(--sx-color-text);
 	}
 
-	.salmex-modal-close {
+	/* ========================================
+	   CLOSE BUTTON
+	   ======================================== */
+	.sx-modal-close {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 32px;
 		height: 32px;
 		padding: 0;
-		background: rgb(var(--salmex-button-face));
-		border: 2px solid rgb(var(--salmex-button-dark-edge));
-		color: rgb(var(--salmex-text-primary));
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--sx-radius-sm);
+		color: var(--sx-color-text-secondary);
 		cursor: pointer;
 		flex-shrink: 0;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			2px 2px 0 rgb(0 0 0 / 0.3);
-		transition: all var(--salmex-transition-fast);
+		transition:
+			color var(--sx-transition-fast),
+			background var(--sx-transition-fast);
 	}
 
-	.salmex-modal-close:hover {
-		background: rgb(var(--salmex-button-light));
+	.sx-modal-close:hover {
+		background: var(--sx-color-surface-3);
+		color: var(--sx-color-text);
 	}
 
-	.salmex-modal-close:active {
-		box-shadow:
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			1px 1px 0 rgb(0 0 0 / 0.3);
-		transform: translate(1px, 1px);
+	.sx-modal-close:active {
+		background: var(--sx-color-surface-3);
+		color: var(--sx-color-text);
 	}
 
-	.salmex-modal-close:focus-visible {
-		outline: none;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			2px 2px 0 rgb(0 0 0 / 0.3),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	.sx-modal-close:focus-visible {
+		outline: 2px solid var(--sx-color-cyan);
+		outline-offset: 2px;
 	}
 
-	.salmex-modal-body {
-		padding: var(--salmex-space-6);
+	/* ========================================
+	   BODY
+	   ======================================== */
+	.sx-modal-body {
+		padding: var(--sx-space-6);
 		flex: 1;
 		min-height: 0;
-		font-family: var(--salmex-font-system);
-		color: rgb(var(--salmex-text-primary));
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-modal-footer {
+	/* ========================================
+	   FOOTER
+	   ======================================== */
+	.sx-modal-footer {
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
-		gap: var(--salmex-space-3);
-		padding: var(--salmex-space-4);
-		border-top: 3px solid rgb(var(--salmex-button-dark-edge));
-		background: rgb(var(--salmex-bg-secondary));
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-4);
+		border-top: 1px solid var(--sx-color-border);
+		border-radius: 0 0 calc(var(--sx-radius-lg) - 1px) calc(var(--sx-radius-lg) - 1px);
+		background: var(--sx-color-surface-2);
 		flex-shrink: 0;
 	}
 
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-modal-backdrop,
-		.salmex-modal-container {
+		.sx-modal-backdrop,
+		.sx-modal-container {
 			animation: none;
 		}
 	}
 
+	/* ========================================
+	   MOBILE
+	   ======================================== */
 	@media (max-width: 640px) {
-		.salmex-modal-backdrop {
+		.sx-modal-backdrop {
 			padding: 0;
 			align-items: flex-end;
 		}
 
-		.salmex-modal-position-top {
+		.sx-modal-position-top {
 			padding-top: 0;
 		}
 
-		.salmex-modal-container {
+		.sx-modal-container {
 			max-width: 100%;
 			max-height: 90vh;
 			margin: 0;

package/dist/dialogs/Modal/Modal.svelte.d.ts

@@ -31,7 +31,7 @@ interface Props {
 /**
  * Modal
  *
- * Win2K × Basquiat — Dialog with canvas surface, bold 3px border, title bar header.
+ * Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
  * Follows WAI-ARIA Dialog (Modal) pattern: focus trap, restore focus on close,
  * aria-labelledby, aria-describedby, aria-modal. Escape and backdrop close.
  * For full inert support (background not focusable), render modal in a portal