@insymetri/styleguide 0.1.87 → 0.1.89

package/dist/icons.js

@@ -109,4 +109,30 @@ export const icons = {
     moon: `<path fill="currentColor" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/>`,
     coffee: `<path fill="currentColor" d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"/>`,
     paperclip: `<path fill="currentColor" d="M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z"/>`,
+    // ===== Phosphor BOLD weight =====
+    // Heavier duplicates of the Regular entries above, used by the collapsed left
+    // rail (src/lib/components/Sidebar) so its tiles read at the artifact's weight.
+    // Path data is Phosphor Bold 2.1.1 (MIT), copied verbatim from
+    // node_modules/@iconify/json/json/ph.json — the same source the Regular set above
+    // came from. Regenerate, never hand-edit. Adding a `-bold` key here is additive:
+    // it widens IconName and leaves every existing entry untouched.
+    'house-bold': `<path fill="currentColor" d="m222.14 105.85l-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76l76 76Z"/>`,
+    'users-bold': `<path fill="currentColor" d="M125.18 156.94a64 64 0 1 0-82.36 0a100.23 100.23 0 0 0-39.49 32a12 12 0 0 0 19.35 14.2a76 76 0 0 1 122.64 0a12 12 0 0 0 19.36-14.2a100.33 100.33 0 0 0-39.5-32M44 108a40 40 0 1 1 40 40a40 40 0 0 1-40-40m206.1 97.67a12 12 0 0 1-16.78-2.57A76.31 76.31 0 0 0 172 172a12 12 0 0 1 0-24a40 40 0 1 0-10.3-78.67a12 12 0 1 1-6.16-23.19a64 64 0 0 1 57.64 110.8a100.23 100.23 0 0 1 39.49 32a12 12 0 0 1-2.57 16.73"/>`,
+    'users-four-bold': `<path fill="currentColor" d="M24.79 121.59a12 12 0 0 0 16.81-2.38a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a72 72 0 0 0-25.3-21.22a40 40 0 1 0-64.58 0A71 71 0 0 0 128 94.31a71 71 0 0 0-15.71-10.74a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 2.38 16.8M176 44a16 16 0 1 1-16 16a16 16 0 0 1 16-16m-96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16m128.29 151.57a40 40 0 1 0-64.58 0A71.3 71.3 0 0 0 128 206.3a71.3 71.3 0 0 0-15.71-10.73a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 19.19 14.42a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a71.9 71.9 0 0 0-25.3-21.23M80 156a16 16 0 1 1-16 16a16 16 0 0 1 16-16m96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16"/>`,
+    'phone-bold': `<path fill="currentColor" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/>`,
+    'check-circle-bold': `<path fill="currentColor" d="M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84"/>`,
+    'address-book-bold': `<path fill="currentColor" d="M208 20H64a20 20 0 0 0-20 20v20H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v20a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V40a20 20 0 0 0-20-20m-4 192H68V44h136Zm-103.2-40.63a48 48 0 0 1 70.4 0a12 12 0 0 0 17.6-16.32a72 72 0 0 0-19.21-14.68a44 44 0 1 0-67.19 0a72.1 72.1 0 0 0-19.2 14.68a12 12 0 0 0 17.6 16.32M116 112a20 20 0 1 1 20 20a20 20 0 0 1-20-20"/>`,
+    'file-text-bold': `<path fill="currentColor" d="m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm112-80a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12"/>`,
+    'currency-dollar-bold': `<path fill="currentColor" d="M152 116h-12V60h4a28 28 0 0 1 28 28a12 12 0 0 0 24 0a52.06 52.06 0 0 0-52-52h-4V24a12 12 0 0 0-24 0v12h-4a52 52 0 0 0 0 104h4v56h-12a28 28 0 0 1-28-28a12 12 0 0 0-24 0a52.06 52.06 0 0 0 52 52h12v12a12 12 0 0 0 24 0v-12h12a52 52 0 0 0 0-104m-40 0a28 28 0 0 1 0-56h4v56Zm40 80h-12v-56h12a28 28 0 0 1 0 56"/>`,
+    'clipboard-text-bold': `<path fill="currentColor" d="M172 164a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12-52H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-64v168a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h34.53a51.88 51.88 0 0 1 74.94 0H200a20 20 0 0 1 20 20M100.29 60h55.42a28 28 0 0 0-55.42 0M196 52h-17.41A52 52 0 0 1 180 64v8a12 12 0 0 1-12 12H88a12 12 0 0 1-12-12v-8a52 52 0 0 1 1.41-12H60v160h136Z"/>`,
+    'article-bold': `<path fill="currentColor" d="M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM68 92a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12"/>`,
+    'list-bullets-bold': `<path fill="currentColor" d="M76 64a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H88a12 12 0 0 1-12-12m140 52H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24m0 64H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24M44 112a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0-64a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0 128a16 16 0 1 0 16 16a16 16 0 0 0-16-16"/>`,
+    'chart-line-up-bold': `<path fill="currentColor" d="M236 208a12 12 0 0 1-12 12H32a12 12 0 0 1-12-12V48a12 12 0 0 1 24 0v99l43.51-43.52a12 12 0 0 1 17 0L128 127l43-43h-11a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12v40a12 12 0 0 1-24 0v-11l-51.51 51.52a12 12 0 0 1-17 0L96 129l-52 52v15h180a12 12 0 0 1 12 12"/>`,
+    'plus-bold': `<path fill="currentColor" d="M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12"/>`,
+    'caret-double-right-bold': `<path fill="currentColor" d="m144.49 136.49l-80 80a12 12 0 0 1-17-17L119 128L47.51 56.49a12 12 0 0 1 17-17l80 80a12 12 0 0 1-.02 17m80-17l-80-80a12 12 0 1 0-17 17L199 128l-71.52 71.51a12 12 0 0 0 17 17l80-80a12 12 0 0 0 .01-17Z"/>`,
+    'caret-down-bold': `<path fill="currentColor" d="m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z"/>`,
+    'gear-bold': `<path fill="currentColor" d="M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m92-27.21v-1.58l14-17.51a12 12 0 0 0 2.23-10.59A111.8 111.8 0 0 0 225 71.89a12 12 0 0 0-9.11-5.89l-22.28-2.5l-1.11-1.11L190 40.1a12 12 0 0 0-5.89-9.1a111.7 111.7 0 0 0-27.23-11.27A12 12 0 0 0 146.3 22l-17.51 14h-1.58L109.7 22a12 12 0 0 0-10.59-2.23a111.8 111.8 0 0 0-27.22 11.28A12 12 0 0 0 66 40.11l-2.5 22.28l-1.11 1.11L40.1 66a12 12 0 0 0-9.1 5.89a111.7 111.7 0 0 0-11.23 27.23A12 12 0 0 0 22 109.7l14 17.51v1.58L22 146.3a12 12 0 0 0-2.23 10.59a111.8 111.8 0 0 0 11.29 27.22a12 12 0 0 0 9.05 5.89l22.28 2.48l1.11 1.11L66 215.9a12 12 0 0 0 5.89 9.1a111.7 111.7 0 0 0 27.23 11.27A12 12 0 0 0 109.7 234l17.51-14h1.58l17.51 14a12 12 0 0 0 10.59 2.23A111.8 111.8 0 0 0 184.11 225a12 12 0 0 0 5.91-9.06l2.48-22.28l1.11-1.11L215.9 190a12 12 0 0 0 9.06-5.91a111.7 111.7 0 0 0 11.27-27.23A12 12 0 0 0 234 146.3Zm-24.12-4.89a70 70 0 0 1 0 8.2a12 12 0 0 0 2.61 8.22l12.84 16.05a86.5 86.5 0 0 1-4.33 10.49l-20.43 2.27a12 12 0 0 0-7.65 4a69 69 0 0 1-5.8 5.8a12 12 0 0 0-4 7.65L166.86 207a86.5 86.5 0 0 1-10.49 4.35l-16.05-12.85a12 12 0 0 0-7.5-2.62h-.72a70 70 0 0 1-8.2 0a12.06 12.06 0 0 0-8.22 2.6l-16.05 12.85A86.5 86.5 0 0 1 89.14 207l-2.27-20.43a12 12 0 0 0-4-7.65a69 69 0 0 1-5.8-5.8a12 12 0 0 0-7.65-4L49 166.86a86.5 86.5 0 0 1-4.35-10.49l12.84-16.05a12 12 0 0 0 2.61-8.22a70 70 0 0 1 0-8.2a12 12 0 0 0-2.61-8.22L44.67 99.63A86.5 86.5 0 0 1 49 89.14l20.43-2.27a12 12 0 0 0 7.65-4a69 69 0 0 1 5.8-5.8a12 12 0 0 0 4-7.65L89.14 49a86.5 86.5 0 0 1 10.49-4.35l16.05 12.85a12.06 12.06 0 0 0 8.22 2.6a70 70 0 0 1 8.2 0a12 12 0 0 0 8.22-2.6l16.05-12.85A86.5 86.5 0 0 1 166.86 49l2.27 20.43a12 12 0 0 0 4 7.65a69 69 0 0 1 5.8 5.8a12 12 0 0 0 7.65 4L207 89.14a86.5 86.5 0 0 1 4.35 10.49l-12.84 16.05a12 12 0 0 0-2.63 8.22"/>`,
+    'sign-out-bold': `<path fill="currentColor" d="M124 216a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12V40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H60v152h52a12 12 0 0 1 12 12m108.49-96.49l-40-40a12 12 0 0 0-17 17L195 116h-83a12 12 0 0 0 0 24h83l-19.52 19.51a12 12 0 0 0 17 17l40-40a12 12 0 0 0 .01-17"/>`,
+    'user-bold': `<path fill="currentColor" d="M234.38 210a123.36 123.36 0 0 0-60.78-53.23a76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52a52.06 52.06 0 0 1-52-52"/>`,
+    'calendar-blank-bold': `<path fill="currentColor" d="M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Z"/>`,
 };

package/dist/style/base.css

@@ -30,6 +30,14 @@
 }
 
 :root {
+	/* Referenced by IIInput and app.css. Previously undefined, so those
+	   `font-family: var(--font-family)` declarations were invalid and fell back
+	   to inheritance by accident. Defined now so they resolve on purpose. */
+	--font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	/* No mono FACE is shipped — this is the system stack, which is what `font-mono`
+	   resolved to before. Named as a variable so an app that self-hosts one can swap it. */
+	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+
 	--sidebar-width: 22.4rem; /* 224px */
 	--topbar-height: 4.8rem; /* 48px */
 	--transition-fast: 0.15s ease;
@@ -42,18 +50,33 @@
 	}
 
 	body {
-		font-family:
-			'Inter Variable',
-			Inter,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			sans-serif;
-		font-size: 1.4rem; /* 14px default */
+		/* Through the variable, never the literal. The @font-face blocks above point at
+		   `/fonts/inter-*.woff2`, which this package does NOT ship — every consuming app
+		   self-hosts them. An app that has not added those files sets `--font-family` to
+		   whatever it does have, and because nothing then references Inter the @font-face
+		   never fetches: no 404s, no `font-display: block` gap with invisible text.
+		   Hardcoding the family here would make that opt-out impossible. */
+		font-family: var(--font-family);
+		/* 13px/1.5 with a hair of negative tracking — the artifacts' body setting.
+		   Antialiasing matters here: at 13px the face reads heavy without it. */
+		font-size: 1.3rem;
+		line-height: 1.5;
+		letter-spacing: -0.005em;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
 		margin: 0;
 		padding: 0;
 	}
 
+	/* Controls inherit the body's tracking too, or buttons drift wider than labels. */
+	button,
+	input,
+	select,
+	textarea {
+		font: inherit;
+		letter-spacing: inherit;
+	}
+
 	* {
 		scrollbar-width: thin;
 		scrollbar-color: var(--ii-gray-300) transparent;

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 */
@@ -228,4 +230,25 @@
 	--ii-login-card-border: rgba(255, 255, 255, 0.8);
 	--ii-login-particle: rgba(17, 115, 212, 0.3);
 	--ii-login-particle-link: rgba(17, 115, 212, 0.6);
+
+	/* ── Soft tier ────────────────────────────────────────────────────────
+	   Added with the `bg-*-soft` / `bg-app` utilities. DERIVED, not picked:
+	   they mix from the tokens above, so an app that overrides the palette
+	   gets a matching soft tier for free instead of an orphaned literal.
+	   A tenant that wants them hand-tuned can still set them outright. */
+	--ii-app-bg: var(--ii-background);
+	--ii-primary-soft: color-mix(in srgb, var(--ii-primary) 14%, white);
+	--ii-success-soft: color-mix(in srgb, var(--ii-success) 22%, white);
+	--ii-warning-soft: color-mix(in srgb, var(--ii-warning) 22%, white);
+	--ii-error-soft: color-mix(in srgb, var(--ii-error) 22%, white);
+
+	/* ── Elevation tiers ──────────────────────────────────────────────────
+	   `shadows.ts` resolves every shadow utility through these three, instead
+	   of carrying a one-off value per component. Inked with neutral black so
+	   the package stands alone; an app with its own palette can re-ink them to
+	   its text colour, which is what makes a shadow sit in the same family as
+	   the surface it falls on. */
+	--ii-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
+	--ii-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 44px -16px rgba(0, 0, 0, 0.24);
+	--ii-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.06), 0 32px 80px -24px rgba(0, 0, 0, 0.35);
 }

