@salmexio/ui 1.0.0 → 1.2.0

package/dist/styles/tokens.css

@@ -1,13 +1,13 @@
 /**
- * Salmex I/O Design System — Neo-Brutalist Dark
+ * Salmex I/O Design System — INFRARED
  *
  * Dark-only. Glassmorphic. Sovereign.
- * Neo-Brutalist Dark design system tokens.
+ * Thermal optics. Forge heat. Earned authority.
  *
  * Token architecture: primitives → semantic → component
  * Prefix: --sx-
  *
- * Typography: TT Fors (body), TT Quaris (display), Consolas (mono).
+ * Typography: TT Fors (body), TT Quaris (display), JetBrains Mono (mono).
  * Fonts must be loaded by the consuming app.
  */
 
@@ -17,34 +17,42 @@
 	   Raw palette — never use directly in components
 	   ======================================== */
 
-	--sx-gray-950: #0A0A0F;
-	--sx-gray-900: #111118;
-	--sx-gray-800: #1A1A24;
-	--sx-gray-700: #252530;
-	--sx-gray-600: #333340;
-	--sx-gray-500: #55556A;
-	--sx-gray-400: #8888A0;
-	--sx-gray-300: #AAAABB;
-	--sx-gray-200: #CCCCDD;
-	--sx-gray-100: #E8E8F0;
-	--sx-white: #F0F0F8;
-
-	/* Accents */
-	--sx-cyan-500: #00D4FF;
-	--sx-cyan-400: #33DDFF;
-	--sx-cyan-600: #00A8CC;
-	--sx-gold-500: #FFB800;
-	--sx-gold-400: #FFC933;
-	--sx-gold-600: #CC9300;
-	--sx-red-500: #FF3B3B;
-	--sx-red-400: #FF6B6B;
-	--sx-red-600: #CC2E2E;
-	--sx-green-500: #00FF88;
-	--sx-green-400: #33FFA0;
-	--sx-green-600: #00CC6E;
-	--sx-purple-500: #8B5CF6;
-	--sx-purple-400: #A78BFA;
-	--sx-purple-600: #7C3AED;
+	--sx-gray-950: #08080C;
+	--sx-gray-900: #0F0F14;
+	--sx-gray-800: #171720;
+	--sx-gray-700: #1F1F2A;
+	--sx-gray-600: #2D2D3A;
+	--sx-gray-500: #505060;
+	--sx-gray-400: #7A7A88;
+	--sx-gray-300: #A0A0AB;
+	--sx-gray-200: #C5C5CC;
+	--sx-gray-100: #E8E6E1;
+	--sx-white: #F0EEE8;
+
+	/* Accents — Vermilion (forge heat) */
+	--sx-vermilion-500: #FF6B35;
+	--sx-vermilion-400: #FF8C5A;
+	--sx-vermilion-600: #E05520;
+
+	/* Accents — Brass (earned authority) */
+	--sx-brass-500: #C8A84E;
+	--sx-brass-400: #D4B86A;
+	--sx-brass-600: #A68B3A;
+
+	/* Accents — Danger */
+	--sx-red-500: #DC2626;
+	--sx-red-400: #EF4444;
+	--sx-red-600: #B91C1C;
+
+	/* Accents — Phosphor (operational green) */
+	--sx-green-500: #4ADE80;
+	--sx-green-400: #6EE7A0;
+	--sx-green-600: #22C55E;
+
+	/* Accents — Teal (encrypted channel) */
+	--sx-teal-500: #3D8B8B;
+	--sx-teal-400: #5AABAB;
+	--sx-teal-600: #2D6B6B;
 
 	/* ========================================
 	   SEMANTIC COLORS
@@ -68,25 +76,30 @@
 	--sx-color-border-strong: rgba(255, 255, 255, 0.12);
 	--sx-color-border-hover: rgba(255, 255, 255, 0.18);
 
-	/* Accents */
-	--sx-color-cyan: var(--sx-cyan-500);
-	--sx-color-gold: var(--sx-gold-500);
+	/* Accents — semantic aliases */
+	--sx-color-primary: var(--sx-vermilion-500);
+	--sx-color-secondary: var(--sx-brass-500);
 	--sx-color-red: var(--sx-red-500);
 	--sx-color-green: var(--sx-green-500);
