@insymetri/styleguide 0.1.87 → 0.1.88

package/dist/IICalendar/IICalendarGrid.svelte

@@ -177,7 +177,7 @@
 		{#each monthNamesShort as name, i (i)}
 			<button
 				type="button"
-				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {i + 1 === displayedMonth ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {i + 1 === currentMonth && displayedYear === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''}"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {i + 1 === displayedMonth ? 'bg-primary text-on-primary font-semibold hover:bg-primary' : ''} {i + 1 === currentMonth && displayedYear === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''}"
 				onclick={() => selectMonth(i + 1)}
 			>
 				{name}
@@ -191,7 +191,7 @@
 		{#each decadeYears as year (year)}
 			<button
 				type="button"
-				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {year === displayedYear ? 'bg-primary text-inverse font-semibold hover:bg-primary' : ''} {year === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''} {year === decadeStart || year === decadeStart + 11 ? 'text-tertiary opacity-50' : ''}"
+				class="py-8 rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none {year === displayedYear ? 'bg-primary text-on-primary font-semibold hover:bg-primary' : ''} {year === currentYear ? 'shadow-[inset_0_0_0_1px_var(--ii-primary)]' : ''} {year === decadeStart || year === decadeStart + 11 ? 'text-tertiary opacity-50' : ''}"
 				onclick={() => selectYear(year)}
 			>
 				{year}

package/dist/IIStepper/IIStepper.svelte

@@ -49,8 +49,8 @@
 			<span
 				class={cn(
 					'flex items-center justify-center w-28 h-28 rounded-full text-tiny-emphasis transition-colors duration-fast',
-					isCompleted && 'bg-primary text-inverse',
-					isActive && 'bg-primary text-inverse',
+					isCompleted && 'bg-primary text-on-primary',
+					isActive && 'bg-primary text-on-primary',
 					!isCompleted && !isActive && 'bg-muted text-secondary'
 				)}
 			>

package/dist/MobileOnboarding/LoginFlowBareAlt.svelte

@@ -436,9 +436,9 @@
 										<div
 											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 												{hasFailed
-												? 'bg-error text-inverse'
+												? 'bg-error text-on-primary'
 												: sentComplete
-													? 'bg-primary text-inverse'
+													? 'bg-primary text-on-primary'
 													: 'bg-muted text-secondary'}
 												{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
 										>
@@ -469,11 +469,11 @@
 										<div
 											class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 												{hasFailed
-												? 'bg-error text-inverse'
+												? 'bg-error text-on-primary'
 												: deliveredComplete
-													? 'bg-primary text-inverse'
+													? 'bg-primary text-on-primary'
 													: isInFlight
-														? 'bg-primary text-inverse animate-pulse'
+														? 'bg-primary text-on-primary animate-pulse'
 														: 'bg-muted text-secondary'}"
 										>
 											{#if deliveredComplete}

package/dist/MobileOnboarding/MobileFlow.svelte

@@ -68,7 +68,7 @@
 			<button
 				class="px-8 py-4 rounded-6 text-[11px] font-medium border-0 cursor-default transition-colors duration-fast
 					{screen === currentScreen
-					? 'bg-primary text-inverse'
+					? 'bg-primary text-on-primary'
 					: i < currentIndex
 						? 'bg-success/15 text-success'
 						: 'bg-muted text-secondary hover:bg-hover-overlay'}"

package/dist/MobileOnboarding/OTPScreen.svelte

@@ -84,8 +84,8 @@
 			<div class="flex items-center gap-0">
 				<div
 					class="w-24 h-24 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 {deliveryStatus === 'sending'
-						? 'bg-primary text-inverse animate-pulse'
-						: 'bg-primary text-inverse'}"
+						? 'bg-primary text-on-primary animate-pulse'
+						: 'bg-primary text-on-primary'}"
 				>
 					{#if deliveryStatus !== 'sending'}
 						<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor">
@@ -108,9 +108,9 @@
 				<span class="text-[10px] text-secondary mr-4 ml-8">Delivered</span>
 				<div
 					class="w-24 h-24 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 {deliveryStatus === 'delivered'
-						? 'bg-primary text-inverse'
+						? 'bg-primary text-on-primary'
 						: deliveryStatus === 'sent'
-							? 'bg-primary text-inverse animate-pulse'
+							? 'bg-primary text-on-primary animate-pulse'
 							: 'bg-muted text-secondary'}"
 				>
 					{#if deliveryStatus === 'delivered'}

package/dist/MobileOnboarding/OTPScreenBare.svelte

@@ -160,9 +160,9 @@
 								<div
 									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 										{hasFailed
-										? 'bg-error text-inverse'
+										? 'bg-error text-on-primary'
 										: sentComplete
-											? 'bg-primary text-inverse'
+											? 'bg-primary text-on-primary'
 											: 'bg-muted text-secondary'}
 										{deliveryStatus === 'sending' ? ' animate-pulse' : ''}"
 								>
@@ -193,11 +193,11 @@
 								<div
 									class="w-24 h-24 rounded-full flex items-center justify-center shrink-0
 										{hasFailed
-										? 'bg-error text-inverse'
+										? 'bg-error text-on-primary'
 										: deliveredComplete
-											? 'bg-primary text-inverse'
+											? 'bg-primary text-on-primary'
 											: isInFlight
-												? 'bg-primary text-inverse animate-pulse'
+												? 'bg-primary text-on-primary animate-pulse'
 												: 'bg-muted text-secondary'}"
 								>
 									{#if deliveredComplete}

package/dist/MobileOnboarding/current/ComparisonFlow.svelte

@@ -69,7 +69,7 @@
 			<button
 				class="px-8 py-4 rounded-6 text-[11px] font-medium border-0 cursor-default transition-colors duration-fast
 					{screen === currentScreen
-					? 'bg-primary text-inverse'
+					? 'bg-primary text-on-primary'
 					: i < currentIndex
 						? 'bg-success/15 text-success'
 						: 'bg-muted text-secondary hover:bg-hover-overlay'}"

package/dist/style/colors.css

@@ -86,7 +86,9 @@
 	--color-button-primary-bg: var(--ii-primary);
 	--color-button-primary-bg-hover: var(--ii-primary-hover);
 	--color-button-primary-bg-disabled: var(--ii-border-strong);
-	--color-button-primary-text: var(--ii-text-inverse);
+	/* Text on a solid primary fill is white in every theme — the fill stays saturated
+	   in dark mode, so this must NOT ride --ii-text-inverse (which flips to dark). */
+	--color-button-primary-text: var(--ii-white);
 	--color-button-primary-text-disabled: var(--ii-text-tertiary);
 
 	/* Buttons — secondary */
@@ -107,14 +109,14 @@
 	--color-button-danger-bg: var(--ii-error);
 	--color-button-danger-bg-hover: var(--ii-error-text);
 	--color-button-danger-bg-disabled: var(--ii-border-strong);
-	--color-button-danger-text: var(--ii-text-inverse);
+	--color-button-danger-text: var(--ii-white);
 	--color-button-danger-text-disabled: var(--ii-text-tertiary);
 
 	/* Buttons — success */
 	--color-button-success-bg: var(--ii-success);
 	--color-button-success-bg-hover: var(--ii-success-text);
 	--color-button-success-bg-disabled: var(--ii-border-strong);
-	--color-button-success-text: var(--ii-text-inverse);
+	--color-button-success-text: var(--ii-white);
 	--color-button-success-text-disabled: var(--ii-text-tertiary);
 
 	/* Buttons — accent */

package/dist/style/dark.css

@@ -0,0 +1,204 @@
+/* ============================================================
+   Dark theme — brand-neutral base
+   ------------------------------------------------------------
+   Activated by `data-theme="dark"` on <html> (or any ancestor).
+   Overrides the light `:root` tokens from colors.css; every color
+   utility keys off these `--ii-*` / `--color-*` variables, so this
+   re-skins the whole library without touching component markup.
+
+   Neutral by design: the grayscale ramp is pure (R = G = B) and
+   lifted off pure black into a soft charcoal, so the UI reads calm
+   rather than harsh, and adjacent surfaces never drift warm-vs-cool.
+
+   Brand `.theme-*` classes only override the *primary* family, so
+   `data-theme="dark"` composes with any brand theme — the neutral
+   surfaces come from here, the brand accent from the theme class.
+   Primary-derived tints below use the default (Insymetri) primary;
+   a brand theme can override them for a fully bespoke dark skin.
+   ============================================================ */
+:root[data-theme='dark'] {
+	color-scheme: dark;
+
+	/* Text on a solid primary/accent fill stays white — those fills keep their
+	   saturation in dark mode, so this must not follow the flipped text ramp. */
+	--ii-text-on-primary: #ffffff;
+	--ii-text-on-accent: #ffffff;
+
+	/* Grayscale — ramp inverted (50 = darkest … 900 = lightest). Neutral (no tint):
+	   R/G/B balanced. Lifted off black; brightest steps pulled back from #fff so
+	   text contrast stays comfortable, not glaring. */
+	--ii-gray-50: #1c1c1f;
+	--ii-gray-100: #242427;
+	--ii-gray-200: #2e2e32;
+	--ii-gray-300: #3b3b40;
+	--ii-gray-400: #727276;
+	--ii-gray-500: #949498;
+	--ii-gray-600: #adadb1;
+	--ii-gray-700: #c8c8cb;
+	--ii-gray-800: #dcdcde;
+	--ii-gray-900: #ececed;
+
+	/* Surfaces — neutral charcoal. Page sits well off black; each level steps up a
+	   clear notch so cards/inputs read as elevated without a hard black backdrop. */
+	--ii-surface: #202023;
+	--ii-surface-raised: #28282c;
+	--ii-background: #1a1a1d;
+	--ii-background-alt: #1f1f22;
+
+	/* Text — neutral gray, brightest step softened so it doesn't glare on charcoal */
+	--ii-text-primary: #dcdce0;
+	--ii-text-accent: #ececee;
+	--ii-text-secondary: #9a9a9f;
+	--ii-text-tertiary: #737377;
+	--ii-text-inverse: #17171a;
+
+	/* Borders — a step lighter than surface-raised so a 1px border still reads on
+	   elevated cards. */
+	--ii-border-subtle: #2e2e32;
+	--ii-border: #3f3f44;
+	--ii-border-strong: #505056;
+
+	/* Semantic — same hues, brighter fills + translucent tint backgrounds + lighter
+	   text so everything holds contrast on dark surfaces. */
+	--ii-success: #22c55e;
+	--ii-success-bg: rgba(34, 197, 94, 0.15);
+	--ii-success-text: #4ade80;
+	--ii-warning: #f59e0b;
+	--ii-warning-bg: rgba(245, 158, 11, 0.15);
+	--ii-warning-text: #fbbf24;
+	--ii-error: #ef4444;
+	--ii-error-bg: rgba(239, 68, 68, 0.15);
+	--ii-error-text: #f87171;
+	--ii-info: #38bdf8;
+	--ii-info-bg: rgba(56, 189, 248, 0.15);
+	--ii-info-text: #7dd3fc;
+
+	/* Contact types */
+	--ii-client: #22d3ee;
+	--ii-client-light: rgba(34, 211, 238, 0.12);
+	--ii-client-border: rgba(34, 211, 238, 0.4);
+	--ii-applicant: #a78bfa;
+	--ii-applicant-light: rgba(167, 139, 250, 0.12);
+	--ii-applicant-border: rgba(167, 139, 250, 0.35);
+
+	/* Input */
+	--color-input-bg: #202023;
+	--color-input-bg-disabled: #28282c;
+	--color-input-border: #505056;
+	--color-input-border-hover: #64646a;
+	--color-input-border-active: #dcdce0;
+	--color-input-border-error: var(--ii-error-text);
+	--color-input-text: var(--ii-text-primary);
+	--color-input-text-disabled: var(--ii-text-secondary);
+	--color-input-placeholder: var(--ii-text-tertiary);
+
+	/* Dropdown */
+	--color-dropdown-bg: #28282c;
+	--color-dropdown-border: var(--ii-border);
+	--color-dropdown-item-bg-hover: #34343a;
+	--color-dropdown-item-bg-selected: #3d3d44;
+	--color-dropdown-item-text: var(--ii-text-primary);
+	--color-dropdown-item-text-selected: var(--ii-text-primary);
+
+	/* Buttons — secondary / ghost (solid variants stay white via --ii-white) */
+	--color-button-secondary-bg: #28282c;
+	--color-button-secondary-text: #c8c8cb;
+	--color-button-secondary-text-hover: #ececed;
+	--color-button-secondary-border: var(--ii-border);
+	--color-button-secondary-border-hover: var(--ii-border-strong);
+	--color-button-ghost-bg-hover: #2e2e33;
+	--color-button-ghost-text: #9a9a9f;
+	--color-button-ghost-text-hover: #ececed;
+
+	/* Badges — lift text to a lighter shade so it reads on the translucent tint */
+	--color-badge-grey-bg: rgba(148, 163, 184, 0.15);
+	--color-badge-grey-text: #cbd5e1;
+	--color-badge-grey-border: rgba(148, 163, 184, 0.3);
+	--color-badge-blue-bg: rgba(59, 142, 240, 0.15);
+	--color-badge-blue-text: #7cb2f5;
+	--color-badge-blue-border: rgba(59, 142, 240, 0.35);
+	--color-badge-red-bg: rgba(239, 68, 68, 0.15);
+	--color-badge-red-text: #fca5a5;
+	--color-badge-red-border: rgba(239, 68, 68, 0.35);
+	--color-badge-purple-bg: rgba(139, 92, 246, 0.15);
+	--color-badge-purple-text: #c4b5fd;
+	--color-badge-purple-border: rgba(139, 92, 246, 0.35);
+	--color-badge-green-bg: rgba(34, 197, 94, 0.15);
+	--color-badge-green-text: #86efac;
+	--color-badge-green-border: rgba(34, 197, 94, 0.35);
+	--color-badge-orange-bg: rgba(249, 115, 22, 0.15);
+	--color-badge-orange-text: #fdba74;
+	--color-badge-orange-border: rgba(249, 115, 22, 0.35);
+	--color-badge-cyan-bg: rgba(6, 182, 212, 0.15);
+	--color-badge-cyan-text: #67e8f9;
+	--color-badge-cyan-border: rgba(6, 182, 212, 0.35);
+	--color-badge-pink-bg: rgba(236, 72, 153, 0.15);
+	--color-badge-pink-text: #f9a8d4;
+	--color-badge-pink-border: rgba(236, 72, 153, 0.35);
+	--color-badge-teal-bg: rgba(20, 184, 166, 0.15);
+	--color-badge-teal-text: #5eead4;
+	--color-badge-teal-border: rgba(20, 184, 166, 0.35);
+	--color-badge-amber-bg: rgba(245, 158, 11, 0.15);
+	--color-badge-amber-text: #fcd34d;
+	--color-badge-amber-border: rgba(245, 158, 11, 0.35);
+	--color-badge-yellow-bg: rgba(234, 179, 8, 0.15);
+	--color-badge-yellow-text: #fde047;
+	--color-badge-yellow-border: rgba(234, 179, 8, 0.35);
+
+	/* Focus ring — stronger tint so it reads on dark surfaces */
+	--ii-focus-primary: rgba(17, 115, 212, 0.25);
+	--ii-focus-error: rgba(239, 68, 68, 0.25);
+	--ii-focus-blue: rgba(17, 115, 212, 0.2);
+
+	/* Overlay / hover — a translucent white lift reads as "hover" on dark surfaces */
+	--ii-overlay: rgba(0, 0, 0, 0.65);
+	--ii-overlay-light: rgba(0, 0, 0, 0.55);
+	--ii-overlay-heavy: rgba(0, 0, 0, 0.75);
+	--ii-hover-overlay: rgba(255, 255, 255, 0.06);
+	--ii-subtle-bg: rgba(255, 255, 255, 0.05);
+
+	/* Filter chips — light tints derived from the default primary */
+	--color-filter-bg: rgba(17, 115, 212, 0.12);
+	--color-filter-border: rgba(17, 115, 212, 0.3);
+	--color-filter-text: color-mix(in srgb, var(--ii-primary) 45%, white);
+	--color-filter-operator: color-mix(in srgb, var(--ii-primary) 60%, white);
+	--color-filter-remove-bg: rgba(17, 115, 212, 0.2);
+	--color-filter-remove-hover: rgba(17, 115, 212, 0.3);
+	--color-filter-remove-icon: color-mix(in srgb, var(--ii-primary) 45%, white);
+
+	/* Tab (TaskBar) */
+	--ii-tab-bg: #1c1c1f;
+	--ii-tab-active: #2e2e32;
+
+	/* Primary opacity variants — off the default primary #1173d4 */
+	--ii-primary-2: rgba(17, 115, 212, 0.05);
+	--ii-primary-5: rgba(17, 115, 212, 0.08);
+	--ii-primary-8: rgba(17, 115, 212, 0.12);
+	--ii-primary-15: rgba(17, 115, 212, 0.2);
+	--ii-primary-20: rgba(17, 115, 212, 0.28);
+
+	/* Shadow colors — deeper on dark so elevation still reads */
+	--ii-shadow-xs: rgba(0, 0, 0, 0.3);
+	--ii-shadow-subtle-color: rgba(0, 0, 0, 0.4);
+	--ii-shadow-card-hover-color: rgba(0, 0, 0, 0.6);
+	--ii-shadow-dropdown-color: rgba(0, 0, 0, 0.7);
+
+	/* Semantic light variants */
+	--ii-error-light: rgba(239, 68, 68, 0.1);
+	--ii-success-light: rgba(34, 197, 94, 0.1);
+	--ii-success-15: rgba(34, 197, 94, 0.18);
+	--ii-client-15: rgba(34, 211, 238, 0.18);
+	--ii-code-highlight: rgba(86, 156, 214, 0.2);
+
+	/* Misc */
+	--ii-email-bg: rgba(236, 72, 153, 0.15);
+	--ii-email-text: #f472b6;
+	--ii-manual-bg: rgba(230, 81, 0, 0.18);
+	--ii-manual-text: #fb923c;
+	--ii-login-gradient-start: #202023;
+	--ii-login-gradient-end: #151517;
+	--ii-login-card-bg: rgba(40, 40, 44, 0.9);
+	--ii-login-card-border: rgba(255, 255, 255, 0.08);
+	--ii-login-particle: rgba(17, 115, 212, 0.35);
+	--ii-login-particle-link: rgba(17, 115, 212, 0.6);
+}

package/dist/style/global.css

@@ -1,2 +1,3 @@
 @import './colors.css';
+@import './dark.css';
 @import './base.css';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.87",
+	"version": "0.1.88",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {