@salmexio/ui 0.3.1 → 1.0.0

package/dist/styles/tokens.css

@@ -1,268 +1,232 @@
 /**
- * Salmex I/O UI Design Tokens
- * Win2K reimagined by Jean-Michel Basquiat
- * Raw. Expressive. Powerful. Unfinished.
+ * Salmex I/O Design System — Neo-Brutalist Dark
  *
- * Typography: Work Sans (UI), Roboto Mono (code), Space Grotesk (display), Caveat Brush (accent).
- * Load fonts first in your app (e.g. in root layout CSS): @import url('https://fonts.googleapis.com/...') before other imports.
+ * Dark-only. Glassmorphic. Sovereign.
+ * Neo-Brutalist Dark design system tokens.
+ *
+ * Token architecture: primitives → semantic → component
+ * Prefix: --sx-
+ *
+ * Typography: TT Fors (body), TT Quaris (display), Consolas (mono).
+ * Fonts must be loaded by the consuming app.
  */
+
 :root {
 	/* ========================================
-	   BASQUIAT × WIN2K COLORS
+	   PRIMITIVE COLORS
+	   Raw palette — never use directly in components
 	   ======================================== */
 
-	/* Primary Palette - Bold & Vibrant (not safe corporate colors) */
-	--salmex-crown-yellow: 255 220 0; /* Basquiat's crown gold */
-	--salmex-street-yellow: 230 180 0; /* Lighter golden yellow for light mode */
-	--salmex-electric-blue: 0 112 255; /* Vibrant, not muted */
-	--salmex-street-red: 237 28 36; /* Graffiti red */
-	--salmex-midnight-black: 18 18 18; /* Deep black canvas */
-	--salmex-chalk-white: 248 248 240; /* Slightly off-white, like canvas */
-
-	/* Window Chrome - Rougher, Less Perfect */
-	--salmex-window-surface: 230 225 210; /* Aged paper/canvas feel */
-	--salmex-titlebar-bold: 0 90 200; /* Strong blue, less corporate */
-	--salmex-frame-dark: 40 40 40; /* Dark frame, not gray */
-
-	/* Button Face - Textured */
-	--salmex-button-face: 235 230 215; /* Canvas-like surface */
-	--salmex-button-shadow: 80 80 80; /* Stronger shadows */
-	--salmex-button-dark-edge: 30 30 30; /* Bold dark edges */
-	--salmex-button-highlight: 255 255 245; /* Bright highlights */
-	--salmex-button-light: 210 205 190; /* Subtle mid-tone */
-
-	/* Accent Colors - Neo-Expressionist */
-	--salmex-graffiti-pink: 255 105 180; /* Hot pink */
-	--salmex-spray-orange: 255 140 0; /* Bold orange */
-	--salmex-urban-green: 50 205 50; /* Bright green */
-	--salmex-neon-purple: 148 0 211; /* Deep purple */
-
-	/* System Colors - Less Safe */
-	--salmex-selection: 255 220 0; /* Crown yellow, not blue */
-	--salmex-hover-layer: 255 220 0; /* Yellow hover */
+	--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;
 
 	/* ========================================
-	   MODERN ENHANCEMENTS
+	   SEMANTIC COLORS
+	   Purpose-driven — use these in components
 	   ======================================== */
 
-	/* Primary Brand */
-	--salmex-primary: 0 112 255; /* Electric blue */
-	--salmex-primary-light: 64 150 255;
-	--salmex-primary-dark: 0 80 200;
-
-	/* Semantic Colors */
-	--salmex-success: 50 205 50;
-	--salmex-warning: 255 140 0;
-	--salmex-error: 237 28 36;
-	--salmex-info: 0 112 255;
-
-	/* Text Colors */
-	--salmex-text-primary: 18 18 18;
-	--salmex-text-secondary: 60 60 60;
-	--salmex-text-disabled: 140 140 140;
-	--salmex-text-inverse: 248 248 240;
-
-	/* Background Colors */
-	--salmex-bg-primary: 248 248 240;
-	--salmex-bg-secondary: 235 230 215;
-	--salmex-bg-tertiary: 220 215 200;
-	--salmex-bg-canvas: 255 255 250; /* Raw canvas */
-
-	/* Border Colors - Bolder */
-	--salmex-border-default: 80 80 80;
-	--salmex-border-light: 160 160 160;
-	--salmex-border-dark: 30 30 30;
-	--salmex-border-accent: 255 220 0; /* Yellow accent borders */
+	/* Backgrounds */
+	--sx-color-base: var(--sx-gray-950);
+	--sx-color-surface: var(--sx-gray-900);
+	--sx-color-surface-2: var(--sx-gray-800);
+	--sx-color-surface-3: var(--sx-gray-700);
+
+	/* Text */
+	--sx-color-text: var(--sx-gray-100);
+	--sx-color-text-secondary: var(--sx-gray-400);
+	--sx-color-text-disabled: var(--sx-gray-500);
+	--sx-color-text-inverse: var(--sx-gray-950);
+
+	/* Borders */
+	--sx-color-border: rgba(255, 255, 255, 0.06);
+	--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);
+	--sx-color-red: var(--sx-red-500);
+	--sx-color-green: var(--sx-green-500);
+	--sx-color-purple: var(--sx-purple-500);
+
+	/* Semantic states */
+	--sx-color-success: var(--sx-green-500);
+	--sx-color-warning: var(--sx-gold-500);
+	--sx-color-error: var(--sx-red-500);
+	--sx-color-info: var(--sx-cyan-500);
 
 	/* ========================================
-	   FOCUS INDICATORS - Yellow, visible in both themes
+	   GLASSMORPHISM
 	   ======================================== */
 
