@salmexio/ui 0.4.0 → 1.1.0

package/dist/primitives/Badge/Badge.svelte

@@ -1,8 +1,8 @@
 <!--
   @component Badge
 
-  Win2K × Basquiat — Status badge for labels, counts, and states.
-  Bold borders, high contrast, role="status" for screen readers.
+  INFRARED — Status badge for labels, counts, and states.
+  Pill-shaped, translucent backgrounds, role="status" for screen readers.
 
   @example
   <Badge status="success">Active</Badge>
@@ -46,30 +46,29 @@ let {
 {#if dot}
 	<span
 		class={cn(
-			'salmex-badge',
-			'salmex-badge-dot',
-			`salmex-badge-dot-${size}`,
-			`salmex-badge-${status}`,
+			'sx-badge',
+			'sx-badge-dot',
+			`sx-badge-dot-${size}`,
+			`sx-badge-${status}`,
 			className
 		)}
 		role="status"
 		aria-label={ariaLabel ?? status}
 	>
-		<span class="salmex-sr-only">{ariaLabel ?? status}</span>
+		<span class="sx-sr-only">{ariaLabel ?? status}</span>
 	</span>
 	{:else}
 	<span
 		class={cn(
-			'salmex-badge',
-			`salmex-badge-${size}`,
-			`salmex-badge-${status}`,
-			status === 'primary' && 'salmex-badge-has-accent',
+			'sx-badge',
+			`sx-badge-${size}`,
+			`sx-badge-${status}`,
 			className
 		)}
 		role="status"
 	>
 		{#if icon}
-			<span class="salmex-badge-icon" aria-hidden="true">
+			<span class="sx-badge-icon" aria-hidden="true">
 				{@render icon()}
 			</span>
 		{/if}
@@ -80,36 +79,32 @@ let {
 {/if}
 
 <style>
-	/* Base — philosophy at small scale: flat shadow, bold border, no heavy bevel */
-	.salmex-badge {
+	/* Base */
+	.sx-badge {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--salmex-space-1);
-		font-family: var(--salmex-font-system);
-		font-weight: 700;
-		letter-spacing: 0.4px;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+		font-weight: 500;
 		white-space: nowrap;
-		transition: box-shadow var(--salmex-transition-fast);
+		transition: box-shadow var(--sx-transition-fast);
 		border: 1px solid transparent;
 		box-shadow: none;
+		animation: sx-badge-pop 200ms var(--sx-ease-spring) both;
 	}
 
-	/* Stay sharp — minimal radius, Basquiat style */
-	.salmex-badge:not(.salmex-badge-dot) {
-		border-radius: var(--salmex-radius-md);
+	/* Pill shape for all non-dot badges */
+	.sx-badge:not(.sx-badge-dot) {
+		border-radius: var(--sx-radius-full);
 	}
 
-	.salmex-badge-icon {
+	.sx-badge-icon {
 		display: inline-flex;
 		flex-shrink: 0;
 		line-height: 0;
 	}
 
-	.salmex-badge-has-accent {
-		position: relative;
-	}
-
-	.salmex-sr-only {
+	.sx-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -122,258 +117,128 @@ let {
 	}
 
 	/* Sizes */
-	.salmex-badge-sm {
-		padding: 2px var(--salmex-space-2);
-		font-size: var(--salmex-font-size-xs);
+	.sx-badge-sm {
+		padding: 2px var(--sx-space-2);
+		font-size: var(--sx-text-xs);
 	}
 
-	.salmex-badge-md {
-		padding: 4px var(--salmex-space-3);
-		font-size: var(--salmex-font-size-xs);
+	.sx-badge-md {
+		padding: 4px var(--sx-space-3);
+		font-size: var(--sx-text-xs);
 	}
 
-	.salmex-badge-lg {
-		padding: 6px var(--salmex-space-4);
-		font-size: var(--salmex-font-size-sm);
+	.sx-badge-lg {
+		padding: 6px var(--sx-space-4);
+		font-size: var(--sx-text-sm);
 	}
 
 	/* Dot */
-	.salmex-badge-dot {
+	.sx-badge-dot {
 		padding: 0;
 		border-radius: 50%;
-		box-shadow: var(--salmex-shadow-sm);
 	}
 
-	.salmex-badge-dot-sm {
+	.sx-badge-dot-sm {
 		width: 8px;
 		height: 8px;
 	}
 
-	.salmex-badge-dot-md {
+	.sx-badge-dot-md {
 		width: 10px;
 		height: 10px;
 	}
 
-	.salmex-badge-dot-lg {
+	.sx-badge-dot-lg {
 		width: 12px;
 		height: 12px;
 	}
 
-	/* Neutral — canvas/button face */
-	.salmex-badge-neutral {
-		background: rgb(var(--salmex-button-face));
-		color: rgb(var(--salmex-text-primary));
-		border-color: rgb(var(--salmex-border-dark));
-	}
+	/* ========================================
+	   STATUS VARIANTS - INFRARED
+	   ======================================== */
 
-	.salmex-badge-dot.salmex-badge-neutral {
-		background: rgb(var(--salmex-text-secondary));
-		border: none;
-		box-shadow: var(--salmex-shadow-sm);
+	/* Neutral */
+	.sx-badge-neutral {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text-secondary);
 	}
 
-	/* Primary — electric blue + thin crown yellow accent */
-	.salmex-badge-primary {
-		background: rgb(var(--salmex-electric-blue) / 0.18);
-		color: rgb(var(--salmex-electric-blue));
-		border-color: rgb(var(--salmex-electric-blue));
-		box-shadow: var(--salmex-shadow-sm);
-	}
-
-	.salmex-badge-primary::after {
-		content: '';
-		position: absolute;
-		bottom: 0;
-		left: 12%;
-		width: 76%;
-		height: 1px;
-		background: rgb(var(--salmex-crown-yellow));
-		opacity: 0.85;
-	}
-
-	.salmex-badge-dot.salmex-badge-primary {
-		background: rgb(var(--salmex-electric-blue));
+	.sx-badge-dot.sx-badge-neutral {
+		background: var(--sx-color-text-secondary);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-primary {
-		background: rgb(var(--salmex-primary-light) / 0.25);
-		color: rgb(var(--salmex-primary-light));
-		border-color: rgb(var(--salmex-primary-light));
-		box-shadow: var(--salmex-shadow-sm);
+	/* Primary — vermilion */
+	.sx-badge-primary {
+		background: var(--sx-color-primary-active);
+		color: var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-primary::after {
-		background: rgb(var(--salmex-crown-yellow));
-		opacity: 0.9;
-	}
-
-	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-primary {
-		background: rgb(var(--salmex-primary-light));
-	}
-
-	/* Success — deep green, flat */
-	.salmex-badge-success {
-		background: rgb(30 115 65 / 0.2);
-		color: rgb(25 95 55);
-		border-color: rgb(25 95 55);
-		box-shadow: var(--salmex-shadow-sm);
-	}
-
-	.salmex-badge-dot.salmex-badge-success {
-		background: rgb(25 95 55);
+	.sx-badge-dot.sx-badge-primary {
+		background: var(--sx-color-primary);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
-	}
-
-	:global([data-theme='dark']) .salmex-badge-success {
-		background: rgb(var(--salmex-urban-green) / 0.2);
-		color: rgb(var(--salmex-urban-green));
-		border-color: rgb(var(--salmex-urban-green));
-	}
-
-	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-success {
-		background: rgb(var(--salmex-urban-green));
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-badge-success {
-			background: rgb(var(--salmex-urban-green) / 0.2);
-			color: rgb(var(--salmex-urban-green));
-			border-color: rgb(var(--salmex-urban-green));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-success {
-			background: rgb(var(--salmex-urban-green));
-		}
 	}
 
-	/* Warning — deep amber, flat */
-	.salmex-badge-warning {
-		background: rgb(185 95 15 / 0.22);
-		color: rgb(145 75 10);
-		border-color: rgb(145 75 10);
-		box-shadow: var(--salmex-shadow-sm);
+	/* Success — green */
+	.sx-badge-success {
+		background: var(--sx-color-green-subtle);
+		color: var(--sx-color-green);
 	}
 
-	.salmex-badge-dot.salmex-badge-warning {
-		background: rgb(145 75 10);
+	.sx-badge-dot.sx-badge-success {
+		background: var(--sx-color-green);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-warning {
-		background: rgb(var(--salmex-spray-orange) / 0.2);
-		color: rgb(var(--salmex-spray-orange));
-		border-color: rgb(var(--salmex-spray-orange));
+	/* Warning — brass */
+	.sx-badge-warning {
+		background: var(--sx-color-brass-subtle);
+		color: var(--sx-color-secondary);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-warning {
-		background: rgb(var(--salmex-spray-orange));
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-badge-warning {
-			background: rgb(var(--salmex-spray-orange) / 0.2);
-			color: rgb(var(--salmex-spray-orange));
-			border-color: rgb(var(--salmex-spray-orange));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-warning {
-			background: rgb(var(--salmex-spray-orange));
-		}
-	}
-
-	/* Error — street red, flat */
-	.salmex-badge-error {
-		background: rgb(var(--salmex-street-red) / 0.18);
-		color: rgb(var(--salmex-street-red));
-		border-color: rgb(var(--salmex-street-red));
-		box-shadow: var(--salmex-shadow-sm);
-	}
-
-	.salmex-badge-dot.salmex-badge-error {
-		background: rgb(var(--salmex-street-red));
+	.sx-badge-dot.sx-badge-warning {
+		background: var(--sx-color-secondary);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
-	}
-
-	:global([data-theme='dark']) .salmex-badge-error {
-		background: rgb(var(--salmex-street-red) / 0.2);
-		color: rgb(var(--salmex-street-red));
-		border-color: rgb(var(--salmex-street-red));
-	}
-
-	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-error {
-		background: rgb(var(--salmex-street-red));
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-badge-error {
-			background: rgb(var(--salmex-street-red) / 0.2);
-			color: rgb(var(--salmex-street-red));
-			border-color: rgb(var(--salmex-street-red));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-error {
-			background: rgb(var(--salmex-street-red));
-		}
 	}
 
-	/* Info — electric blue, flat */
-	.salmex-badge-info {
-		background: rgb(var(--salmex-info) / 0.18);
-		color: rgb(var(--salmex-info));
-		border-color: rgb(var(--salmex-info));
-		box-shadow: var(--salmex-shadow-sm);
+	/* Error — red */
+	.sx-badge-error {
+		background: var(--sx-color-red-hover);
+		color: var(--sx-color-red);
 	}
 
-	.salmex-badge-dot.salmex-badge-info {
-		background: rgb(var(--salmex-info));
+	.sx-badge-dot.sx-badge-error {
+		background: var(--sx-color-red);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-info {
-		background: rgb(var(--salmex-primary-light) / 0.2);
-		color: rgb(var(--salmex-primary-light));
-		border-color: rgb(var(--salmex-primary-light));
+	/* Info — teal */
+	.sx-badge-info {
+		background: var(--sx-color-teal-subtle);
+		color: var(--sx-color-teal);
 	}
 
-	:global([data-theme='dark']) .salmex-badge-dot.salmex-badge-info {
-		background: rgb(var(--salmex-primary-light));
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:global(:root:not([data-theme='light'])) .salmex-badge-info {
-			background: rgb(var(--salmex-primary-light) / 0.2);
-			color: rgb(var(--salmex-primary-light));
-			border-color: rgb(var(--salmex-primary-light));
-		}
-
-		:global(:root:not([data-theme='light'])) .salmex-badge-dot.salmex-badge-info {
-			background: rgb(var(--salmex-primary-light));
-		}
+	.sx-badge-dot.sx-badge-info {
+		background: var(--sx-color-teal);
+		border: none;
 	}
 
-	/* Outline — transparent, bold border, no inset (flat) */
-	.salmex-badge-outline {
-		background: rgb(var(--salmex-button-face) / 0.5);
-		color: rgb(var(--salmex-text-primary));
-		border-color: rgb(var(--salmex-border-dark));
-		box-shadow: var(--salmex-shadow-sm);
+	/* Outline — transparent with border */
+	.sx-badge-outline {
+		background: transparent;
+		color: var(--sx-color-text-secondary);
+		border: 1px solid var(--sx-color-border-strong);
 	}
 
-	.salmex-badge-dot.salmex-badge-outline {
-		background: rgb(var(--salmex-border-default));
+	.sx-badge-dot.sx-badge-outline {
+		background: var(--sx-color-border-strong);
 		border: none;
-		box-shadow: var(--salmex-shadow-sm);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-badge {
+		.sx-badge {
 			transition: none;
+			animation: none;
 		}
 	}
 </style>

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

@@ -20,8 +20,8 @@ interface Props {
 /**
  * Badge
  *
- * Win2K × Basquiat — Status badge for labels, counts, and states.
- * Bold borders, high contrast, role="status" for screen readers.
+ * INFRARED — Status badge for labels, counts, and states.
+ * Pill-shaped, translucent backgrounds, role="status" for screen readers.
  *
  * @example
  * <Badge status="success">Active</Badge>

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAqDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAoDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}