@salmexio/ui 0.4.0 → 1.1.0

package/dist/forms/Checkbox/Checkbox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Checkbox
 
-  Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+  INFRARED — Clean checkbox with vermilion accent fill and white checkmark.
   Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
   Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
 -->
@@ -74,13 +74,13 @@ function handleChange(e: Event) {
 
 <div
 	class={cn(
-		'salmex-checkbox',
-		`salmex-checkbox-${size}`,
-		disabled && 'salmex-checkbox-disabled',
+		'sx-checkbox',
+		`sx-checkbox-${size}`,
+		disabled && 'sx-checkbox-disabled',
 		className
 	)}
 >
-	<label for={id} class="salmex-checkbox-label">
+	<label for={id} class="sx-checkbox-label">
 		<input
 			bind:this={inputElement}
 			{id}
@@ -92,80 +92,80 @@ function handleChange(e: Event) {
 			{required}
 			aria-invalid={showError}
 			aria-describedby={ariaDescribedBy}
-			class="salmex-checkbox-input"
+			class="sx-checkbox-input"
 			data-testid={testId}
 			onchange={handleChange}
 		/>
 		<span
 			class={cn(
-				'salmex-checkbox-box',
-				(checked || indeterminate) && 'salmex-checkbox-box-checked',
-				indeterminate && 'salmex-checkbox-box-indeterminate',
-				showError && 'salmex-checkbox-box-error'
+				'sx-checkbox-box',
+				(checked || indeterminate) && 'sx-checkbox-box-checked',
+				indeterminate && 'sx-checkbox-box-indeterminate',
+				showError && 'sx-checkbox-box-error'
 			)}
 			aria-hidden="true"
 		>
 			{#if showChecked}
-				<svg class="salmex-checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<svg class="sx-checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 					<polyline points="20 6 9 17 4 12" />
 				</svg>
 			{:else if indeterminate}
-				<svg class="salmex-checkbox-icon salmex-checkbox-icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true">
+				<svg class="sx-checkbox-icon sx-checkbox-icon-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" aria-hidden="true">
 					<line x1="5" y1="12" x2="19" y2="12" />
 				</svg>
 			{/if}
 		</span>
-		<span class="salmex-checkbox-content" class:salmex-sr-only={hideLabel}>
-			<span class="salmex-checkbox-text">
+		<span class="sx-checkbox-content" class:sx-sr-only={hideLabel}>
+			<span class="sx-checkbox-text">
 				{label}
 				{#if required}
-					<span class="salmex-checkbox-required" aria-hidden="true">*</span>
+					<span class="sx-checkbox-required" aria-hidden="true">*</span>
 				{/if}
 			</span>
 			{#if description && !hideLabel}
-				<span id={descriptionId} class="salmex-checkbox-description">{description}</span>
+				<span id={descriptionId} class="sx-checkbox-description">{description}</span>
 			{/if}
 		</span>
 	</label>
 	{#if showError}
-		<p id={errorId} class="salmex-checkbox-error" role="alert">{error}</p>
+		<p id={errorId} class="sx-checkbox-error" role="alert">{error}</p>
 	{/if}
 </div>
 
 <style>
-	.salmex-checkbox {
+	.sx-checkbox {
 		display: flex;
 		flex-direction: column;
-		gap: var(--salmex-space-1);
+		gap: var(--sx-space-1);
 	}
 
-	.salmex-checkbox-disabled {
-		opacity: 0.6;
+	.sx-checkbox-disabled {
+		opacity: 0.5;
 	}
 
-	.salmex-checkbox-label {
+	.sx-checkbox-label {
 		display: flex;
 		align-items: center;
-		gap: var(--salmex-space-2);
+		gap: var(--sx-space-2);
 		cursor: pointer;
 		user-select: none;
-		font-family: var(--salmex-font-system);
+		font-family: var(--sx-font-body);
 	}
 
-	.salmex-checkbox-label:has(.salmex-checkbox-description) {
+	.sx-checkbox-label:has(.sx-checkbox-description) {
 		align-items: flex-start;
 	}
 
-	.salmex-checkbox-label:has(.salmex-checkbox-description) .salmex-checkbox-box {
+	.sx-checkbox-label:has(.sx-checkbox-description) .sx-checkbox-box {
 		margin-top: 2px;
 	}
 
-	.salmex-checkbox-disabled .salmex-checkbox-label {
+	.sx-checkbox-disabled .sx-checkbox-label {
 		cursor: not-allowed;
 	}
 
-	/* Visually hidden, not display:none — keeps focus and semantics */
-	.salmex-checkbox-input {
+	/* Visually hidden, not display:none -- keeps focus and semantics */
+	.sx-checkbox-input {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -177,139 +177,118 @@ function handleChange(e: Event) {
 		border: 0;
 	}
 
-	/* Win2K × Basquiat — 3D box */
-	.salmex-checkbox-box {
+	.sx-checkbox-box {
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: rgb(var(--salmex-button-face));
-		border: 1px solid rgb(var(--salmex-button-dark-edge));
-		border-radius: var(--salmex-radius-sm);
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow));
-		transition: background var(--salmex-transition-fast), border-color var(--salmex-transition-fast),
-			box-shadow var(--salmex-transition-fast);
-		color: rgb(var(--salmex-chalk-white));
+		background: var(--sx-color-surface);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-sm);
+		transition: background var(--sx-transition-fast), border-color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast);
+		color: #fff;
 	}
 
-	.salmex-checkbox-sm .salmex-checkbox-box {
+	.sx-checkbox-sm .sx-checkbox-box {
 		width: 16px;
 		height: 16px;
 	}
 
-	.salmex-checkbox-md .salmex-checkbox-box {
+	.sx-checkbox-md .sx-checkbox-box {
 		width: 20px;
 		height: 20px;
 	}
 
-	.salmex-checkbox-lg .salmex-checkbox-box {
+	.sx-checkbox-lg .sx-checkbox-box {
 		width: 24px;
 		height: 24px;
 	}
 
-	.salmex-checkbox-icon {
+	.sx-checkbox-icon {
 		width: 100%;
 		height: 100%;
 		padding: 2px;
+		animation: sx-check-in var(--sx-duration-fast) var(--sx-ease-out) both;
 	}
 
-	.salmex-checkbox-icon-minus {
+	.sx-checkbox-icon-minus {
 		padding: 3px 4px;
 	}
 
-	/* Checked — electric blue fill, crown accent */
-	.salmex-checkbox-box-checked {
-		background: rgb(var(--salmex-electric-blue));
-		border-color: rgb(var(--salmex-button-dark-edge));
-		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-border-dark));
+	/* Checked -- vermilion fill, white checkmark */
+	.sx-checkbox-box-checked {
+		background: var(--sx-color-primary);
+		border-color: var(--sx-color-primary);
 	}
 
-	:global([data-theme='dark']) .salmex-checkbox-box-checked {
-		background: rgb(var(--salmex-electric-blue));
-		border-color: rgb(var(--salmex-button-dark-edge));
+	/* Indeterminate -- same as checked */
+	.sx-checkbox-box-indeterminate {
+		background: var(--sx-color-primary);
+		border-color: var(--sx-color-primary);
 	}
 
-	/* Indeterminate — same as checked, minus icon */
-	.salmex-checkbox-box-indeterminate {
-		background: rgb(var(--salmex-electric-blue));
-		border-color: rgb(var(--salmex-button-dark-edge));
+	/* Hover -- border brightens on unchecked box */
+	.sx-checkbox-label:hover .sx-checkbox-box:not(.sx-checkbox-box-checked):not(.sx-checkbox-box-indeterminate) {
+		border-color: var(--sx-color-border-hover);
 	}
 
-	.salmex-checkbox-label:hover .salmex-checkbox-box:not(.salmex-checkbox-box-checked):not(.salmex-checkbox-box-indeterminate) {
-		border-color: rgb(var(--salmex-electric-blue));
-	}
-
-	/* Focus — crown yellow ring (design system) */
-	.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
-		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-checkbox-input:focus-visible + .salmex-checkbox-box {
-		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));
+	/* Focus -- primary outline */
+	.sx-checkbox-input:focus-visible + .sx-checkbox-box {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
 	}
 
 	/* High contrast / forced colors: solid outline so focus is visible (APG) */
 	@media (forced-colors: active) {
-		.salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
+		.sx-checkbox-input:focus-visible + .sx-checkbox-box {
 			outline: 2px solid CanvasText;
 			outline-offset: 2px;
 		}
 	}
 
-	.salmex-checkbox-box-error {
-		border-color: rgb(var(--salmex-street-red));
-	}
-
-	:global([data-theme='dark']) .salmex-checkbox-box-error {
-		border-color: rgb(var(--salmex-street-red));
+	.sx-checkbox-box-error {
+		border-color: var(--sx-color-red);
 	}
 
-	.salmex-checkbox-content {
+	.sx-checkbox-content {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
 	}
 
-	.salmex-checkbox-text {
-		font-size: var(--salmex-font-size-sm);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-primary));
+	.sx-checkbox-text {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text);
 	}
 
-	.salmex-checkbox-required {
-		color: rgb(var(--salmex-street-red));
+	.sx-checkbox-required {
+		color: var(--sx-color-red);
 		margin-left: 2px;
 	}
 
-	.salmex-checkbox-description {
-		font-size: var(--salmex-font-size-xs);
-		color: rgb(var(--salmex-text-secondary));
+	.sx-checkbox-description {
+		font-size: var(--sx-text-xs);
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-checkbox-error {
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		color: var(--sx-color-red);
+		margin: 0 0 0 calc(20px + var(--sx-space-2));
 	}
 
-	.salmex-checkbox-error {
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 600;
-		color: rgb(var(--salmex-street-red));
-		margin: 0 0 0 calc(20px + var(--salmex-space-2));
+	.sx-checkbox-sm .sx-checkbox-error {
+		margin-left: calc(16px + var(--sx-space-2));
 	}
 
-	.salmex-checkbox-lg .salmex-checkbox-error {
-		margin-left: calc(24px + var(--salmex-space-2));
+	.sx-checkbox-lg .sx-checkbox-error {
+		margin-left: calc(24px + var(--sx-space-2));
 	}
 
-	.salmex-sr-only {
+	.sx-sr-only {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -322,8 +301,12 @@ function handleChange(e: Event) {
 	}
 
 	@media (prefers-reduced-motion: reduce) {
-		.salmex-checkbox-box {
+		.sx-checkbox-box {
 			transition: none;
 		}
+
+		.sx-checkbox-icon {
+			animation: none;
+		}
 	}
 </style>

package/dist/forms/Checkbox/Checkbox.svelte.d.ts

@@ -20,7 +20,7 @@ interface Props {
 /**
  * Checkbox
  *
- * Win2K × Basquiat — 3D checkbox with bold borders, crown yellow check.
+ * INFRARED — Clean checkbox with vermilion accent fill and white checkmark.
  * Uses native <input type="checkbox"> per WAI-ARIA APG (best practice: native over custom role="checkbox").
  * Label, description, error, indeterminate. Full a11y; focus and semantics follow the native input.
  */