-	/* Light: dark inner edge + yellow ring so yellow pops on light backgrounds */
-	--salmex-focus-outline: none;
-	--salmex-focus-offset: 0;
-	--salmex-focus-style: dashed;
-	--salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px
-		rgb(var(--salmex-crown-yellow));
-	/* Thicker dashed outline fallback for outline-only usage */
-	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-width: 3px;
+	--sx-glass-bg: rgba(17, 17, 24, 0.6);
+	--sx-glass-bg-strong: rgba(17, 17, 24, 0.85);
+	--sx-glass-border: 1px solid rgba(255, 255, 255, 0.06);
+	--sx-glass-blur: blur(16px);
 
 	/* ========================================
-	   SPACING (Slightly Irregular - 8px base but expressive)
+	   SHADOWS
 	   ======================================== */
 
-	--salmex-space-1: 4px;
-	--salmex-space-2: 8px;
-	--salmex-space-3: 12px;
-	--salmex-space-4: 16px;
-	--salmex-space-5: 22px; /* Slightly off */
-	--salmex-space-6: 26px; /* Not perfect 24 */
-	--salmex-space-8: 34px; /* Intentionally irregular */
-	--salmex-space-10: 42px;
-	--salmex-space-12: 50px;
+	--sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+	--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);
 
 	/* ========================================
-	   TYPOGRAPHY - Win2K workhorse + Basquiat accents
+	   INTERACTION OVERLAYS
+	   Translucent accents for hovers, highlights, backdrops
 	   ======================================== */
 
-	/* Core UI / body – dense UI, labels, long sessions (Work Sans) */
-	--salmex-font-system: "Work Sans", "Segoe UI", system-ui, sans-serif;
-	/* Display / sci-system – logos, nav, title bars, large only (Space Grotesk) */
-	--salmex-font-display: "Space Grotesk", "Impact", system-ui, sans-serif;
-	/* Monospace – code, logs, debug panels (Roboto Mono) */
-	--salmex-font-mono: "Roboto Mono", "Consolas", "Courier New", monospace;
-	/* Accent – scribble labels, notes, decorative only (Caveat Brush) */
-	--salmex-font-handwrite: "Caveat Brush", cursive;
-
-	--salmex-font-size-xs: 11px;
-	--salmex-font-size-sm: 13px;
-	--salmex-font-size-base: 14px;
-	--salmex-font-size-md: 15px;
-	--salmex-font-size-lg: 18px;
-	--salmex-font-size-xl: 24px;
-	--salmex-font-size-display: 32px;
+	--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);
 
 	/* ========================================
-	   SHADOWS - Stronger, More Dramatic
+	   GRADIENTS
 	   ======================================== */
 