package/dist/style/dark.css

@@ -0,0 +1,221 @@
+/* ============================================================
+   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);
+
+	/* ── Soft tier ────────────────────────────────────────────────────────
+	   Added with the `bg-*-soft` / `bg-app` utilities. DERIVED, not picked:
+	   they mix from the tokens above, so an app that overrides the palette
+	   gets a matching soft tier for free instead of an orphaned literal.
+	   A tenant that wants them hand-tuned can still set them outright. */
+	--ii-app-bg: var(--ii-background);
+	--ii-primary-soft: color-mix(in srgb, var(--ii-primary) 14%, black);
+	--ii-success-soft: color-mix(in srgb, var(--ii-success) 22%, black);
+	--ii-warning-soft: color-mix(in srgb, var(--ii-warning) 22%, black);
+	--ii-error-soft: color-mix(in srgb, var(--ii-error) 22%, black);
+
+	/* ── Elevation tiers ── see colors.css. Deeper on a dark ground, where a
+	   light-theme shadow is invisible. */
+	--ii-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
+	--ii-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 44px -16px rgba(0, 0, 0, 0.8);
+	--ii-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.6), 0 32px 80px -24px rgba(0, 0, 0, 0.9);
+}

package/dist/style/global.css

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

package/dist/style/tailwind/colors.d.ts

@@ -1,6 +1,7 @@
 export declare const backgroundColor: {
     primary: string;
     'primary-hover': string;
+    'primary-soft': string;
     accent: string;
     'accent-hover': string;
     secondary: string;
@@ -13,6 +14,10 @@ export declare const backgroundColor: {
     'surface-raised': string;
     background: string;
     'background-alt': string;
+    app: string;
+    'success-soft': string;
+    'warning-soft': string;
+    'error-soft': string;
     'background-l0': string;
     'background-l1': string;
     'background-l2': string;

package/dist/style/tailwind/colors.js

@@ -23,6 +23,10 @@ export const backgroundColor = {
     // Brand
     primary: 'var(--ii-primary)',
     'primary-hover': 'var(--ii-primary-hover)',
+    // The palette's "Primary (Soft)" — the opaque brand tint (#E0E7FF light).
+    // `primary-8`/`primary-15` below are the translucent equivalents; use this one
+    // where the tint must be opaque (it is what `info-bg` / `filter-bg` resolve to).
+    'primary-soft': 'var(--ii-primary-soft)',
     accent: 'var(--ii-accent)',
     'accent-hover': 'var(--ii-accent-hover)',
     secondary: 'var(--ii-secondary)',
@@ -36,6 +40,12 @@ export const backgroundColor = {
     'surface-raised': 'var(--ii-surface-raised)',
     background: 'var(--ii-background)',
     'background-alt': 'var(--ii-background-alt)',
+    app: 'var(--ii-app-bg)', // page substrate: rail, top bar, gutter around the content card
+    // Lighter, still-saturated semantic fills — for large filled areas where the full
+    // strength dominates and the `-bg` tint reads as disabled.
+    'success-soft': 'var(--ii-success-soft)',
+    'warning-soft': 'var(--ii-warning-soft)',
+    'error-soft': 'var(--ii-error-soft)',
     'background-l0': 'var(--ii-background-l0)',
     'background-l1': 'var(--ii-background-l1)',
     'background-l2': 'var(--ii-background-l2)',