@truenas/ui-components 0.8.4 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenas/ui-components",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -10,7 +10,7 @@
     "url": "https://github.com/iXsystems/truenas-ui-components.git"
   },
   "bin": {
-    "truenas-icons": "scripts/icon-sprite/cli.js"
+    "truenas-icons": "scripts/icon-sprite/cli.cjs"
   },
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",

package/scripts/icon-sprite/{cli-wrapper.js → cli-wrapper.cjs}

@@ -3,6 +3,11 @@
 /**
  * CLI wrapper that uses tsx to run the TypeScript CLI
  * This allows us to distribute TypeScript files without needing to compile them
+ *
+ * No `bin` entry and nothing else in the repo points here — `cli.cjs` is what `truenas-icons`
+ * runs. This file still ships, because `ng-package.json` copies the whole `scripts` directory
+ * as an asset, so it carries the #362 hazard too and is `.cjs` for the same reason; see
+ * `cli.cjs` for the full account.
  */
 
 const { spawn } = require('child_process');

package/scripts/icon-sprite/cli.cjs

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+
+/**
+ * CLI wrapper that uses tsx to run the TypeScript CLI
+ * This allows us to distribute TypeScript files without needing to compile them
+ *
+ * `.cjs`, not `.js`, and the extension is the fix for #362 rather than a style choice.
+ * This file ships to consumers as an ng-package asset, and node decides whether to read a
+ * `.js` file as CommonJS or as ESM from the `type` field of the nearest `package.json` — which
+ * for the published package is written by ng-packagr, not by this repo. 0.8.2 was the first
+ * release where ng-packagr emitted `"type": "module"`, and the same bytes that had worked in
+ * 0.7.12 became ESM and died on the `require` below with `ReferenceError: require is not
+ * defined in ES module scope`, before generating anything. A `.cjs` file is CommonJS whatever
+ * any manifest says, so the generated field cannot reach it.
+ *
+ * Renaming this back to `.js` reopens #362. `scripts/package-contract/bin-module-scope.spec.ts`
+ * fails if anything does.
+ */
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+// Get the directory where this script is located
+const scriptDir = __dirname;
+const cliPath = path.join(scriptDir, 'cli-main.ts');
+
+// Use npx to run tsx, which will find it in node_modules
+const child = spawn('npx', ['tsx', cliPath, ...process.argv.slice(2)], {
+  stdio: 'inherit',
+  cwd: process.cwd(),
+  shell: process.platform === 'win32'
+});
+
+child.on('exit', (code) => {
+  process.exit(code || 0);
+});
+
+child.on('error', (err) => {
+  console.error('Failed to start tsx:', err.message);
+  console.error('Make sure tsx is installed as a dependency of truenas-ui.');
+  process.exit(1);
+});

package/src/styles/themes.css

@@ -127,24 +127,41 @@
      3:1 non-text one. Every theme declares its own: the value is a
      hue-preserving lightness shift of THAT theme's own hue token (--tn-blue,
      --tn-orange, --tn-red, --tn-green), the smallest step that clears 4.5:1 on