-	--salmex-shadow-sm: 2px 2px 0 rgb(var(--salmex-button-shadow));
-	--salmex-shadow-md: 3px 3px 0 rgb(0 0 0 / 0.3); /* Flat, bold shadow */
-	--salmex-shadow-lg: 5px 5px 0 rgb(0 0 0 / 0.4); /* Very bold */
-	--salmex-shadow-inset: inset 2px 2px 4px rgb(0 0 0 / 0.2);
+	--sx-gradient-brand: linear-gradient(135deg, var(--sx-color-cyan), var(--sx-color-gold));
+	--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%);
 
 	/* ========================================
-	   BORDER RADIUS - Minimal but Slightly Imperfect
+	   TYPOGRAPHY
 	   ======================================== */
 
-	--salmex-radius-none: 0;
-	--salmex-radius-sm: 1px;
-	--salmex-radius-md: 2px;
-	--salmex-radius-lg: 3px;
-	--salmex-radius-rough: 0; /* Sharp edges, Basquiat style */
+	--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-text-xs: 0.75rem;
+	--sx-text-sm: 0.875rem;
+	--sx-text-base: 1rem;
+	--sx-text-md: 1.125rem;
+	--sx-text-lg: 1.25rem;
+	--sx-text-xl: 1.5rem;
+	--sx-text-2xl: 2rem;
+	--sx-text-display: 3rem;
+
+	--sx-leading-tight: 1.2;
+	--sx-leading-normal: 1.5;
+	--sx-leading-relaxed: 1.65;
+
+	--sx-tracking-tight: -0.02em;
+	--sx-tracking-normal: 0;
+	--sx-tracking-wide: 0.02em;
+	--sx-tracking-wider: 0.05em;
 
 	/* ========================================
-	   TRANSITIONS - Snappier, More Energetic
+	   SPACING
 	   ======================================== */
 
-	--salmex-transition-fast: 80ms ease-out;
-	--salmex-transition-base: 120ms ease-out;
-	--salmex-transition-slow: 180ms ease-out;
+	--sx-space-0: 0;
+	--sx-space-px: 1px;
+	--sx-space-0-5: 0.125rem;
+	--sx-space-1: 0.25rem;
+	--sx-space-1-5: 0.375rem;
+	--sx-space-2: 0.5rem;
+	--sx-space-2-5: 0.625rem;
+	--sx-space-3: 0.75rem;
+	--sx-space-4: 1rem;
+	--sx-space-5: 1.25rem;
+	--sx-space-6: 1.5rem;
+	--sx-space-8: 2rem;
+	--sx-space-10: 2.5rem;
+	--sx-space-12: 3rem;
+	--sx-space-16: 4rem;
+	--sx-space-20: 5rem;
+	--sx-space-24: 6rem;
 
 	/* ========================================
-	   Z-INDEX LAYERS
+	   BORDER RADIUS
 	   ======================================== */
 
-	--salmex-z-dropdown: 1000;
-	--salmex-z-sticky: 1020;
-	--salmex-z-fixed: 1030;
-	--salmex-z-modal-backdrop: 1040;
-	--salmex-z-modal: 1050;
-	--salmex-z-popover: 1060;
-	--salmex-z-tooltip: 1070;
+	--sx-radius-none: 0;
+	--sx-radius-sm: 6px;
+	--sx-radius-md: 10px;
+	--sx-radius-lg: 16px;
+	--sx-radius-xl: 24px;
+	--sx-radius-full: 9999px;
 
 	/* ========================================
-	   BASQUIAT SIGNATURE ELEMENTS
+	   TRANSITIONS
 	   ======================================== */
 
