@salmexio/ui 1.0.0 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @salmexio/ui
 
-Neo-Brutalist Dark component library for Salmex I/O products. Built with Svelte 5 and TypeScript.
+INFRARED component library for Salmex I/O products. Built with Svelte 5 and TypeScript.
 
 ## Install
 

package/dist/dialogs/ContextMenu/ContextMenu.svelte

@@ -1,7 +1,7 @@
 <!--
   @component ContextMenu
 
-  Neo-Brutalist Dark — Right-click context menu with glass panel, keyboard navigation,
+  INFRARED — Right-click context menu with glass panel, keyboard navigation,
   separators, section headers, submenus, and keyboard shortcut hints.
 
   @example
@@ -386,8 +386,18 @@ onMount(() => {
 		max-width: 320px;
 		background: var(--sx-color-surface-2);
 		border: 1px solid var(--sx-color-border-strong);
+		border-top-color: rgba(255, 255, 255, 0.05);
 		border-radius: var(--sx-radius-md);
-		box-shadow: var(--sx-shadow-lg);
+		box-shadow:
+			/* 3D extrusion */
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.14),
+			0 3px 0 0 rgba(0, 0, 0, 0.08),
+			/* Deep ambient shadow */
+			0 6px 16px -3px rgba(0, 0, 0, 0.45),
+			0 12px 32px -6px rgba(0, 0, 0, 0.2),
+			/* Warm edge glow */
+			0 0 12px -6px rgba(255, 107, 53, 0.08);
 		backdrop-filter: var(--sx-glass-blur);
 		padding: var(--sx-space-1) 0;
 		outline: none;
@@ -421,8 +431,8 @@ onMount(() => {
 	}
 
 	.sx-context-item-active {
-		background: var(--sx-color-cyan-hover);
-		color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-context-item-disabled {
@@ -450,7 +460,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-context-icon-spacer {
@@ -474,7 +484,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-shortcut {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 		opacity: 0.7;
 	}
 
@@ -488,7 +498,7 @@ onMount(() => {
 	}
 
 	.sx-context-item-active .sx-context-submenu-arrow {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* ========================================

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

@@ -28,7 +28,7 @@ interface Props {
 /**
  * ContextMenu
  *
- * Neo-Brutalist Dark — Right-click context menu with glass panel, keyboard navigation,
+ * INFRARED — Right-click context menu with glass panel, keyboard navigation,
  * separators, section headers, submenus, and keyboard shortcut hints.
  *
  * @example

package/dist/dialogs/Modal/Modal.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Modal
 
-  Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
+  INFRARED — 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
@@ -263,11 +263,37 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 		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);
+		box-shadow:
+			/* 3D extrusion underneath */
+			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),
+			/* Deep ambient shadow */
+			0 8px 24px -4px rgba(0, 0, 0, 0.5),
+			0 16px 48px -8px rgba(0, 0, 0, 0.3),
+			/* Warm forge glow on edges */
+			0 0 32px -8px rgba(255, 107, 53, 0.08);
 		animation: sx-modal-scale-in 200ms ease-out;
 		overflow: hidden;
 	}
 
+	/* Top-lit bevel */
+	.sx-modal-container::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.04) 0%,
+			transparent 30%,
+			rgba(0, 0, 0, 0.04) 100%
+		);
+		pointer-events: none;
+		z-index: 5;
+	}
+
 	@keyframes sx-modal-scale-in {
 		from {
 			opacity: 0;
@@ -313,6 +339,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   HEADER
 	   ======================================== */
 	.sx-modal-header {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -331,8 +359,9 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	}
 
 	.sx-modal-title-wrap:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
+		border-radius: var(--sx-radius-sm);
 	}
 
 	.sx-modal-title {
@@ -376,7 +405,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	}
 
 	.sx-modal-close:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -384,6 +413,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   BODY
 	   ======================================== */
 	.sx-modal-body {
+		position: relative;
+		z-index: 1;
 		padding: var(--sx-space-6);
 		flex: 1;
 		min-height: 0;
@@ -394,6 +425,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
 	   FOOTER
 	   ======================================== */
 	.sx-modal-footer {
+		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;

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

@@ -31,7 +31,7 @@ interface Props {
 /**
  * Modal
  *
- * Neo-Brutalist Dark — Dialog with glass surface, subtle border, clean header.
+ * INFRARED — 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

package/dist/feedback/Alert/Alert.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Alert
 
-  Neo-Brutalist Dark — Clean message banner. Left accent border, dark surface.
+  INFRARED — Clean message banner. Left accent border, dark surface.
   Dismissible, expandable, optional title; role="alert" for errors.
 -->
 <script lang="ts">
@@ -157,17 +157,39 @@ function toggleExpanded() {
 </div>
 
 <style>
-	/* Neo-Brutalist Dark: surface card, left accent border, subtle type tint */
+	/* INFRARED: 3D status plate — left accent border, extrusion, bevel */
 	.sx-alert {
+		position: relative;
 		display: flex;
 		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-left: 3px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-md);
 		font-family: var(--sx-font-body);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 		transition: box-shadow var(--sx-transition-fast);
+		animation: sx-alert-in var(--sx-duration-base) var(--sx-ease-out) both;
+	}
+
+	/* Top-lit bevel */
+	.sx-alert::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.04) 0%,
+			transparent 40%,
+			rgba(0, 0, 0, 0.03) 100%
+		);
+		pointer-events: none;
+		z-index: 0;
 	}
 
 	.sx-alert-standard {
@@ -189,6 +211,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-icon {
+		position: relative;
+		z-index: 1;
 		flex-shrink: 0;
 		display: flex;
 		align-items: flex-start;
@@ -196,6 +220,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-content {
+		position: relative;
+		z-index: 1;
 		flex: 1;
 		min-width: 0;
 		display: flex;
@@ -250,8 +276,8 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-title-btn:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
 	.sx-alert-expand-icon {
@@ -263,6 +289,8 @@ function toggleExpanded() {
 
 	/* Dismiss button — transparent, minimal */
 	.sx-alert-dismiss {
+		position: relative;
+		z-index: 1;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
@@ -287,14 +315,18 @@ function toggleExpanded() {
 	}
 
 	.sx-alert-dismiss:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
-	/* Type: success */
+	/* Type: success — green accent, green-tinted extrusion */
 	.sx-alert-success {
 		background: var(--sx-color-green-subtle);
 		border-left-color: var(--sx-color-green);
+		box-shadow:
+			0 1px 0 0 rgba(34, 120, 69, 0.25),
+			0 2px 0 0 rgba(34, 120, 69, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-success .sx-alert-icon {
@@ -305,10 +337,14 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: error */
+	/* Type: error — red accent, crimson-tinted extrusion */
 	.sx-alert-error {
 		background: var(--sx-color-red-subtle);
 		border-left-color: var(--sx-color-red);
+		box-shadow:
+			0 1px 0 0 rgba(180, 30, 30, 0.25),
+			0 2px 0 0 rgba(140, 20, 20, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-error .sx-alert-icon {
@@ -319,35 +355,43 @@ function toggleExpanded() {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: warning */
+	/* Type: warning — brass accent, brass-tinted extrusion */
 	.sx-alert-warning {
-		background: var(--sx-color-gold-subtle);
-		border-left-color: var(--sx-color-gold);
+		background: var(--sx-color-brass-subtle);
+		border-left-color: var(--sx-color-secondary);
+		box-shadow:
+			0 1px 0 0 rgba(160, 134, 62, 0.25),
+			0 2px 0 0 rgba(130, 108, 50, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-warning .sx-alert-icon {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-alert-warning .sx-alert-title {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: info */
+	/* Type: info — vermilion accent, warm-tinted extrusion */
 	.sx-alert-info {
-		background: var(--sx-color-cyan-subtle);
-		border-left-color: var(--sx-color-cyan);
+		background: var(--sx-color-primary-subtle);
+		border-left-color: var(--sx-color-primary);
+		box-shadow:
+			0 1px 0 0 rgba(200, 85, 30, 0.25),
+			0 2px 0 0 rgba(160, 65, 20, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-alert-info .sx-alert-icon {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-alert-info .sx-alert-title {
 		color: var(--sx-color-text);
 	}
 
-	/* Type: neutral */
+	/* Type: neutral — subtle neutral extrusion */
 	.sx-alert-neutral {
 		background: var(--sx-color-surface);
 		border-left-color: var(--sx-color-border-strong);
@@ -362,7 +406,11 @@ function toggleExpanded() {
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.sx-alert,
+		.sx-alert {
+			transition: none;
+			animation: none;
+		}
+
 		.sx-alert-dismiss,
 		.sx-alert-title-btn {
 			transition: none;

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

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

package/dist/feedback/ProgressBar/ProgressBar.svelte

@@ -1,19 +1,19 @@
 <!--
   @component ProgressBar
 
-  Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+  INFRARED — Determinate & indeterminate progress indicator with
   optional label, value display, size variants, and full ARIA compliance.
 
   @example
   <ProgressBar value={65} label="Upload" />
   <ProgressBar indeterminate label="Loading..." />
-  <ProgressBar value={30} max={50} showValue color="cyan" />
+  <ProgressBar value={30} max={50} showValue color="primary" />
 -->
 <script lang="ts">
 import { cn } from '../../utils/cn.js';
 
 type ProgressSize = 'sm' | 'md' | 'lg';
-type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type ProgressColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 
 interface Props {
 	/** Current value (0–max). Ignored when indeterminate. */
@@ -48,7 +48,7 @@ let {
 	showValue = false,
 	formatValue,
 	size = 'md',
-	color = 'cyan',
+	color = 'primary',
 	class: className = '',
 	testId
 }: Props = $props();
@@ -159,12 +159,15 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		align-self: flex-end;
 	}
 
-	/* Track */
+	/* Track — recessed channel */
 	.sx-progress-track {
 		width: 100%;
 		background: var(--sx-color-surface-2);
 		border-radius: var(--sx-radius-full);
 		overflow: hidden;
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-progress-sm {
@@ -184,27 +187,46 @@ const labelId = $derived(label ? `${stableId}-label` : undefined);
 		height: 100%;
 		border-radius: var(--sx-radius-full);
 		transition: width 0.3s var(--sx-ease-out);
+		position: relative;
+	}
+
+	/* Leading-edge glow — subtle light at the tip of the bar */
+	.sx-progress-fill::after {
+		content: '';
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: 24px;
+		border-radius: inherit;
+		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
+		opacity: 0.6;
 	}
 
 	/* Colors */
-	.sx-progress-color-cyan {
-		background: var(--sx-color-cyan);
+	.sx-progress-color-primary {
+		background: linear-gradient(90deg, #FF6B35, #C8A84E);
+		box-shadow: 0 0 8px rgba(255, 107, 53, 0.2);
 	}
 
 	.sx-progress-color-green {
 		background: var(--sx-color-green);
+		box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
 	}
 
-	.sx-progress-color-gold {
-		background: var(--sx-color-gold);
+	.sx-progress-color-brass {
+		background: var(--sx-color-secondary);
+		box-shadow: 0 0 8px rgba(200, 168, 78, 0.2);
 	}
 
 	.sx-progress-color-red {
 		background: var(--sx-color-red);
+		box-shadow: 0 0 8px rgba(220, 38, 38, 0.2);
 	}
 
-	.sx-progress-color-purple {
-		background: var(--sx-color-purple);
+	.sx-progress-color-teal {
+		background: var(--sx-color-teal);
+		box-shadow: 0 0 8px rgba(61, 139, 139, 0.2);
 	}
 
 	/* Indeterminate */

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

@@ -1,5 +1,5 @@
 type ProgressSize = 'sm' | 'md' | 'lg';
-type ProgressColor = 'cyan' | 'green' | 'gold' | 'red' | 'purple';
+type ProgressColor = 'primary' | 'green' | 'brass' | 'red' | 'teal';
 interface Props {
     /** Current value (0–max). Ignored when indeterminate. */
     value?: number;
@@ -26,13 +26,13 @@ interface Props {
 /**
  * ProgressBar
  *
- * Neo-Brutalist Dark — Determinate & indeterminate progress indicator with
+ * INFRARED — Determinate & indeterminate progress indicator with
  * optional label, value display, size variants, and full ARIA compliance.
  *
  * @example
  * <ProgressBar value={65} label="Upload" />
  * <ProgressBar indeterminate label="Loading..." />
- * <ProgressBar value={30} max={50} showValue color="cyan" />
+ * <ProgressBar value={30} max={50} showValue color="primary" />
  */
 declare const ProgressBar: import("svelte").Component<Props, {}, "">;
 type ProgressBar = ReturnType<typeof ProgressBar>;

package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/ProgressBar/ProgressBar.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElE,UAAU,KAAK;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProgressBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/feedback/ProgressBar/ProgressBar.svelte.ts"],"names":[],"mappings":"AAMA,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvC,KAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpE,UAAU,KAAK;IACd,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrD,sBAAsB;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/feedback/Skeleton/Skeleton.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Skeleton
 
-  Neo-Brutalist Dark — Content placeholder with shimmer animation.
+  INFRARED — Content placeholder with shimmer animation.
   Supports text lines, circles (avatars), and rectangular shapes.
   Uses aria-busy for screen readers.
 
@@ -112,6 +112,10 @@ const lineWidths = $derived(
 
 	.sx-skeleton-bone {
 		background: var(--sx-color-surface-2);
+		/* Recessed carved-out placeholder */
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.04);
 	}
 
 	.sx-skeleton-shimmer {
@@ -124,12 +128,16 @@ const lineWidths = $derived(
 		position: absolute;
 		inset: 0;
 		background: linear-gradient(
-			90deg,
+			100deg,
 			transparent 0%,
-			var(--sx-color-surface-3) 50%,
+			transparent 35%,
+			rgba(255, 107, 53, 0.02) 45%,
+			rgba(200, 168, 78, 0.04) 50%,
+			rgba(255, 107, 53, 0.02) 55%,
+			transparent 65%,
 			transparent 100%
 		);
-		animation: sx-skeleton-sweep 1.8s ease-in-out infinite;
+		animation: sx-skeleton-sweep 1.8s var(--sx-ease-in-out) infinite;
 	}
 
 	@keyframes sx-skeleton-sweep {

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

@@ -21,7 +21,7 @@ interface Props {
 /**
  * Skeleton
  *
- * Neo-Brutalist Dark — Content placeholder with shimmer animation.
+ * INFRARED — Content placeholder with shimmer animation.
  * Supports text lines, circles (avatars), and rectangular shapes.
  * Uses aria-busy for screen readers.
  *

package/dist/feedback/Spinner/Spinner.svelte

@@ -1,8 +1,8 @@
 <!--
   @component Spinner
 
-  Neo-Brutalist Dark — Clean loading indicator.
-  Cyan accent, dark surfaces, geometric shapes.
+  INFRARED — Clean loading indicator.
+  Vermilion accent, dark surfaces, geometric shapes.
   role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
 
   Three styles: ring (default), dots (inline), pulse (radar/broadcast).
@@ -191,7 +191,7 @@ const config = $derived(sizeConfig[size]);
 
 	/* Variants */
 	.sx-spinner-primary {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-spinner-secondary {
@@ -214,6 +214,7 @@ const config = $derived(sizeConfig[size]);
 
 	.sx-spinner-arc {
 		transform-origin: center;
+		filter: drop-shadow(0 0 3px currentColor);
 	}
 
 	@keyframes sx-spin {
@@ -284,6 +285,7 @@ const config = $derived(sizeConfig[size]);
 		height: 28%;
 		border-radius: 50%;
 		background: currentColor;
+		box-shadow: 0 0 8px currentColor;
 		animation: sx-pulse-dot 1.5s ease-out infinite;
 	}
 

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

@@ -15,8 +15,8 @@ interface Props {
 /**
  * Spinner
  *
- * Neo-Brutalist Dark — Clean loading indicator.
- * Cyan accent, dark surfaces, geometric shapes.
+ * INFRARED — Clean loading indicator.
+ * Vermilion accent, dark surfaces, geometric shapes.
  * role="status", aria-label, delay, overlay. prefers-reduced-motion respected.
  *
  * Three styles: ring (default), dots (inline), pulse (radar/broadcast).