-     all three surfaces a status colour is painted on — --tn-alt-bg1 (the
-     banner), --tn-bg1 (the page, the file-picker popup) and --tn-bg2 (the card,
-     the toast) — and on the 10% wash of itself that tn-file-picker's inline
-     error paints behind it. Ratios below are on --tn-alt-bg1 / --tn-bg1 /
-     --tn-bg2.
+     all five surfaces a status colour is painted on — --tn-alt-bg2 (a hovered
+     or selected row, and what a control projected into one draws on),
+     --tn-alt-bg1 (the banner, and the same rows in their other states),
+     --tn-bg3 (an elevated surface), --tn-bg1 (the page, the file-picker popup)
+     and --tn-bg2 (the card, the toast) — and on the 10% wash of itself that
+     tn-file-picker's inline error paints behind it. Ratios below are on
+     --tn-alt-bg2 / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2.
+
+     --tn-alt-bg2 IS THE BINDING SURFACE in every dark palette and is why these
+     four are paler here than a reading of the page alone would choose (#361).
+     The row used to stop at --tn-alt-bg1, and on --tn-alt-bg2 every one of the
+     four then measured under 3.4:1 — so a tn-checkbox with a validation error,
+     projected into a hovered tn-menu-item or tn-list-option, had no rebind
+     target that kept the red. Moving the fill instead was not available: for
+     the old values to clear --tn-alt-bg2 it would have had to come down until
+     the --tn-alt-bg1 -> --tn-alt-bg2 step measured 1.02:1 here, and 1.02-1.08:1
+     across the six dark palettes, against the 1.17-1.55:1 they use today — and
+     that step is what tells a SELECTED row from a hovered one in tn-list-item,
+     tn-tree-node and tn-button-toggle. The hue tokens are untouched, and the
+     three light palettes needed no change at all.
 
      --tn-error is NOT --tn-error-text. That one is --tn-red's companion and
      guarantees 4.5:1 on --tn-bg1 and --tn-bg2 only; it measures 3.64:1 on
-     --tn-alt-bg1 here, where tn-banner draws an error heading.
+     --tn-alt-bg1 here, where tn-banner draws an error heading, and 2.35:1 on
+     --tn-alt-bg2, which is why a component filling that surface rebinds it to
+     --tn-error rather than reading it through.
 
      A reader spells the whole chain — var(--tn-error, var(--tn-red, #bd2626)) —
      as radio.component.scss does for --tn-error-text, so a consumer stylesheet
      that predates these four keeps its own palette; semantic-status-contrast
      .spec.ts pins that shape and the literals. */
-  --tn-info: #00adf8; /* 4.65:1 / 6.62:1 / 5.85:1; --tn-blue is 2.56:1 on --tn-alt-bg1 */
-  --tn-warning: var(--tn-orange); /* 4.60:1 / 6.53:1 / 5.78:1 — needs no shade of its own */
-  --tn-error: #e78888; /* 4.62:1 / 6.57:1 / 5.81:1; --tn-red is 2.22:1 on --tn-alt-bg1 */
-  --tn-success: var(--tn-green); /* 5.16:1 / 7.33:1 / 6.49:1 — needs no shade of its own */
+  --tn-info: #6fd4ff; /* 4.52:1 / 7.00:1 / 7.54:1 / 9.95:1 / 8.80:1; --tn-blue is 1.65:1 on --tn-alt-bg2 */
+  --tn-warning: #f1bf8e; /* 4.54:1 / 7.03:1 / 7.57:1 / 9.99:1 / 8.83:1; --tn-orange is 2.97:1 on --tn-alt-bg2 */
+  --tn-error: #f1bbbb; /* 4.53:1 / 7.02:1 / 7.56:1 / 9.98:1 / 8.82:1; --tn-red is 1.43:1 on --tn-alt-bg2 */
+  --tn-success: #a3d686; /* 4.51:1 / 6.99:1 / 7.53:1 / 9.94:1 / 8.79:1; --tn-green is 3.33:1 on --tn-alt-bg2 */
   --tn-font-family-header: "Titillium Web", sans-serif;
   --tn-font-family-body: "IBM Plex Sans", "Roboto", "Helvetica Neue", sans-serif;
   --tn-font-family-monospace: "Droid Sans Mono", "Courier New", Courier, monospace;
@@ -219,12 +236,12 @@
   --tn-teal: #008080;
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
-  /* Semantic status colours — see the note in :root. On --tn-alt-bg1 /
-     --tn-bg1 / --tn-bg2. */
-  --tn-info: #00adf8; /* 4.65:1 / 6.62:1 / 5.85:1 */
-  --tn-warning: var(--tn-orange); /* 4.60:1 / 6.53:1 / 5.78:1 */
-  --tn-error: #e78888; /* 4.62:1 / 6.57:1 / 5.81:1 */
-  --tn-success: var(--tn-green); /* 5.16:1 / 7.33:1 / 6.49:1 */
+  /* Semantic status colours — see the note in :root. On --tn-alt-bg2 /
+     --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #6fd4ff; /* 4.52:1 / 7.00:1 / 7.54:1 / 9.95:1 / 8.80:1 */
+  --tn-warning: #f1bf8e; /* 4.54:1 / 7.03:1 / 7.57:1 / 9.99:1 / 8.83:1 */
+  --tn-error: #f1bbbb; /* 4.53:1 / 7.02:1 / 7.56:1 / 9.98:1 / 8.82:1 */
+  --tn-success: #a3d686; /* 4.51:1 / 6.99:1 / 7.53:1 / 9.94:1 / 8.79:1 */
 }
 
 /* ================================
@@ -281,12 +298,13 @@
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
   /* Semantic status colours — see the note in :root. Darkened rather than
-     lightened, this being a light theme. On --tn-alt-bg1 / --tn-bg1 /
-     --tn-bg2. */
-  --tn-info: #006997; /* 5.31:1 / 5.41:1 / 6.06:1 */
-  --tn-warning: #955313; /* 5.23:1 / 5.32:1 / 5.96:1 */
-  --tn-error: #bd2626; /* 5.31:1 / 5.41:1 / 6.05:1 */
-  --tn-success: #416f26; /* 5.23:1 / 5.32:1 / 5.95:1 */
+     lightened, this being a light theme; all four already cleared --tn-alt-bg2
+     and --tn-bg3 when those joined the row in #361, so none of them moved. On
+     --tn-alt-bg2 / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #006997; /* 4.94:1 / 5.31:1 / 4.94:1 / 5.41:1 / 6.06:1 */
+  --tn-warning: #955313; /* 4.86:1 / 5.23:1 / 4.86:1 / 5.32:1 / 5.96:1 */
+  --tn-error: #bd2626; /* 4.94:1 / 5.31:1 / 4.94:1 / 5.41:1 / 6.05:1 */
+  --tn-success: #416f26; /* 4.86:1 / 5.23:1 / 4.86:1 / 5.32:1 / 5.95:1 */
 }
 
 /* ================================
@@ -337,12 +355,14 @@
   --tn-teal: #008080;
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
-  /* Semantic status colours — see the note in :root. On --tn-alt-bg1 /
-     --tn-bg1 / --tn-bg2. */
-  --tn-info: #9fa9c8; /* 4.62:1 / 7.40:1 / 6.09:1 */
-  --tn-warning: var(--tn-orange); /* 6.33:1 / 10.15:1 / 8.36:1 */
-  --tn-error: #ff8888; /* 4.69:1 / 7.52:1 / 6.19:1 */
-  --tn-success: var(--tn-green); /* 7.86:1 / 12.60:1 / 10.38:1 */
+  /* Semantic status colours — see the note in :root. Dracula's own orange and
+     green are bright enough that they still need no shade of their own with
+     --tn-alt-bg2 in the row (#361); only info and error moved. On --tn-alt-bg2
+     / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #adb6d0; /* 4.52:1 / 5.33:1 / 5.83:1 / 8.55:1 / 7.04:1 */
+  --tn-warning: var(--tn-orange); /* 5.37:1 / 6.33:1 / 6.92:1 / 10.15:1 / 8.36:1 */
+  --tn-error: #ff9b9b; /* 4.54:1 / 5.35:1 / 5.85:1 / 8.57:1 / 7.06:1 */
+  --tn-success: var(--tn-green); /* 6.67:1 / 7.86:1 / 8.59:1 / 12.60:1 / 10.38:1 */
 }
 
 /* ================================
@@ -408,11 +428,11 @@
   --tn-salmon: #fa8072;
   /* Semantic status colours — see the note in :root. This palette's surfaces
      sit close together, so every one of these is a long shift. On
-     --tn-alt-bg1 / --tn-bg1 / --tn-bg2. */
-  --tn-info: #b4c4d8; /* 4.86:1 / 7.03:1 / 5.67:1 */
-  --tn-warning: #e4b9ab; /* 4.86:1 / 7.03:1 / 5.67:1 */
-  --tn-error: #e2b8bc; /* 4.85:1 / 7.03:1 / 5.66:1 */
-  --tn-success: #b4caa1; /* 4.89:1 / 7.08:1 / 5.70:1 */
+     --tn-alt-bg2 / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #beccdd; /* 4.52:1 / 5.29:1 / 5.20:1 / 7.65:1 / 6.17:1 */
+  --tn-warning: #e8c3b7; /* 4.54:1 / 5.31:1 / 5.22:1 / 7.68:1 / 6.19:1 */
+  --tn-error: #e6c2c5; /* 4.53:1 / 5.29:1 / 5.20:1 / 7.66:1 / 6.17:1 */
+  --tn-success: #bdd1ad; /* 4.53:1 / 5.29:1 / 5.20:1 / 7.66:1 / 6.17:1 */
 }
 
 /* ================================
@@ -463,12 +483,13 @@
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
   /* Semantic status colours — see the note in :root. Darkened rather than
-     lightened, this being a light theme. On --tn-alt-bg1 / --tn-bg1 /
-     --tn-bg2. */
-  --tn-info: var(--tn-blue); /* 6.83:1 / 6.95:1 / 7.46:1 — needs no shade of its own */
-  --tn-warning: #8e5801; /* 5.20:1 / 5.29:1 / 5.67:1 */
-  --tn-error: #c4000f; /* 5.49:1 / 5.59:1 / 6.00:1 */
-  --tn-success: #187232; /* 5.28:1 / 5.37:1 / 5.76:1 */
+     lightened, this being a light theme; all four already cleared --tn-alt-bg2
+     and --tn-bg3 when those joined the row in #361, so none of them moved. On
+     --tn-alt-bg2 / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: var(--tn-blue); /* 6.35:1 / 6.83:1 / 6.35:1 / 6.95:1 / 7.46:1 — needs no shade of its own */
+  --tn-warning: #8e5801; /* 4.83:1 / 5.20:1 / 4.83:1 / 5.29:1 / 5.67:1 */
+  --tn-error: #c4000f; /* 5.11:1 / 5.49:1 / 5.11:1 / 5.59:1 / 6.00:1 */
+  --tn-success: #187232; /* 4.91:1 / 5.28:1 / 4.91:1 / 5.37:1 / 5.76:1 */
 }
 
 /* ================================
@@ -594,12 +615,12 @@
   --tn-teal: #008080;
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
-  /* Semantic status colours — see the note in :root. On --tn-alt-bg1 /
-     --tn-bg1 / --tn-bg2. */
-  --tn-info: #73b6e6; /* 4.62:1 / 6.84:1 / 5.92:1 */
-  --tn-warning: #f09b78; /* 4.67:1 / 6.91:1 / 5.98:1 */
-  --tn-error: #ee9998; /* 4.66:1 / 6.90:1 / 5.97:1 */
-  --tn-success: #a2ba00; /* 4.62:1 / 6.83:1 / 5.92:1 */
+  /* Semantic status colours — see the note in :root. On --tn-alt-bg2 /
+     --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #9bcbed; /* 4.51:1 / 5.87:1 / 6.53:1 / 8.69:1 / 7.53:1 */
+  --tn-warning: #f4b89f; /* 4.53:1 / 5.89:1 / 6.55:1 / 8.72:1 / 7.55:1 */
+  --tn-error: #f3b6b5; /* 4.52:1 / 5.88:1 / 6.54:1 / 8.70:1 / 7.53:1 */
+  --tn-success: #b7d200; /* 4.54:1 / 5.91:1 / 6.57:1 / 8.74:1 / 7.57:1 */
 }
 
 
