@salmexio/ui 0.4.0 → 1.1.0

package/dist/feedback/Alert/Alert.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Alert
 
-  Win2K × Basquiat — Bold message banner. Left accent border, high contrast.
+  INFRARED — Clean message banner. Left accent border, dark surface.
   Dismissible, expandable, optional title; role="alert" for errors.
 -->
 <script lang="ts">
@@ -73,11 +73,11 @@ function toggleExpanded() {
 <div
 	{id}
 	class={cn(
-		'salmex-alert',
-		`salmex-alert-${variant}`,
-		`salmex-alert-${type}`,
-		expandable && 'salmex-alert-expandable',
-		expandable && isExpanded && 'salmex-alert-expanded',
+		'sx-alert',
+		`sx-alert-${variant}`,
+		`sx-alert-${type}`,
+		expandable && 'sx-alert-expandable',
+		expandable && isExpanded && 'sx-alert-expanded',
 		className
 	)}
 	role={ariaRole}
@@ -85,7 +85,7 @@ function toggleExpanded() {
 	aria-labelledby={title ? titleId : undefined}
 >
 	{#if showIcon}
-		<span class="salmex-alert-icon" aria-hidden="true">
+		<span class="sx-alert-icon" aria-hidden="true">
 			{#if type === 'success'}
 				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
 			{:else if type === 'error'}
@@ -98,20 +98,20 @@ function toggleExpanded() {
 		</span>
 	{/if}
 
-	<div class="salmex-alert-content">
+	<div class="sx-alert-content">
 		{#if title}
 			{#if expandable}
 				<button
 					type="button"
-					class="salmex-alert-title-btn"
+					class="sx-alert-title-btn"
 					onclick={toggleExpanded}
 					aria-expanded={isExpanded}
 					aria-controls={contentId}
 				>
-					<svelte:element this={headingLevel} id={titleId} class="salmex-alert-title">
+					<svelte:element this={headingLevel} id={titleId} class="sx-alert-title">
 						{title}
 					</svelte:element>
-					<span class="salmex-alert-expand-icon" aria-hidden="true">
+					<span class="sx-alert-expand-icon" aria-hidden="true">
 						{#if isExpanded}
 							&#9660;
 						{:else}
@@ -120,7 +120,7 @@ function toggleExpanded() {
 					</span>
 				</button>
 			{:else}
-				<svelte:element this={headingLevel} id={titleId} class="salmex-alert-title">
+				<svelte:element this={headingLevel} id={titleId} class="sx-alert-title">
 					{title}
 				</svelte:element>
 			{/if}
@@ -129,8 +129,8 @@ function toggleExpanded() {
 		{#if children}
 			<div
 				id={contentId}
-				class="salmex-alert-body"
-				class:salmex-alert-body-hidden={expandable && !isExpanded}
+				class="sx-alert-body"
+				class:sx-alert-body-hidden={expandable && !isExpanded}
 				aria-hidden={expandable && !isExpanded}
 			>
 				{@render children()}
@@ -138,7 +138,7 @@ function toggleExpanded() {
 		{/if}
 
 		{#if actions && (!expandable || isExpanded)}
-			<div class="salmex-alert-actions">
+			<div class="sx-alert-actions">
 				{@render actions()}
 			</div>
 		{/if}
@@ -147,7 +147,7 @@ function toggleExpanded() {
 	{#if dismissible}
 		<button
 			type="button"
-			class="salmex-alert-dismiss"
+			class="sx-alert-dismiss"
 			onclick={handleDismiss}
 			aria-label={closeLabel}
 		>
@@ -157,94 +157,91 @@ function toggleExpanded() {
 </div>
 
 <style>
-	/* Win2K × Basquiat: panel/chrome — canvas surface, bold 3px border, flat shadow */
-	.salmex-alert {
+	/* INFRARED: surface card, left accent border, subtle type tint */
+	.sx-alert {
 		display: flex;
-		gap: var(--salmex-space-3);
-		padding: var(--salmex-space-4);
-		border: 2px solid transparent;
-		font-family: var(--salmex-font-system);
-		transition: box-shadow var(--salmex-transition-fast);
-		border-radius: var(--salmex-radius-sm);
-		/* Inner depth + flat outer shadow */
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			var(--salmex-shadow-md);
-		background: rgb(var(--salmex-window-surface));
+		gap: var(--sx-space-3);
+		padding: var(--sx-space-4);
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border);
+		border-left: 2px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		font-family: var(--sx-font-body);
+		transition: box-shadow var(--sx-transition-fast);
+		animation: sx-alert-in var(--sx-duration-base) var(--sx-ease-out) both;
 	}
 
-	.salmex-alert-standard {
-		border-radius: var(--salmex-radius-sm);
+	.sx-alert-standard {
+		border-radius: var(--sx-radius-md);
 	}
 
-	.salmex-alert-slim {
-		padding: var(--salmex-space-2) var(--salmex-space-3);
-		gap: var(--salmex-space-2);
+	.sx-alert-slim {
+		padding: var(--sx-space-2) var(--sx-space-3);
+		gap: var(--sx-space-2);
 	}
 
-	.salmex-alert-slim .salmex-alert-title {
-		font-size: var(--salmex-font-size-sm);
+	.sx-alert-slim .sx-alert-title {
+		font-size: var(--sx-text-sm);
 		margin-bottom: 0;
 	}
 
-	.salmex-alert-slim .salmex-alert-body {
-		font-size: var(--salmex-font-size-xs);
+	.sx-alert-slim .sx-alert-body {
+		font-size: var(--sx-text-xs);
 	}
 
-	.salmex-alert-icon {
+	.sx-alert-icon {
 		flex-shrink: 0;
 		display: flex;
 		align-items: flex-start;
 		margin-top: 2px;
 	}
 
-	.salmex-alert-content {
+	.sx-alert-content {
 		flex: 1;
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
 	}
 
-	.salmex-alert-title {
-		font-size: var(--salmex-font-size-md);
-		font-weight: 800;
+	.sx-alert-title {
+		font-size: var(--sx-text-md);
+		font-weight: 600;
 		line-height: 1.4;
-		margin: 0 0 var(--salmex-space-1);
-		letter-spacing: 0.5px;
+		margin: 0 0 var(--sx-space-1);
+		color: var(--sx-color-text);
 	}
 
-	.salmex-alert-title:where(h2, h3, h4, h5, h6) {
+	.sx-alert-title:where(h2, h3, h4, h5, h6) {
 		font-size: inherit;
 		margin: inherit;
 	}
 
-	.salmex-alert-body {
-		font-size: var(--salmex-font-size-sm);
+	.sx-alert-body {
+		font-size: var(--sx-text-sm);
 		line-height: 1.55;
-		color: rgb(var(--salmex-text-secondary));
+		color: var(--sx-color-text-secondary);
 	}
 
-	.salmex-alert-body-hidden {
+	.sx-alert-body-hidden {
 		display: none;
 	}
 
-	.salmex-alert-actions {
+	.sx-alert-actions {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
-		gap: var(--salmex-space-2);
-		margin-top: var(--salmex-space-3);
+		gap: var(--sx-space-2);
+		margin-top: var(--sx-space-3);
 	}
 
-	.salmex-alert-title-btn {
+	.sx-alert-title-btn {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		gap: var(--salmex-space-2);
+		gap: var(--sx-space-2);
 		padding: 0;
-		margin: 0 0 var(--salmex-space-1);
+		margin: 0 0 var(--sx-space-1);
 		background: none;
 		border: none;
 		cursor: pointer;
@@ -253,224 +250,126 @@ function toggleExpanded() {
 		font: inherit;
 	}
 
-	.salmex-alert-title-btn:focus-visible {
+	.sx-alert-title-btn:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
+		box-shadow: 0 0 0 2px var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-title-btn:focus-visible {
-		box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
-	}
-
-	.salmex-alert-expand-icon {
+	.sx-alert-expand-icon {
 		flex-shrink: 0;
 		font-size: 0.75em;
 		opacity: 0.8;
+		color: var(--sx-color-text-secondary);
 	}
 
-	/* Dismiss — 3D Win2K-style system button */
-	.salmex-alert-dismiss {
+	/* Dismiss button — transparent, minimal */
+	.sx-alert-dismiss {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var(--salmex-space-1);
+		padding: var(--sx-space-1);
 		margin: -2px -2px -2px 0;
-		border: 1px solid rgb(var(--salmex-border-dark));
-		border-radius: var(--salmex-radius-sm);
-		background: rgb(var(--salmex-button-face));
-		color: rgb(var(--salmex-text-primary));
+		border: none;
+		border-radius: var(--sx-radius-sm);
+		background: transparent;
+		color: var(--sx-color-text-secondary);
 		cursor: pointer;
-		transition: all var(--salmex-transition-fast);
-		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.2);
+		transition: color var(--sx-transition-fast), background var(--sx-transition-fast);
 	}
 
-	.salmex-alert-dismiss:hover {
-		background: rgb(var(--salmex-button-light));
-		color: rgb(var(--salmex-text-primary));
+	.sx-alert-dismiss:hover {
+		color: var(--sx-color-text);
+		background: var(--sx-color-surface-2);
 	}
 
-	.salmex-alert-dismiss: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.2);
-		transform: translate(1px, 1px);
+	.sx-alert-dismiss:active {
+		background: var(--sx-color-surface-3);
 	}
 
-	.salmex-alert-dismiss:focus-visible {
+	.sx-alert-dismiss:focus-visible {
 		outline: none;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 2px 4px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-alert-dismiss:focus-visible {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 2px 3px rgb(var(--salmex-crown-yellow));
-	}
-
-	/* Type colors — panel + left accent; canvas base, bold borders */
-	.salmex-alert-success {
-		background: rgb(var(--salmex-window-surface));
-		border-color: rgb(25 95 55);
-	}
-
-	.salmex-alert-success .salmex-alert-icon {
-		color: rgb(25 95 55);
-	}
-
-	.salmex-alert-success .salmex-alert-title {
-		color: rgb(25 95 55);
-	}
-
-	.salmex-alert-error {
-		background: rgb(var(--salmex-window-surface));
-		border-color: rgb(var(--salmex-street-red));
-	}
-
-	.salmex-alert-error .salmex-alert-icon {
-		color: rgb(var(--salmex-street-red));
-	}
-
-	.salmex-alert-error .salmex-alert-title {
-		color: rgb(165 30 35);
-	}
-
-	.salmex-alert-warning {
-		background: rgb(var(--salmex-window-surface));
-		border-color: rgb(145 75 10);
-	}
-
-	.salmex-alert-warning .salmex-alert-icon {
-		color: rgb(145 75 10);
+		box-shadow: 0 0 0 2px var(--sx-color-primary);
 	}
 
-	.salmex-alert-warning .salmex-alert-title {
-		color: rgb(145 75 10);
+	/* Type: success */
+	.sx-alert-success {
+		background: var(--sx-color-green-subtle);
+		border-left-color: var(--sx-color-green);
 	}
 
-	.salmex-alert-info {
-		background: rgb(var(--salmex-window-surface));
-		border-color: rgb(0 95 220);
+	.sx-alert-success .sx-alert-icon {
+		color: var(--sx-color-green);
 	}
 
-	.salmex-alert-info .salmex-alert-icon {
-		color: rgb(0 95 220);
+	.sx-alert-success .sx-alert-title {
+		color: var(--sx-color-text);
 	}
 
-	.salmex-alert-info .salmex-alert-title {
-		color: rgb(0 95 220);
+	/* Type: error */
+	.sx-alert-error {
+		background: var(--sx-color-red-subtle);
+		border-left-color: var(--sx-color-red);
 	}
 
-	.salmex-alert-neutral {
-		background: rgb(var(--salmex-window-surface));
-		border-color: rgb(var(--salmex-border-dark));
+	.sx-alert-error .sx-alert-icon {
+		color: var(--sx-color-red);
 	}
 
-	.salmex-alert-neutral .salmex-alert-icon {
-		color: rgb(var(--salmex-text-secondary));
+	.sx-alert-error .sx-alert-title {
+		color: var(--sx-color-text);
 	}
 
-	.salmex-alert-neutral .salmex-alert-title {
-		color: rgb(var(--salmex-text-primary));
+	/* Type: warning */
+	.sx-alert-warning {
+		background: var(--sx-color-brass-subtle);
+		border-left-color: var(--sx-color-secondary);
 	}
 
-	/* Dark theme — brighter colors for visibility */
-	:global([data-theme='dark']) .salmex-alert-error {
-		background: rgb(var(--salmex-street-red) / 0.12);
-		border-color: rgb(255 90 95);
+	.sx-alert-warning .sx-alert-icon {
+		color: var(--sx-color-secondary);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-error .salmex-alert-icon,
-	:global([data-theme='dark']) .salmex-alert-error .salmex-alert-title {
-		color: rgb(255 100 105);
+	.sx-alert-warning .sx-alert-title {
+		color: var(--sx-color-text);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-success {
-		background: rgb(var(--salmex-urban-green) / 0.15);
-		border-color: rgb(var(--salmex-urban-green));
+	/* Type: info */
+	.sx-alert-info {
+		background: var(--sx-color-primary-subtle);
+		border-left-color: var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-success .salmex-alert-icon,
-	:global([data-theme='dark']) .salmex-alert-success .salmex-alert-title {
-		color: rgb(var(--salmex-urban-green));
+	.sx-alert-info .sx-alert-icon {
+		color: var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-warning {
-		background: rgb(var(--salmex-spray-orange) / 0.15);
-		border-color: rgb(var(--salmex-spray-orange));
+	.sx-alert-info .sx-alert-title {
+		color: var(--sx-color-text);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-warning .salmex-alert-icon,
-	:global([data-theme='dark']) .salmex-alert-warning .salmex-alert-title {
-		color: rgb(var(--salmex-spray-orange));
+	/* Type: neutral */
+	.sx-alert-neutral {
+		background: var(--sx-color-surface);
+		border-left-color: var(--sx-color-border-strong);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-info {
-		background: rgb(var(--salmex-electric-blue) / 0.12);
-		border-color: rgb(var(--salmex-primary-light));
+	.sx-alert-neutral .sx-alert-icon {
+		color: var(--sx-color-text-secondary);
 	}
 
-	:global([data-theme='dark']) .salmex-alert-info .salmex-alert-icon,
-	:global([data-theme='dark']) .salmex-alert-info .salmex-alert-title {
-		color: rgb(var(--salmex-primary-light));
+	.sx-alert-neutral .sx-alert-title {
+		color: var(--sx-color-text);
 	}
 
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-alert-error {
-			background: rgb(var(--salmex-street-red) / 0.12);
-			border-color: rgb(255 90 95);
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-error .salmex-alert-icon,
-		:global(:root:not([data-theme='light'])) .salmex-alert-error .salmex-alert-title {
-			color: rgb(255 100 105);
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-success {
-			background: rgb(var(--salmex-urban-green) / 0.15);
-			border-color: rgb(var(--salmex-urban-green));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-success .salmex-alert-icon,
-		:global(:root:not([data-theme='light'])) .salmex-alert-success .salmex-alert-title {
-			color: rgb(var(--salmex-urban-green));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-warning {
-			background: rgb(var(--salmex-spray-orange) / 0.15);
-			border-color: rgb(var(--salmex-spray-orange));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-warning .salmex-alert-icon,
-		:global(:root:not([data-theme='light'])) .salmex-alert-warning .salmex-alert-title {
-			color: rgb(var(--salmex-spray-orange));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-info {
-			background: rgb(var(--salmex-electric-blue) / 0.12);
-			border-color: rgb(var(--salmex-primary-light));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-alert-info .salmex-alert-icon,
-		:global(:root:not([data-theme='light'])) .salmex-alert-info .salmex-alert-title {
-			color: rgb(var(--salmex-primary-light));
+	@media (prefers-reduced-motion: reduce) {
+		.sx-alert {
+			transition: none;
+			animation: none;
 		}
 
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.salmex-alert,
-		.salmex-alert-dismiss,
-		.salmex-alert-title-btn {
+		.sx-alert-dismiss,
+		.sx-alert-title-btn {
 			transition: none;
 		}
 	}

package/dist/feedback/Alert/Alert.svelte.d.ts

@@ -21,7 +21,7 @@ interface Props {
 /**
  * Alert
  *
- * Win2K × Basquiat — Bold message banner. Left accent border, high contrast.
+ * INFRARED — Clean message banner. Left accent border, dark surface.
  * Dismissible, expandable, optional title; role="alert" for errors.
  */
 declare const Alert: import("svelte").Component<Props, {}, "">;