@salmexio/ui 0.2.0 → 0.3.0

package/dist/primitives/Badge/Badge.svelte

@@ -20,8 +20,6 @@ interface Props {
 	status?: BadgeStatus;
 	/** Size */
 	size?: BadgeSize;
-	/** Pill shape (fully rounded) — we use minimal radius by default */
-	pill?: boolean;
 	/** Dot-only indicator (no text), use with aria-label for a11y */
 	dot?: boolean;
 	/** Optional icon before label */
@@ -37,7 +35,6 @@ interface Props {
 let {
 	status = 'neutral',
 	size = 'md',
-	pill = false,
 	dot = false,
 	icon,
 	class: className = '',
@@ -66,7 +63,6 @@ let {
 			'salmex-badge',
 			`salmex-badge-${size}`,
 			`salmex-badge-${status}`,
-			pill && 'salmex-badge-pill',
 			status === 'primary' && 'salmex-badge-has-accent',
 			className
 		)}
@@ -99,12 +95,8 @@ let {
 		box-shadow: var(--salmex-shadow-sm);
 	}
 
-	.salmex-badge-pill {
-		border-radius: 9999px;
-	}
-
 	/* Stay sharp — minimal radius, Basquiat style */
-	.salmex-badge:not(.salmex-badge-pill) {
+	.salmex-badge:not(.salmex-badge-dot) {
 		border-radius: var(--salmex-radius-none);
 	}
 
@@ -308,6 +300,28 @@ let {
 		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);
@@ -322,6 +336,28 @@ let {
 		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));
+	}
+
+	: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));
+		}
+	}
+
 	/* Outline — transparent, bold border, no inset (flat) */
 	.salmex-badge-outline {
 		background: rgb(var(--salmex-button-face) / 0.5);

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

@@ -6,8 +6,6 @@ interface Props {
     status?: BadgeStatus;
     /** Size */
     size?: BadgeSize;
-    /** Pill shape (fully rounded) — we use minimal radius by default */
-    pill?: boolean;
     /** Dot-only indicator (no text), use with aria-label for a11y */
     dot?: boolean;
     /** Optional icon before label */

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,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,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;AAuDD;;;;;;;;;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;AAqDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Button/Button.svelte

@@ -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' | 'flat';
+type ButtonVariant = 'default' | 'primary' | 'ghost';
 
 interface Props extends Omit<HTMLButtonAttributes, 'class'> {
 	/** Visual variant of the button */
@@ -311,29 +311,55 @@ const isDisabled = $derived(disabled);
 			2px 2px 0 rgb(0 0 0 / 0.3);
 	}
 
-	/* Flat variant - minimal but bold on interaction */
-	.salmex-btn-flat {
+	/* Ghost variant — visible border at rest, full 3D bevel on hover */
+	.salmex-btn-ghost {
 		background: transparent;
-		box-shadow: none;
+		box-shadow: 0 0 0 2px rgb(var(--salmex-border-dark));
 		color: rgb(var(--salmex-text-primary));
 		font-weight: 600;
 	}
 
-	.salmex-btn-flat:hover:not(:disabled) {
-		background: rgb(var(--salmex-hover-layer) / 0.15);
+	.salmex-btn-ghost:hover:not(:disabled) {
+		background: rgb(var(--salmex-button-face));
+		transform: translateY(-1px);
 		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 1px rgb(var(--salmex-border-light));
-		color: rgb(var(--salmex-electric-blue));
+			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);
 	}
 
-	.salmex-btn-flat:active:not(:disabled) {
+	.salmex-btn-ghost:active:not(:disabled) {
 		background: rgb(var(--salmex-button-face));
 		box-shadow:
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow));
-		transform: translate(1px, 1px);
+			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);
+	}
+
+	.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));
+	}
+
+	: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));
+	}
+
+	/* Dark mode — more visible yellow underline on primary */
+	:global([data-theme='dark']) .salmex-btn-primary::after {
+		opacity: 0.9;
 	}
 
 	/* ========================================

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' | 'flat';
+type ButtonVariant = 'default' | 'primary' | 'ghost';
 interface Props extends Omit<HTMLButtonAttributes, 'class'> {
     /** Visual variant of the button */
     variant?: ButtonVariant;

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,MAAM,CAAC;AAEpD,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,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"}

package/dist/styles/tokens.css

@@ -184,9 +184,9 @@
 	--salmex-window-surface: 22 22 22;
 	--salmex-titlebar-bold: 0 140 255; /* Brighter blue for dark mode */
 	--salmex-button-face: 32 32 32;
-	--salmex-button-shadow: 60 60 60;
+	--salmex-button-shadow: 50 50 50;
 	--salmex-button-dark-edge: 8 8 8;
-	--salmex-button-highlight: 80 80 80;
+	--salmex-button-highlight: 90 90 90;
 	--salmex-button-light: 50 50 50;
 
 	/* Text - high contrast */
@@ -238,9 +238,9 @@
 		--salmex-window-surface: 22 22 22;
 		--salmex-titlebar-bold: 0 140 255;
 		--salmex-button-face: 32 32 32;
-		--salmex-button-shadow: 60 60 60;
+		--salmex-button-shadow: 50 50 50;
 		--salmex-button-dark-edge: 8 8 8;
-		--salmex-button-highlight: 80 80 80;
+		--salmex-button-highlight: 90 90 90;
 		--salmex-button-light: 50 50 50;
 		--salmex-text-primary: 255 255 255;
 		--salmex-text-secondary: 200 200 200;

package/dist/windowing/Window/Window.svelte

@@ -410,12 +410,12 @@ function handleKeyDown(e: KeyboardEvent) {
 		color: rgb(var(--salmex-text-disabled));
 	}
 
-	/* Dark mode */
+	/* Dark mode — darker gradient for better text contrast (~5-6:1) */
 	:global([data-theme='dark']) .salmex-win-titlebar {
 		background: linear-gradient(
 			90deg,
-			rgb(0 100 220),
-			rgb(0 140 255)
+			rgb(0 75 180),
+			rgb(0 105 210)
 		);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@salmexio/ui",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
 	"type": "module",
 	"license": "UNLICENSED",