@salmexio/ui 0.3.1 → 1.0.0

package/dist/primitives/Button/Button.svelte

@@ -1,14 +1,14 @@
 <!--
   @component Button
-  
-  Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
-  Raw structure, expressive energy, world-class accessibility.
-  
+
+  Neo-Brutalist Dark — Glassmorphism button with glow effects.
+  Clean geometry, expressive energy, world-class accessibility.
+
   @example
   <Button variant="default" size="md" onclick={() => handleClick()}>
     Click me
   </Button>
-  
+
   @example
   <Button variant="primary" disabled>
     <Icon slot="icon-left" />
@@ -21,7 +21,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
 import { cn } from '../../utils/cn.js';
 
 type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonVariant = 'default' | 'primary' | 'ghost';
+type ButtonVariant = 'default' | 'primary' | 'ghost' | 'danger';
 
 interface Props extends Omit<HTMLButtonAttributes, 'class'> {
 	/** Visual variant of the button */
@@ -68,11 +68,11 @@ const isDisabled = $derived(disabled);
 <button
 	{type}
 	class={cn(
-		'salmex-btn',
-		`salmex-btn-${variant}`,
-		`salmex-btn-${size}`,
-		iconOnly && 'salmex-btn-icon-only',
-		fullWidth && !iconOnly && 'salmex-btn-full-width',
+		'sx-btn',
+		`sx-btn-${variant}`,
+		`sx-btn-${size}`,
+		iconOnly && 'sx-btn-icon-only',
+		fullWidth && !iconOnly && 'sx-btn-full-width',
 		className
 	)}
 	disabled={isDisabled}
@@ -80,9 +80,9 @@ const isDisabled = $derived(disabled);
 	data-testid={testId}
 	{...restProps}
 >
-	<span class="salmex-btn-content">
+	<span class="sx-btn-content">
 		{#if iconLeft}
-			<span class="salmex-btn-icon" aria-hidden="true">
+			<span class="sx-btn-icon" aria-hidden="true">
 				{@render iconLeft()}
 			</span>
 		{/if}
@@ -92,13 +92,13 @@ const isDisabled = $derived(disabled);
 		{/if}
 
 		{#if iconRight}
-			<span class="salmex-btn-icon" aria-hidden="true">
+			<span class="sx-btn-icon" aria-hidden="true">
 				{@render iconRight()}
 			</span>
 		{/if}
 
 		{#if shortcut}
-			<span class="salmex-btn-shortcut" aria-label="Keyboard shortcut: {shortcut}">
+			<span class="sx-btn-shortcut" aria-label="Keyboard shortcut: {shortcut}">
 				{shortcut}
 			</span>
 		{/if}
@@ -107,302 +107,232 @@ const isDisabled = $derived(disabled);
 
 <style>
 	/* ========================================
-	   BASE BUTTON - Basquiat × Win2K 3D
+	   BASE BUTTON - Neo-Brutalist Dark
 	   ======================================== */
-	.salmex-btn {
+	.sx-btn {
 		position: relative;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--salmex-space-2);
-		font-family: var(--salmex-font-system);
-		font-weight: 700;
+		gap: var(--sx-space-2);
+		font-family: var(--sx-font-body);
+		font-weight: 600;
 		cursor: pointer;
 		user-select: none;
 		-webkit-tap-highlight-color: transparent;
-		
-		/* Canvas-like button surface */
-		background: rgb(var(--salmex-button-face));
-		border: none;
-		
-		/* Bold 3D effect - stronger than original Win2K */
-		box-shadow:
-			/* Top-left highlight */
-			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
-			inset 3px 3px 0 rgb(var(--salmex-button-light)),
-			/* Bottom-right shadow */
-			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
-			/* Outer bold border */
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			/* Flat shadow - Basquiat style */
-			4px 4px 0 rgb(0 0 0 / 0.25);
-		
-		transition: all var(--salmex-transition-fast);
-		text-transform: uppercase;
-		letter-spacing: 0.3px;
+
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		color: var(--sx-color-text);
+		box-shadow: var(--sx-shadow-sm);
+
+		transition: transform var(--sx-transition-fast), box-shadow var(--sx-transition-fast),
+			background var(--sx-transition-fast), border-color var(--sx-transition-fast),
+			color var(--sx-transition-fast);
 	}
 
-	/* Focus - use global yellow ring (visible in light and dark) */
-	.salmex-btn:focus-visible {
-		outline: none;
-		box-shadow:
-			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
-			inset 3px 3px 0 rgb(var(--salmex-button-light)),
-			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			4px 4px 0 rgb(0 0 0 / 0.25),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	/* Focus */
+	.sx-btn:focus-visible {
+		outline: 2px solid var(--sx-color-cyan);
+		outline-offset: 2px;
 	}
 
-	:global([data-theme='dark']) .salmex-btn:focus-visible {
-		box-shadow:
-			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
-			inset 3px 3px 0 rgb(var(--salmex-button-light)),
-			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			4px 4px 0 rgb(0 0 0 / 0.25),
-			0 0 0 3px rgb(var(--salmex-crown-yellow));
+	/* Primary focus needs white outline since cyan-on-cyan is invisible */
+	.sx-btn-primary:focus-visible {
+		outline-color: var(--sx-white);
 	}
 
-	/* Hover state - energetic highlight */
-	.salmex-btn:hover:not(:disabled) {
-		background: rgb(var(--salmex-button-light));
-		transform: translateY(-1px);
-		box-shadow:
-			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
-			inset 3px 3px 0 rgb(var(--salmex-button-light)),
-			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			5px 5px 0 rgb(0 0 0 / 0.3);
+	/* Hover state */
+	.sx-btn:hover:not(:disabled) {
+		transform: translateY(-2px);
+		box-shadow: var(--sx-shadow-md);
+		border-color: var(--sx-color-border-hover);
 	}
 
-	/* Active (pressed) state - inverted shadow */
-	.salmex-btn:active:not(:disabled) {
-		box-shadow:
-			/* Inverted shadows */
-			inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
-			inset -3px -3px 0 rgb(var(--salmex-button-light)),
-			inset 2px 2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset 3px 3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			2px 2px 0 rgb(0 0 0 / 0.3);
-		
-		/* Shift down-right for pressed effect */
-		transform: translate(2px, 2px);
+	/* Active (pressed) state */
+	.sx-btn:active:not(:disabled) {
+		transform: translateY(0);
+		box-shadow: var(--sx-shadow-sm);
 	}
 
 	/* Disabled state */
-	.salmex-btn:disabled {
+	.sx-btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		color: rgb(var(--salmex-text-disabled));
-		filter: grayscale(0.5);
+		color: var(--sx-color-text-disabled);
 	}
 
 	/* ========================================
 	   SIZE VARIANTS
 	   ======================================== */
-	.salmex-btn-sm {
+	.sx-btn-sm {
 		height: 28px;
-		padding: 0 var(--salmex-space-3);
-		font-size: var(--salmex-font-size-xs);
+		padding: 0 var(--sx-space-2);
+		font-size: var(--sx-text-xs);
 	}
 
-	.salmex-btn-md {
+	.sx-btn-md {
 		height: 36px;
-		padding: 0 var(--salmex-space-5);
-		font-size: var(--salmex-font-size-base);
+		padding: 0 var(--sx-space-4);
+		font-size: var(--sx-text-sm);
 	}
 
-	.salmex-btn-lg {
+	.sx-btn-lg {
 		height: 44px;
-		padding: 0 var(--salmex-space-6);
-		font-size: var(--salmex-font-size-md);
+		padding: 0 var(--sx-space-5);
+		font-size: var(--sx-text-base);
 	}
 
 	/* Icon-only variants */
-	.salmex-btn-icon-only.salmex-btn-sm {
+	.sx-btn-icon-only.sx-btn-sm {
 		width: 28px;
 		padding: 0;
 	}
 
-	.salmex-btn-icon-only.salmex-btn-md {
+	.sx-btn-icon-only.sx-btn-md {
 		width: 36px;
 		padding: 0;
 	}
 
-	.salmex-btn-icon-only.salmex-btn-lg {
+	.sx-btn-icon-only.sx-btn-lg {
 		width: 44px;
 		padding: 0;
 	}
 
 	/* Full width */
-	.salmex-btn-full-width {
+	.sx-btn-full-width {
 		width: 100%;
 	}
 
 	/* ========================================
-	   VARIANT STYLES - Neo-Expressionist
+	   VARIANT STYLES - Neo-Brutalist Dark
 	   ======================================== */
-	
-	/* Default variant - bold canvas */
-	.salmex-btn-default {
-		color: rgb(var(--salmex-text-primary));
-	}
 
-	/* Primary variant - electric blue with yellow accent */
-	.salmex-btn-primary {
-		background: linear-gradient(135deg, 
-			rgb(var(--salmex-electric-blue)), 
-			rgb(var(--salmex-titlebar-bold))
-		);
-		color: rgb(var(--salmex-chalk-white));
-		font-weight: 900;
-		
-		box-shadow:
-			inset 2px 2px 0 rgba(255, 255, 255, 0.3),
-			inset 3px 3px 0 rgba(255, 255, 255, 0.15),
-			inset -2px -2px 0 rgba(0, 0, 0, 0.4),
-			inset -3px -3px 0 rgba(0, 0, 0, 0.2),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			4px 4px 0 rgb(0 0 0 / 0.35);
+	/* Default variant */
+	.sx-btn-default {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
+		border: 1px solid var(--sx-color-border-strong);
 	}
 
-	/* Yellow accent underline on primary */
-	.salmex-btn-primary::after {
-		content: '';
-		position: absolute;
-		bottom: 4px;
-		left: 10%;
-		width: 80%;
-		height: 2px;
-		background: rgb(var(--salmex-crown-yellow));
-		opacity: 0.7;
+	/* Primary variant — cyan glow */
+	.sx-btn-primary {
+		background: var(--sx-color-cyan);
+		color: var(--sx-color-text-inverse);
+		border: none;
+		font-weight: 600;
 	}
 
-	.salmex-btn-primary:hover:not(:disabled) {
-		background: linear-gradient(135deg, 
-			rgb(var(--salmex-primary-light)), 
-			rgb(var(--salmex-electric-blue))
-		);
-		transform: translateY(-1px);
-		box-shadow:
-			inset 2px 2px 0 rgba(255, 255, 255, 0.3),
-			inset 3px 3px 0 rgba(255, 255, 255, 0.15),
-			inset -2px -2px 0 rgba(0, 0, 0, 0.4),
-			inset -3px -3px 0 rgba(0, 0, 0, 0.2),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			5px 5px 0 rgb(0 0 0 / 0.4);
+	.sx-btn-primary:hover:not(:disabled) {
+		transform: translateY(-2px);
+		box-shadow: var(--sx-shadow-glow-cyan);
 	}
 
-	.salmex-btn-primary:active:not(:disabled) {
-		transform: translate(2px, 2px);
-		box-shadow:
-			inset -2px -2px 0 rgba(255, 255, 255, 0.3),
-			inset -3px -3px 0 rgba(255, 255, 255, 0.15),
-			inset 2px 2px 0 rgba(0, 0, 0, 0.4),
-			inset 3px 3px 0 rgba(0, 0, 0, 0.2),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			2px 2px 0 rgb(0 0 0 / 0.3);
+	.sx-btn-primary:active:not(:disabled) {
+		transform: translateY(0);
+		box-shadow: var(--sx-shadow-sm);
 	}
 
-	/* Ghost variant — visible border at rest, full 3D bevel on hover */
-	.salmex-btn-ghost {
+	/* Ghost variant — transparent, subtle */
+	.sx-btn-ghost {
 		background: transparent;
-		box-shadow: 0 0 0 2px rgb(var(--salmex-border-dark));
-		color: rgb(var(--salmex-text-primary));
-		font-weight: 600;
+		border: none;
+		color: var(--sx-color-text-secondary);
+		box-shadow: none;
 	}
 
-	.salmex-btn-ghost:hover:not(:disabled) {
-		background: rgb(var(--salmex-button-face));
-		transform: translateY(-1px);
-		box-shadow:
-			inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
-			inset 3px 3px 0 rgb(var(--salmex-button-light)),
-			inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			4px 4px 0 rgb(0 0 0 / 0.25);
+	.sx-btn-ghost:hover:not(:disabled) {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
+		transform: none;
+		box-shadow: none;
 	}
 
-	.salmex-btn-ghost:active:not(:disabled) {
-		background: rgb(var(--salmex-button-face));
-		box-shadow:
-			inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
-			inset -3px -3px 0 rgb(var(--salmex-button-light)),
-			inset 2px 2px 0 rgb(var(--salmex-button-dark-edge)),
-			inset 3px 3px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			2px 2px 0 rgb(0 0 0 / 0.3);
-		transform: translate(2px, 2px);
+	.sx-btn-ghost:active:not(:disabled) {
+		background: var(--sx-color-surface-2);
+		transform: translateY(0);
+		box-shadow: none;
 	}
 
-	.salmex-btn-ghost:focus-visible {
-		outline: none;
-		box-shadow:
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			0 0 0 4px rgb(var(--salmex-midnight-black)),
-			0 0 0 7px rgb(var(--salmex-crown-yellow));
+	/* Danger variant — red glow */
+	.sx-btn-danger {
+		background: var(--sx-color-red-hover);
+		color: var(--sx-color-red);
+		border: 1px solid rgba(255, 59, 59, 0.2);
 	}
 
-	:global([data-theme='dark']) .salmex-btn-ghost:focus-visible {
-		box-shadow:
-			0 0 0 2px rgb(var(--salmex-border-dark)),
-			0 0 0 5px rgb(var(--salmex-crown-yellow));
+	.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);
 	}
 
-	/* Dark mode — more visible yellow underline on primary */
-	:global([data-theme='dark']) .salmex-btn-primary::after {
-		opacity: 0.9;
+	.sx-btn-danger:active:not(:disabled) {
+		transform: translateY(0);
+		box-shadow: var(--sx-shadow-sm);
 	}
 
 	/* ========================================
 	   CONTENT & LAYOUT
 	   ======================================== */
-	.salmex-btn-content {
+	.sx-btn-content {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
+		gap: var(--sx-space-2);
 		position: relative;
 		z-index: 1;
 	}
 
-	.salmex-btn-icon {
+	.sx-btn-icon {
 		display: inline-flex;
 		flex-shrink: 0;
 		line-height: 0;
 	}
 
-	.salmex-btn-shortcut {
-		margin-left: var(--salmex-space-3);
+	.sx-btn-shortcut {
+		margin-left: var(--sx-space-3);
 		font-size: 0.8em;
-		opacity: 0.8;
-		font-family: var(--salmex-font-mono);
+		opacity: 0.9;
+		font-family: var(--sx-font-mono);
 		font-weight: 600;
 		padding: 2px 6px;
-		background: rgba(0, 0, 0, 0.1);
-		border-radius: 2px;
+		background: var(--sx-color-surface-3);
+		border-radius: var(--sx-radius-sm);
+	}
+
+	/* Shortcut on primary: white text on darker translucent bg */
+	.sx-btn-primary .sx-btn-shortcut {
+		background: rgba(0, 0, 0, 0.3);
+		color: var(--sx-white);
+	}
+
+	/* Shortcut on danger: match the red text */
+	.sx-btn-danger .sx-btn-shortcut {
+		background: rgba(255, 59, 59, 0.15);
+		color: var(--sx-color-red);
+	}
+
+	/* Shortcut on ghost: subtle */
+	.sx-btn-ghost .sx-btn-shortcut {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text-secondary);
 	}
 
 	/* ========================================
 	   REDUCED MOTION
 	   ======================================== */
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-btn {
+		.sx-btn {
 			transition: none;
 		}
-		
-		.salmex-btn:hover:not(:disabled) {
+
+		.sx-btn:hover:not(:disabled) {
 			transform: none;
 		}
-		
-		.salmex-btn:active:not(:disabled) {
+
+		.sx-btn:active:not(:disabled) {
 			transform: none;
 		}
 	}

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonVariant = 'default' | 'primary' | 'ghost';
+type ButtonVariant = 'default' | 'primary' | 'ghost' | 'danger';
 interface Props extends Omit<HTMLButtonAttributes, 'class'> {
     /** Visual variant of the button */
     variant?: ButtonVariant;
@@ -27,8 +27,8 @@ interface Props extends Omit<HTMLButtonAttributes, 'class'> {
 /**
  * Button
  *
- * Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
- * Raw structure, expressive energy, world-class accessibility.
+ * Neo-Brutalist Dark — Glassmorphism button with glow effects.
+ * Clean geometry, expressive energy, world-class accessibility.
  *
  * @example
  * <Button variant="default" size="md" onclick={() => handleClick()}>

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

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}