@evinvest/uikit 0.18.0 → 0.19.0

package/dist/palette-cli.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+import {
+  PaletteError,
+  brandFromToml,
+  readContract,
+  renderPalette
+} from "./chunk-3IPB4QQJ.js";
+
+// src/palette/cli.ts
+import { readFileSync, writeFileSync } from "fs";
+import { basename } from "path";
+import { parseArgs } from "util";
+var USAGE = `usage: evinvest-palette --brand <slug> [--out <file.css>] <brand.toml>
+
+Writes the brand's palette as a flat sheet scoped to [data-brand="<slug>"],
+after checking both polarities against the contract in @evinvest/uikit's
+styles/theme.css. Prints to stdout without --out.`;
+function main() {
+  const { values, positionals } = parseArgs({
+    options: { brand: { type: "string" }, out: { type: "string" }, help: { type: "boolean", short: "h" } },
+    allowPositionals: true
+  });
+  const [input] = positionals;
+  if (values.help || !values.brand || !input || positionals.length > 1) {
+    console.error(USAGE);
+    return values.help ? 0 : 2;
+  }
+  const contract = readContract(readFileSync(new URL("../styles/theme.css", import.meta.url), "utf8"));
+  const sheet = renderPalette(values.brand, brandFromToml(readFileSync(input, "utf8")), contract, basename(input));
+  if (values.out) writeFileSync(values.out, sheet);
+  else process.stdout.write(sheet);
+  return 0;
+}
+try {
+  process.exitCode = main();
+} catch (error) {
+  if (error instanceof PaletteError) console.error(error.message);
+  else throw error;
+  process.exitCode = 1;
+}
+//# sourceMappingURL=palette-cli.js.map

package/dist/palette-cli.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/palette/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { readFileSync, writeFileSync } from \"node:fs\";\nimport { basename } from \"node:path\";\nimport { parseArgs } from \"node:util\";\n\nimport { brandFromToml, PaletteError, renderPalette } from \"./brand\";\nimport { readContract } from \"./contract\";\n\nconst USAGE = `usage: evinvest-palette --brand <slug> [--out <file.css>] <brand.toml>\n\nWrites the brand's palette as a flat sheet scoped to [data-brand=\"<slug>\"],\nafter checking both polarities against the contract in @evinvest/uikit's\nstyles/theme.css. Prints to stdout without --out.`;\n\nfunction main(): number {\n  const { values, positionals } = parseArgs({\n    options: { brand: { type: \"string\" }, out: { type: \"string\" }, help: { type: \"boolean\", short: \"h\" } },\n    allowPositionals: true,\n  });\n  const [input] = positionals;\n  if (values.help || !values.brand || !input || positionals.length > 1) {\n    console.error(USAGE);\n    return values.help ? 0 : 2;\n  }\n\n  // Shipped beside `dist/`, so the contract is always the installed kit's own.\n  const contract = readContract(readFileSync(new URL(\"../styles/theme.css\", import.meta.url), \"utf8\"));\n  const sheet = renderPalette(values.brand, brandFromToml(readFileSync(input, \"utf8\")), contract, basename(input));\n  if (values.out) writeFileSync(values.out, sheet);\n  else process.stdout.write(sheet);\n  return 0;\n}\n\ntry {\n  process.exitCode = main();\n} catch (error) {\n  // A bad brand file is the user's input, not a crash: the message, no stack.\n  if (error instanceof PaletteError) console.error(error.message);\n  else throw error;\n  process.exitCode = 1;\n}\n"],"mappings":";;;;;;;;;AACA,SAAS,cAAc,qBAAqB;AAC5C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAK1B,IAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAMd,SAAS,OAAe;AACtB,QAAM,EAAE,QAAQ,YAAY,IAAI,UAAU;AAAA,IACxC,SAAS,EAAE,OAAO,EAAE,MAAM,SAAS,GAAG,KAAK,EAAE,MAAM,SAAS,GAAG,MAAM,EAAE,MAAM,WAAW,OAAO,IAAI,EAAE;AAAA,IACrG,kBAAkB;AAAA,EACpB,CAAC;AACD,QAAM,CAAC,KAAK,IAAI;AAChB,MAAI,OAAO,QAAQ,CAAC,OAAO,SAAS,CAAC,SAAS,YAAY,SAAS,GAAG;AACpE,YAAQ,MAAM,KAAK;AACnB,WAAO,OAAO,OAAO,IAAI;AAAA,EAC3B;AAGA,QAAM,WAAW,aAAa,aAAa,IAAI,IAAI,uBAAuB,YAAY,GAAG,GAAG,MAAM,CAAC;AACnG,QAAM,QAAQ,cAAc,OAAO,OAAO,cAAc,aAAa,OAAO,MAAM,CAAC,GAAG,UAAU,SAAS,KAAK,CAAC;AAC/G,MAAI,OAAO,IAAK,eAAc,OAAO,KAAK,KAAK;AAAA,MAC1C,SAAQ,OAAO,MAAM,KAAK;AAC/B,SAAO;AACT;AAEA,IAAI;AACF,UAAQ,WAAW,KAAK;AAC1B,SAAS,OAAO;AAEd,MAAI,iBAAiB,aAAc,SAAQ,MAAM,MAAM,OAAO;AAAA,MACzD,OAAM;AACX,UAAQ,WAAW;AACrB;","names":[]}