@@ -673,12 +694,13 @@
   --tn-teal: #008080;
   --tn-slategray: #708090;
   --tn-salmon: #fa8072;
-  /* Semantic status colours — see the note in :root. On --tn-alt-bg1 /
-     --tn-bg1 / --tn-bg2. */
-  --tn-info: #79c1f2; /* 4.64:1 / 7.41:1 / 5.68:1 */
-  --tn-warning: #fda61c; /* 4.61:1 / 7.36:1 / 5.64:1 */
-  --tn-error: #ff9ea5; /* 4.63:1 / 7.38:1 / 5.66:1 */
-  --tn-success: #2ed45f; /* 4.63:1 / 7.39:1 / 5.67:1 */
+  /* Semantic status colours — see the note in :root. --tn-bg3 and --tn-alt-bg1
+     are the same colour here, so their two ratios are too. On --tn-alt-bg2 /
+     --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #9bd1f5; /* 4.53:1 / 5.56:1 / 5.56:1 / 8.87:1 / 6.80:1 */
+  --tn-warning: #febf5b; /* 4.53:1 / 5.55:1 / 5.55:1 / 8.86:1 / 6.79:1 */
+  --tn-error: #ffb8bd; /* 4.54:1 / 5.56:1 / 5.56:1 / 8.87:1 / 6.81:1 */
+  --tn-success: #6be18e; /* 4.52:1 / 5.54:1 / 5.54:1 / 8.83:1 / 6.78:1 */
 }
 
 /* ================================
@@ -737,12 +759,15 @@
   --tn-salmon: #fa8072;
   /* Semantic status colours — see the note in :root. Darkened rather than
      lightened, this being a light theme, and further than the other two: the
-     accessibility theme is the one where a status colour has to hold up. On
-     --tn-alt-bg1 / --tn-bg1 / --tn-bg2. */
-  --tn-info: #315c78; /* 6.28:1 / 5.27:1 / 7.16:1 */
-  --tn-warning: #7c4d01; /* 6.31:1 / 5.30:1 / 7.19:1 */
-  --tn-error: #ad000d; /* 6.62:1 / 5.56:1 / 7.55:1 */
-  --tn-success: #296300; /* 6.40:1 / 5.37:1 / 7.29:1 */
+     accessibility theme is the one where a status colour has to hold up. All
+     four already cleared --tn-alt-bg2 and --tn-bg3 when those joined the row in
+     #361, so none of them moved — though --tn-bg3 is this palette's tightest
+     surface rather than --tn-alt-bg2, its fill being the darkest of the five.
+     On --tn-alt-bg2 / --tn-alt-bg1 / --tn-bg3 / --tn-bg1 / --tn-bg2. */
+  --tn-info: #315c78; /* 5.84:1 / 6.28:1 / 4.64:1 / 5.27:1 / 7.16:1 */
+  --tn-warning: #7c4d01; /* 5.87:1 / 6.31:1 / 4.66:1 / 5.30:1 / 7.19:1 */
+  --tn-error: #ad000d; /* 6.16:1 / 6.62:1 / 4.89:1 / 5.56:1 / 7.55:1 */
+  --tn-success: #296300; /* 5.95:1 / 6.40:1 / 4.73:1 / 5.37:1 / 7.29:1 */
 }
 
 /* ================================

package/scripts/icon-sprite/cli.js

@@ -1,30 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * CLI wrapper that uses tsx to run the TypeScript CLI
- * This allows us to distribute TypeScript files without needing to compile them
- */
-
-const { spawn } = require('child_process');
-const path = require('path');
-
-// Get the directory where this script is located
-const scriptDir = __dirname;
-const cliPath = path.join(scriptDir, 'cli-main.ts');
-
-// Use npx to run tsx, which will find it in node_modules
-const child = spawn('npx', ['tsx', cliPath, ...process.argv.slice(2)], {
-  stdio: 'inherit',
-  cwd: process.cwd(),
-  shell: process.platform === 'win32'
-});
-
-child.on('exit', (code) => {
-  process.exit(code || 0);
-});
-
-child.on('error', (err) => {
-  console.error('Failed to start tsx:', err.message);
-  console.error('Make sure tsx is installed as a dependency of truenas-ui.');
-  process.exit(1);
-});