-	--sx-color-purple: var(--sx-purple-500);
+	--sx-color-teal: var(--sx-teal-500);
+
+	/* Backward compat aliases — components referencing old names */
+	--sx-color-cyan: var(--sx-vermilion-500);
+	--sx-color-gold: var(--sx-brass-500);
+	--sx-color-purple: var(--sx-teal-500);
 
 	/* Semantic states */
 	--sx-color-success: var(--sx-green-500);
-	--sx-color-warning: var(--sx-gold-500);
+	--sx-color-warning: var(--sx-brass-500);
 	--sx-color-error: var(--sx-red-500);
-	--sx-color-info: var(--sx-cyan-500);
+	--sx-color-info: var(--sx-teal-500);
 
 	/* ========================================
 	   GLASSMORPHISM
 	   ======================================== */
 
-	--sx-glass-bg: rgba(17, 17, 24, 0.6);
-	--sx-glass-bg-strong: rgba(17, 17, 24, 0.85);
+	--sx-glass-bg: rgba(15, 15, 20, 0.6);
+	--sx-glass-bg-strong: rgba(15, 15, 20, 0.85);
 	--sx-glass-border: 1px solid rgba(255, 255, 255, 0.06);
 	--sx-glass-blur: blur(16px);
 
@@ -98,37 +111,54 @@
 	--sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
 	--sx-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
 	--sx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
-	--sx-shadow-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.15);
-	--sx-shadow-glow-cyan-strong: 0 0 30px rgba(0, 212, 255, 0.25);
-	--sx-shadow-glow-gold: 0 0 20px rgba(255, 184, 0, 0.15);
-	--sx-shadow-glow-red: 0 0 20px rgba(255, 59, 59, 0.15);
-	--sx-shadow-glow-green: 0 0 20px rgba(0, 255, 136, 0.15);
+	--sx-shadow-glow-primary: 0 0 20px rgba(255, 107, 53, 0.18);
+	--sx-shadow-glow-primary-strong: 0 0 30px rgba(255, 107, 53, 0.30);
+	--sx-shadow-glow-brass: 0 0 20px rgba(200, 168, 78, 0.15);
+	--sx-shadow-glow-red: 0 0 20px rgba(220, 38, 38, 0.15);
+	--sx-shadow-glow-green: 0 0 20px rgba(74, 222, 128, 0.15);
+	--sx-shadow-glow-teal: 0 0 20px rgba(61, 139, 139, 0.15);
+
+	/* Backward compat aliases */
+	--sx-shadow-glow-cyan: var(--sx-shadow-glow-primary);
+	--sx-shadow-glow-cyan-strong: var(--sx-shadow-glow-primary-strong);
+	--sx-shadow-glow-gold: var(--sx-shadow-glow-brass);
 
 	/* ========================================
 	   INTERACTION OVERLAYS
 	   Translucent accents for hovers, highlights, backdrops
 	   ======================================== */
 