package/dist/palette.d.ts

@@ -0,0 +1,80 @@
+/**
+ * The colour contract, read out of the kit's own token sheet rather than
+ * restated here: `@theme inline` maps every name the class tables can paint
+ * (`--color-X: var(--X)`), and the derived rule lists the ones the contract
+ * computes from the rest. A palette owes the difference.
+ */
+interface Contract {
+    /** Names every palette scope must declare. */
+    required: readonly string[];
+    /** Names the contract derives from the palette; a palette may override them. */
+    derived: readonly string[];
+    /** The tokens each derived default reads, so a palette's references can be checked for cycles through them. */
+    derivedFrom: Readonly<Record<string, readonly string[]>>;
+}
+/** The rule the derived tokens live on — see `theme.css`, the contract half of `tokens.css`. */
+declare const DERIVED_SCOPE = ":where(:root, .dark, .light, [data-brand])";
+interface CssRule {
+    selector: string;
+    /** Custom properties declared directly in the rule, in source order. */
+    declarations: Map<string, string>;
+}
+/**
+ * Top-level and `@media`-nested rules of a flat sheet, comments stripped. Only
+ * as much CSS as a token sheet is made of: no strings containing braces.
+ */
+declare function readRules(css: string): CssRule[];
+declare function readContract(css: string): Contract;
+
+type PolarityName = "light" | "dark";
+declare const POLARITIES: readonly PolarityName[];
+/** A brand's palette: one value per contract name, for each polarity. */
+interface BrandConfig {
+    colors: Record<PolarityName, Record<string, string>>;
+    /** `--brand-mark`: the URL `<Logo>` masks. */
+    mark?: string;
+    /** `--brand-aspect`: the mark's width / height, e.g. `"387 / 335"`. */
+    markAspect?: string;
+    /** `--brand-font-<role>`: a family name per role; unset roles keep the kit's. */
+    fonts?: Partial<Record<FontRole, string>>;
+}
+type FontRole = "sans" | "display" | "mono";
+declare const FONT_ROLES: readonly FontRole[];
+/** Every problem with a brand file at once, so one run fixes them all. */
+declare class PaletteError extends Error {
+    readonly problems: readonly string[];
+    constructor(problems: readonly string[]);
+}
+/**
+ * Reads the aquafix `brand.toml` shape: `[colors.light]` and `[colors.dark]`
+ * keyed by contract name, optional top-level `mark` / `mark-aspect`, and the
+ * family names in `[fonts]` (`sans` or `text`, `display`, `mono`). The rest of
+ * `[fonts]` and every other table (`[print]`, …) belong to other tools and are
+ * ignored — loading the font files is the site's job, not the palette's.
+ */
+declare function brandFromToml(text: string): BrandConfig;
+/** The problems with `config` against `contract`; empty when it is complete. */
+declare function validateBrand(config: BrandConfig, contract: Contract): string[];
+/**
+ * A flat sheet scoping `config` under `[data-brand="<brand>"]`: light is the
+ * brand's default and `.light` / `.dark` beneath it pick a polarity. Selectors
+ * outrank the zero-specificity EV palette, so import order does not matter.
+ * Throws a {@link PaletteError} when a scope is incomplete — Tailwind answers an
+ * undefined token with no rule at all, so a hole would be silent on the page.
+ */
+declare function renderPalette(brand: string, config: BrandConfig, contract: Contract, source?: string): string;
+
+/**
+ * The subset of TOML a brand file is written in: `[table.headers]`, bare keys,
+ * and single-line values that are a basic string, a number, a boolean, or a
+ * flat array of those. Anything else is an error naming the line, rather than a
+ * silent misread — the kit stays dependency-free, and a brand file has no use
+ * for the rest of the language.
+ */
+type TomlValue = string | number | boolean | TomlValue[];
+interface TomlTable {
+    [key: string]: TomlValue | TomlTable;
+}
+declare function parseToml(text: string): TomlTable;
+
+export { type BrandConfig, type Contract, type CssRule, DERIVED_SCOPE, FONT_ROLES, type FontRole, POLARITIES, PaletteError, type PolarityName, type TomlTable, type TomlValue, brandFromToml, parseToml, readContract, readRules, renderPalette, validateBrand };

package/dist/palette.js

@@ -0,0 +1,25 @@
+import {
+  DERIVED_SCOPE,
+  FONT_ROLES,
+  POLARITIES,
+  PaletteError,
+  brandFromToml,
+  parseToml,
+  readContract,
+  readRules,
+  renderPalette,
+  validateBrand
+} from "./chunk-3IPB4QQJ.js";
+export {
+  DERIVED_SCOPE,
+  FONT_ROLES,
+  POLARITIES,
+  PaletteError,
+  brandFromToml,
+  parseToml,
+  readContract,
+  readRules,
+  renderPalette,
+  validateBrand
+};
+//# sourceMappingURL=palette.js.map