-	--salmex-crown-symbol: "👑"; /* Basquiat's crown */
-	--salmex-annotation-style: "handwrite";
-	--salmex-texture-noise: 0.02; /* Slight texture/grain */
-}
+	--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);
 
-/* ========================================
-   DARK MODE (Street Art Night Mode)
-   ======================================== */
+	/* ========================================
+	   Z-INDEX LAYERS
+	   ======================================== */
 
-[data-theme="dark"] {
-	/* Neon on black - high contrast street art */
-	--salmex-midnight-black: 10 10 10;
-	--salmex-chalk-white: 255 255 255;
-
-	/* Window chrome - darker canvas */
-	--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: 50 50 50;
-	--salmex-button-dark-edge: 8 8 8;
-	--salmex-button-highlight: 90 90 90;
-	--salmex-button-light: 50 50 50;
-
-	/* Text - high contrast */
-	--salmex-text-primary: 255 255 255;
-	--salmex-text-secondary: 200 200 200;
-	--salmex-text-disabled: 100 100 100;
-
-	/* Backgrounds - darker canvas */
-	--salmex-bg-primary: 15 15 15;
-	--salmex-bg-secondary: 22 22 22;
-	--salmex-bg-tertiary: 32 32 32;
-	--salmex-bg-canvas: 18 18 18;
-
-	/* Borders - more visible */
-	--salmex-border-default: 80 80 80;
-	--salmex-border-light: 60 60 60;
-	--salmex-border-dark: 120 120 120;
-
-	/* Neon colors pop more in dark mode */
-	--salmex-crown-yellow: 255 240 0; /* Brighter yellow */
-	--salmex-electric-blue: 64 150 255; /* Lighter blue */
-	--salmex-street-red: 255 50 50; /* Brighter red */
-	--salmex-graffiti-pink: 255 120 200;
-	--salmex-spray-orange: 255 160 40;
-	--salmex-urban-green: 80 230 80;
-	--salmex-neon-purple: 180 40 255;
-
-	/* Primary colors adjusted */
-	--salmex-primary: 64 150 255;
-	--salmex-primary-light: 100 180 255;
-	--salmex-primary-dark: 40 120 220;
-
-	/* Selection/hover - neon yellow */
-	--salmex-selection: 255 240 0;
-	--salmex-hover-layer: 255 240 0;
-
-	/* Focus - bright yellow ring (no dark edge needed on dark bg) */
-	--salmex-focus-outline: 2px dashed rgb(var(--salmex-crown-yellow));
-	--salmex-focus-ring: 0 0 0 3px rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
-	--salmex-focus-outline-width: 3px;
-}
+	--sx-z-base: 1;
+	--sx-z-dropdown: 1000;
+	--sx-z-sticky: 1020;
+	--sx-z-fixed: 1030;
+	--sx-z-modal-backdrop: 1040;
+	--sx-z-modal: 1050;
+	--sx-z-popover: 1060;
+	--sx-z-tooltip: 1070;
+	--sx-z-grain: 2000;
 
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) {
-		/* Same as [data-theme='dark'] */
-		--salmex-midnight-black: 10 10 10;
-		--salmex-chalk-white: 255 255 255;
-		--salmex-window-surface: 22 22 22;
-		--salmex-titlebar-bold: 0 140 255;
-		--salmex-button-face: 32 32 32;
-		--salmex-button-shadow: 50 50 50;
-		--salmex-button-dark-edge: 8 8 8;
-		--salmex-button-highlight: 90 90 90;
-		--salmex-button-light: 50 50 50;
-		--salmex-text-primary: 255 255 255;
-		--salmex-text-secondary: 200 200 200;
-		--salmex-text-disabled: 100 100 100;
-		--salmex-bg-primary: 15 15 15;
-		--salmex-bg-secondary: 22 22 22;
-		--salmex-bg-tertiary: 32 32 32;
-		--salmex-bg-canvas: 18 18 18;
-		--salmex-border-default: 80 80 80;
-		--salmex-border-light: 60 60 60;
-		--salmex-border-dark: 120 120 120;
-		--salmex-crown-yellow: 255 240 0;
-		--salmex-electric-blue: 64 150 255;
-		--salmex-street-red: 255 50 50;
-		--salmex-primary: 64 150 255;
-		--salmex-primary-light: 100 180 255;
-		--salmex-selection: 255 240 0;
-	}
+	/* ========================================
+	   ICON SIZES
+	   Standardised sizes for Lucide (or any) icons
+	   ======================================== */
+
+	--sx-icon-xs: 14px;
+	--sx-icon-sm: 16px;
+	--sx-icon-md: 18px;
+	--sx-icon-lg: 20px;
+	--sx-icon-xl: 24px;
+	--sx-icon-stroke: 1.75;
 }
 
 /* ========================================
-   GLOBAL RESETS & BASQUIAT TEXTURE
+   GLOBAL RESETS
    ======================================== */
 
 *,