-	--sx-color-cyan-subtle: rgba(0, 212, 255, 0.06);
-	--sx-color-cyan-hover: rgba(0, 212, 255, 0.1);
-	--sx-color-cyan-active: rgba(0, 212, 255, 0.15);
-	--sx-color-cyan-ring: rgba(0, 212, 255, 0.1);
-	--sx-color-red-subtle: rgba(255, 59, 59, 0.06);
-	--sx-color-red-hover: rgba(255, 59, 59, 0.1);
-	--sx-color-red-ring: rgba(255, 59, 59, 0.1);
-	--sx-color-green-subtle: rgba(0, 255, 136, 0.06);
-	--sx-color-gold-subtle: rgba(255, 184, 0, 0.06);
-	--sx-color-purple-subtle: rgba(139, 92, 246, 0.12);
-	--sx-color-backdrop: rgba(10, 10, 15, 0.7);
+	--sx-color-primary-subtle: rgba(255, 107, 53, 0.06);
+	--sx-color-primary-hover: rgba(255, 107, 53, 0.1);
+	--sx-color-primary-active: rgba(255, 107, 53, 0.15);
+	--sx-color-primary-ring: rgba(255, 107, 53, 0.1);
+	--sx-color-red-subtle: rgba(220, 38, 38, 0.06);
+	--sx-color-red-hover: rgba(220, 38, 38, 0.1);
+	--sx-color-red-ring: rgba(220, 38, 38, 0.1);
+	--sx-color-green-subtle: rgba(74, 222, 128, 0.06);
+	--sx-color-brass-subtle: rgba(200, 168, 78, 0.06);
+	--sx-color-teal-subtle: rgba(61, 139, 139, 0.12);
+	--sx-color-backdrop: rgba(8, 8, 12, 0.7);
+
+	/* Backward compat aliases */
+	--sx-color-cyan-subtle: var(--sx-color-primary-subtle);
+	--sx-color-cyan-hover: var(--sx-color-primary-hover);
+	--sx-color-cyan-active: var(--sx-color-primary-active);
+	--sx-color-cyan-ring: var(--sx-color-primary-ring);
+	--sx-color-gold-subtle: var(--sx-color-brass-subtle);
+	--sx-color-purple-subtle: var(--sx-color-teal-subtle);
 
 	/* ========================================
 	   GRADIENTS
 	   ======================================== */
 
-	--sx-gradient-brand: linear-gradient(135deg, var(--sx-color-cyan), var(--sx-color-gold));
+	--sx-gradient-brand: linear-gradient(135deg, var(--sx-color-primary), var(--sx-color-secondary));
 	--sx-gradient-surface: linear-gradient(180deg, var(--sx-color-surface), var(--sx-color-base));
-	--sx-gradient-cyan: linear-gradient(135deg, var(--sx-color-cyan), var(--sx-cyan-600));
-	--sx-gradient-overlay: linear-gradient(180deg, rgba(10, 10, 15, 0) 0%, rgba(10, 10, 15, 0.8) 100%);
+	--sx-gradient-primary: linear-gradient(135deg, var(--sx-color-primary), var(--sx-vermilion-600));
+	--sx-gradient-overlay: linear-gradient(180deg, rgba(8, 8, 12, 0) 0%, rgba(8, 8, 12, 0.8) 100%);
+
+	/* Backward compat */
+	--sx-gradient-cyan: var(--sx-gradient-primary);
 
 	/* ========================================
 	   TYPOGRAPHY
@@ -136,7 +166,7 @@
 
 	--sx-font-body: 'TT Fors', system-ui, -apple-system, sans-serif;
 	--sx-font-display: 'TT Quaris', Georgia, 'Times New Roman', serif;
-	--sx-font-mono: 'Consolas', 'Courier New', monospace;
+	--sx-font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
 
 	--sx-text-xs: 0.75rem;
 	--sx-text-sm: 0.875rem;
@@ -190,13 +220,31 @@
 	--sx-radius-full: 9999px;
 
 	/* ========================================
-	   TRANSITIONS
+	   MOTION — Durations
+	   ======================================== */
+
+	--sx-duration-instant: 100ms;
+	--sx-duration-fast: 150ms;
+	--sx-duration-base: 250ms;
+	--sx-duration-slow: 400ms;
+	--sx-duration-slower: 600ms;
+
+	/* ========================================
+	   MOTION — Easing curves
+	   ======================================== */
+
+	--sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+	--sx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+	--sx-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
+	--sx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+	/* ========================================
+	   MOTION — Transition shorthands
 	   ======================================== */
 
 	--sx-transition-fast: 150ms ease;
 	--sx-transition-base: 250ms ease;
 	--sx-transition-slow: 400ms ease;
-	--sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 
 	/* ========================================
 	   Z-INDEX LAYERS
@@ -236,7 +284,7 @@
 }
 
 /* ========================================
-   FOCUS STATES — Cyan outline, visible on dark
+   FOCUS STATES — Vermilion outline, visible on dark
    ======================================== */
 
 :focus {
@@ -244,8 +292,9 @@
 }
 
 :focus-visible {
-	outline: 2px solid var(--sx-color-cyan);
+	outline: 2px solid var(--sx-color-primary);
 	outline-offset: 2px;
+	border-radius: inherit;
 }
 
 /* ========================================
@@ -259,15 +308,104 @@
 	stroke-width: var(--sx-icon-stroke);
 }
 
+/* ========================================
+   AMBIENT BACKGROUND — Thermal signature
+   Barely-visible heat dissipation drifts slowly,
+   giving the base surface infrared life.
+   ======================================== */
+
+body {
+	background-color: var(--sx-color-base);
+	background-image:
+		radial-gradient(ellipse at 15% 50%, rgba(255, 107, 53, 0.02) 0%, transparent 50%),
+		radial-gradient(ellipse at 85% 20%, rgba(200, 168, 78, 0.015) 0%, transparent 50%),
+		radial-gradient(ellipse at 50% 85%, rgba(61, 139, 139, 0.015) 0%, transparent 50%);
+	background-size: 200% 200%;
+	animation: sx-ambient-drift 25s ease-in-out infinite;
+}
+
 /* ========================================
    SELECTION
    ======================================== */
 
 ::selection {
-	background: rgba(0, 212, 255, 0.25);
+	background: rgba(255, 107, 53, 0.25);
 	color: var(--sx-color-text);
 }
 
+/* ========================================
+   @property — GPU-accelerated gradient angles
+   Required for conic-gradient rotation animations.
+   Falls back gracefully: browsers without @property
+   see a static gradient (no rotation), which is fine.
+   ======================================== */
+
+@property --sx-border-angle {
+	syntax: "<angle>";
+	initial-value: 0deg;
+	inherits: false;
+}
+
+/* ========================================
+   GLOBAL KEYFRAMES
+   Shared animations used by multiple components.
+   Component-specific keyframes live in the component.
+   ======================================== */
+
+@keyframes sx-border-flow {
+	to {
+		--sx-border-angle: 360deg;
+	}
+}
+
+@keyframes sx-ambient-drift {
+	0%   { background-position: 0% 50%; }
+	50%  { background-position: 100% 50%; }
+	100% { background-position: 0% 50%; }
+}
+
+@keyframes sx-focus-breathe {
+	0%, 100% { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12); }
+	50%      { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.28); }
+}
+
+@keyframes sx-error-shake {
+	0%, 100% { transform: translateX(0); }
+	15%      { transform: translateX(-4px); }
+	30%      { transform: translateX(4px); }
+	45%      { transform: translateX(-3px); }
+	60%      { transform: translateX(2px); }
+	75%      { transform: translateX(-1px); }
+}
+
+@keyframes sx-check-in {
+	from {
+		transform: scale(0.5);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes sx-badge-pop {
+	0%   { transform: scale(1); }
+	40%  { transform: scale(1.15); }
+	100% { transform: scale(1); }
+}
+
+@keyframes sx-alert-in {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
 /* ========================================
    REDUCED MOTION
    ======================================== */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@salmexio/ui",
-	"version": "1.0.0",
-	"description": "Salmex I/O Design System — Neo-Brutalist Dark component library for Salmex products",
+	"version": "1.2.0",
+	"description": "Salmex I/O Design System — INFRARED component library for Salmex products",
 	"type": "module",
 	"license": "UNLICENSED",
 	"publishConfig": {
@@ -74,7 +74,7 @@
 		"sveltekit",
 		"ui",
 		"components",
-		"neo-brutalist",
+		"infrared",
 		"dark-mode",
 		"accessibility",
 		"typescript"