package/dist/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evinvest/uikit",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
   "license": "BlueOak-1.0.0",
   "publishConfig": {
@@ -17,10 +17,19 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles/tokens.css": "./styles/tokens.css"
+    "./palette": {
+      "types": "./dist/palette.d.ts",
+      "import": "./dist/palette.js"
+    },
+    "./styles/tokens.css": "./styles/tokens.css",
+    "./styles/theme.css": "./styles/theme.css",
+    "./styles/ev.css": "./styles/ev.css"
   },
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
+  "bin": {
+    "evinvest-palette": "./dist/palette-cli.js"
+  },
   "files": [
     "dist",
     "styles"
@@ -32,10 +41,10 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "rm -rf dist && tsup",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "prepare": "tsup",
+    "prepare": "rm -rf dist && tsup",
     "prepublishOnly": "node scripts/verify-pack.mjs"
   },
   "peerDependencies": {

package/styles/ev.css

@@ -0,0 +1,73 @@
+/* AUTO-GENERATED by `nix run .#gen` from the repo-root ev.css — do not edit. */
+/* ═══ PALETTE: EV ════════════════════════════════════════════════
+ *
+ * Zero specificity: EV is the default a brand scope overrides, whatever order
+ * the two sheets are imported in.
+ *
+ * Surface ladder — dark UI reads as unfinished when every plane is the same
+ * value, so the steps below are deliberate and measured; keep them apart if you
+ * retune. background #070d18 → secondary #0d1526 (1.07:1) → card #16233c (1.24:1
+ * vs background) → popover #1d2c49 (1.13:1 vs card) → muted #26375c. Elevation
+ * rides the same ladder via --shadow-card / -elevated / -overlay. Card is also
+ * pinned from above by a second floor: --primary has to clear 3:1 against it
+ * (3.39:1 today), so lifting card one step breaks the tokens test.
+ */
+:where(:root, [data-brand="ev"]) {
+  /* the polarity, for what the platform draws itself (a native <select>'s
+   * popup); a custom property so nothing but the kit's opt-ins reads it */
+  --scheme: dark;
+
+  /* ── surfaces ────────────────────────────────────────────────── */
+  --background: #070d18;
+  --card: #16233c;
+  --popover: #1d2c49;
+  --muted: #26375c;
+
+  /* ── ink ─────────────────────────────────────────────────────── */
+  --ink: #e6e1d3;
+
+  /* ── roles ───────────────────────────────────────────────────── */
+  --brand: #001e4e;
+  /* teal, not the brand navy: navy filled a Button/Switch at ~1.1:1 against
+   * these surfaces, i.e. an invisible control, and consumers hardcoded teal to
+   * get around it. The brand navy still lives in --brand.
+   *
+   * A fill and an ink are different jobs, so the primary role carries two
+   * values (docs/spec/accents.md). --primary-ink is the teal that reads on the
+   * surfaces: 5.85:1 on background, 4.72:1 on card. --primary is the same hue
+   * and chroma one step down in lightness — OKLCH L 0.550 C 0.094 H 183°
+   * against the ink's L 0.630 C 0.101 H 183° — so the CTA carries white:
+   * --on-primary reads on it at 4.63:1, and the fill clears the 3:1 non-text
+   * floor against background (4.20:1), secondary (3.94:1), card (3.39:1) and
+   * popover (3.01:1), so a checked Switch on a Card still reads as one. Muted
+   * is the one surface under the floor (2.54:1); the controls that fill there
+   * carry an on-primary mark, see the spec. Darkening the single value instead
+   * would have dropped every teal label below AA. */
+  --primary: #128377;
+  --on-primary: #ffffff;
+  --primary-ink: #2a9d8f;
+  --secondary: #0d1526;
+  --on-secondary: var(--ink);
+  /* valence, not significance: a success reads as good while staying quiet */
+  --positive: #2e9e5b;
+  --on-positive: #070d18;
+  --accent-trace: #6b7fa0;
+  --on-accent-trace: #070d18;
+  --accent-debug: #2a9d8f;
+  --on-accent-debug: #070d18;
+  --accent-info: #4a90d9;
+  --on-accent-info: #070d18;
+  --accent-warn: #f2c94c;
+  --on-accent-warn: #070d18;
+  /* lifted off the brand red #da251d, which failed AA on a card. This one value
+   * carries both the fill and the text; the vivid brand red is a gitops
+   * constant, not a UI token. */
+  --accent-error: #ef5b52;
+  --on-accent-error: #070d18;
+
+  --chart-1: #2a9d8f;
+  --chart-2: #2e9e5b;
+  --chart-3: #f2c94c;
+  --chart-4: #e58aae;
+  --chart-5: #4a90d9;
+}