@@ -271,56 +235,37 @@
 	box-sizing: border-box;
 }
 
-/* Add subtle canvas texture to body */
-body {
-	position: relative;
-}
-
-body::before {
-	content: "";
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	opacity: 0.03;
-	background-image: repeating-linear-gradient(
-		0deg,
-		transparent,
-		transparent 2px,
-		rgb(0 0 0 / 0.02) 2px,
-		rgb(0 0 0 / 0.02) 4px
-	);
-	z-index: -1;
-}
+/* ========================================
+   FOCUS STATES — Cyan outline, visible on dark
+   ======================================== */
 
-/* Remove default focus styles - we'll add our own */
 :focus {
 	outline: none;
 }
 
-/* Basquiat-style focus - single yellow ring; transition only (no keyframes = no double shadow) */
 :focus-visible {
-	outline: none;
-	box-shadow: var(--salmex-focus-ring);
-	transition: box-shadow var(--salmex-transition-fast);
+	outline: 2px solid var(--sx-color-cyan);
+	outline-offset: 2px;
 }
 
-/* Light theme: dark edge + yellow in one clean ring */
-:root:not([data-theme="dark"]) :focus-visible {
-	box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
-}
+/* ========================================
+   LUCIDE ICON DEFAULTS
+   Refined stroke weight for dark UI; Safari vector-effect fix
+   ======================================== */
 
-/* Dark theme: yellow only */
-[data-theme="dark"] :focus-visible {
-	box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
+.lucide {
+	width: var(--sx-icon-md);
+	height: var(--sx-icon-md);
+	stroke-width: var(--sx-icon-stroke);
 }
 
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) :focus-visible {
-		box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
-	}
+/* ========================================
+   SELECTION
+   ======================================== */
+
+::selection {
+	background: rgba(0, 212, 255, 0.25);
+	color: var(--sx-color-text);
 }
 
 /* ========================================
@@ -336,8 +281,4 @@ body::before {
 		transition-duration: 0.01ms !important;
 		scroll-behavior: auto !important;
 	}
-
-	:focus-visible {
-		transition: none;
-	}
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@salmexio/ui",
-	"version": "0.3.1",
-	"description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
+	"version": "1.0.0",
+	"description": "Salmex I/O Design System — Neo-Brutalist Dark component library for Salmex products",
 	"type": "module",
 	"license": "UNLICENSED",
 	"publishConfig": {
@@ -74,10 +74,10 @@
 		"sveltekit",
 		"ui",
 		"components",
-		"win2k",
+		"neo-brutalist",
+		"dark-mode",
 		"accessibility",
-		"typescript",
-		"ai-assistant"
+		"typescript"
 	],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts"