@epilot/volt-ui-experimental-griffel 0.2.1 → 0.2.3

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values.",
   "package": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",
@@ -548,6 +548,7 @@
       "sem-accent-high-contrast": "#00224bee",
       "sem-accent-light": "#005bb8f0",
       "sem-accent-on-high-contrast": "#fcfdfe",
+      "sem-accent-on-soft": "#00224bee",
       "sem-accent-on-solid": "#ffffff",
       "sem-accent-soft": "#0066e614",
       "sem-accent-soft-hover": "#006ef823",
@@ -563,6 +564,7 @@
       "sem-blue-high-contrast": "#002359ee",
       "sem-blue-light": "#006dcbf2",
       "sem-blue-on-high-contrast": "#fbfdff",
+      "sem-blue-on-soft": "#002359ee",
       "sem-blue-on-solid": "#ffffff",
       "sem-blue-soft": "#008ff519",
       "sem-blue-soft-hover": "#009eff2a",
@@ -579,6 +581,7 @@
       "sem-bronze-high-contrast": "#1d0600d4",
       "sem-bronze-light": "#3d0f00ab",
       "sem-bronze-on-high-contrast": "#fdfcfc",
+      "sem-bronze-on-soft": "#1d0600d4",
       "sem-bronze-on-solid": "#ffffff",
       "sem-bronze-soft": "#92250015",
       "sem-bronze-soft-hover": "#80280020",
@@ -594,6 +597,7 @@
       "sem-cyan-high-contrast": "#00323ef2",
       "sem-cyan-light": "#007491ef",
       "sem-cyan-on-high-contrast": "#fafdfe",
+      "sem-cyan-on-soft": "#00323ef2",
       "sem-cyan-on-solid": "#ffffff",
       "sem-cyan-soft": "#00c2d121",
       "sem-cyan-soft-hover": "#00bcd435",
@@ -609,6 +613,7 @@
       "sem-error-high-contrast": "#5a0400ec",
       "sem-error-light": "#ce0200e1",
       "sem-error-on-high-contrast": "#fffcfc",
+      "sem-error-on-soft": "#5a0400ec",
       "sem-error-on-solid": "#ffffff",
       "sem-error-soft": "#ff220017",
       "sem-error-soft-hover": "#ff25002a",
@@ -618,12 +623,14 @@
       "sem-error-surface-hover": "#ff220017",
       "sem-error-ui": "#ed1d0062",
       "sem-error-ui-hover": "#df1b007f",
+      "sem-focus-ring": "#0f65bc",
       "sem-gray-contrast": "#ffffff",
       "sem-gray-default": "#020008e0",
       "sem-gray-disabled": "#08003145",
       "sem-gray-high-contrast": "#020008e0",
       "sem-gray-light": "#0400119c",
       "sem-gray-on-high-contrast": "#fdfcfd",
+      "sem-gray-on-soft": "#020008e0",
       "sem-gray-on-solid": "#ffffff",
       "sem-gray-soft": "#30004010",
       "sem-gray-soft-hover": "#20003618",
@@ -639,6 +646,7 @@
       "sem-green-high-contrast": "#002616e6",
       "sem-green-light": "#00713fde",
       "sem-green-on-high-contrast": "#fbfefc",
+      "sem-green-on-soft": "#002616e6",
       "sem-green-on-solid": "#ffffff",
       "sem-green-soft": "#00a43319",
       "sem-green-soft-hover": "#00a83829",
@@ -654,6 +662,7 @@
       "sem-indigo-high-contrast": "#001046e0",
       "sem-indigo-light": "#002bb7c5",
       "sem-indigo-on-high-contrast": "#fdfdfe",
+      "sem-indigo-on-soft": "#001046e0",
       "sem-indigo-on-solid": "#ffffff",
       "sem-indigo-soft": "#0047f112",
       "sem-indigo-soft-hover": "#0044ff1e",
@@ -669,6 +678,7 @@
       "sem-info-high-contrast": "#002359ee",
       "sem-info-light": "#006dcbf2",
       "sem-info-on-high-contrast": "#fbfdff",
+      "sem-info-on-soft": "#002359ee",
       "sem-info-on-solid": "#ffffff",
       "sem-info-soft": "#008ff519",
       "sem-info-soft-hover": "#009eff2a",
@@ -687,6 +697,7 @@
       "sem-lime-high-contrast": "#1e2900e3",
       "sem-lime-light": "#375f00d0",
       "sem-lime-on-high-contrast": "#fcfdfa",
+      "sem-lime-on-soft": "#1e2900e3",
       "sem-lime-on-solid": "#1d211c",
       "sem-lime-soft": "#96c80029",
       "sem-lime-soft-hover": "#8fc60042",
@@ -702,6 +713,7 @@
       "sem-mauve-high-contrast": "#020008e0",
       "sem-mauve-light": "#0400119c",
       "sem-mauve-on-high-contrast": "#fdfcfd",
+      "sem-mauve-on-soft": "#020008e0",
       "sem-mauve-on-solid": "#ffffff",
       "sem-mauve-soft": "#30004010",
       "sem-mauve-soft-hover": "#20003618",
@@ -717,6 +729,7 @@
       "sem-mint-high-contrast": "#00312ae9",
       "sem-mint-light": "#007763fd",
       "sem-mint-on-high-contrast": "#f9fefd",
+      "sem-mint-on-soft": "#00312ae9",
       "sem-mint-on-solid": "#1a211e",
       "sem-mint-soft": "#00d29e22",
       "sem-mint-soft-hover": "#00cc9937",
@@ -732,6 +745,7 @@
       "sem-orange-high-contrast": "#431200e2",
       "sem-orange-light": "#cc4e00",
       "sem-orange-on-high-contrast": "#fefcfb",
+      "sem-orange-on-soft": "#431200e2",
       "sem-orange-on-solid": "#ffffff",
       "sem-orange-soft": "#ff9c0029",
       "sem-orange-soft-hover": "#ff91014a",
@@ -747,6 +761,7 @@
       "sem-pink-high-contrast": "#59003bed",
       "sem-pink-light": "#b60074d6",
       "sem-pink-on-high-contrast": "#fffcfe",
+      "sem-pink-on-soft": "#59003bed",
       "sem-pink-on-solid": "#ffffff",
       "sem-pink-soft": "#f4008c16",
       "sem-pink-soft-hover": "#e2008b23",
@@ -762,6 +777,7 @@
       "sem-purple-high-contrast": "#250049df",
       "sem-purple-light": "#52009aba",
       "sem-purple-on-high-contrast": "#fefcfe",
+      "sem-purple-on-soft": "#250049df",
       "sem-purple-on-solid": "#ffffff",
       "sem-purple-soft": "#8e00f112",
       "sem-purple-soft-hover": "#8d00e51d",
@@ -777,6 +793,7 @@
       "sem-red-high-contrast": "#5a0400ec",
       "sem-red-light": "#ce0200e1",
       "sem-red-on-high-contrast": "#fffcfc",
+      "sem-red-on-soft": "#5a0400ec",
       "sem-red-on-solid": "#ffffff",
       "sem-red-soft": "#ff220017",
       "sem-red-soft-hover": "#ff25002a",
@@ -792,6 +809,7 @@
       "sem-sky-high-contrast": "#002540e2",
       "sem-sky-light": "#00749e",
       "sem-sky-on-high-contrast": "#f9feff",
+      "sem-sky-on-soft": "#002540e2",
       "sem-sky-on-solid": "#1c2024",
       "sem-sky-soft": "#00b3ee1e",
       "sem-sky-soft-hover": "#00ace42e",
@@ -807,6 +825,7 @@
       "sem-success-high-contrast": "#002616e6",
       "sem-success-light": "#00713fde",
       "sem-success-on-high-contrast": "#fbfefc",
+      "sem-success-on-soft": "#002616e6",
       "sem-success-on-solid": "#ffffff",
       "sem-success-soft": "#00a43319",
       "sem-success-soft-hover": "#00a83829",
@@ -822,6 +841,7 @@
       "sem-teal-high-contrast": "#00332df2",
       "sem-teal-light": "#008573",
       "sem-teal-on-high-contrast": "#fafefd",
+      "sem-teal-on-soft": "#00332df2",
       "sem-teal-on-solid": "#ffffff",
       "sem-teal-soft": "#00c69d1f",
       "sem-teal-soft-hover": "#00c39633",
@@ -837,6 +857,7 @@
       "sem-warning-high-contrast": "#431200e2",
       "sem-warning-light": "#cc4e00",
       "sem-warning-on-high-contrast": "#fefcfb",
+      "sem-warning-on-soft": "#431200e2",
       "sem-warning-on-solid": "#ffffff",
       "sem-warning-soft": "#ff9c0029",
       "sem-warning-soft-hover": "#ff91014a",
@@ -852,6 +873,7 @@
       "sem-yellow-high-contrast": "#2e2000e0",
       "sem-yellow-light": "#9e6c00",
       "sem-yellow-on-high-contrast": "#fdfdf9",
+      "sem-yellow-on-soft": "#2e2000e0",
       "sem-yellow-on-solid": "#21201c",
       "sem-yellow-soft": "#ffee0047",
       "sem-yellow-soft-hover": "#ffe3016b",
@@ -1601,6 +1623,7 @@
       "sem-accent-high-contrast": "#c5e4ff",
       "sem-accent-light": "#71b8ff",
       "sem-accent-on-high-contrast": "#07121f",
+      "sem-accent-on-soft": "#c5e4ff",
       "sem-accent-on-solid": "#ffffff",
       "sem-accent-soft": "#0060fe44",
       "sem-accent-soft-hover": "#005dff65",
@@ -1616,6 +1639,7 @@
       "sem-blue-high-contrast": "#c2e6ff",
       "sem-blue-light": "#70b8ff",
       "sem-blue-on-high-contrast": "#0d1520",
+      "sem-blue-on-soft": "#c2e6ff",
       "sem-blue-on-solid": "#ffffff",
       "sem-blue-soft": "#0077ff3a",
       "sem-blue-soft-hover": "#0075ff57",
@@ -1632,6 +1656,7 @@
       "sem-bronze-high-contrast": "#fff1e9ec",
       "sem-bronze-light": "#ffd7c6d1",
       "sem-bronze-on-high-contrast": "#141110",
+      "sem-bronze-on-soft": "#fff1e9ec",
       "sem-bronze-on-solid": "#ffffff",
       "sem-bronze-soft": "#faceb817",
       "sem-bronze-soft-hover": "#facdb622",
@@ -1647,6 +1672,7 @@
       "sem-cyan-high-contrast": "#bbf3fef7",
       "sem-cyan-light": "#52e1fee5",
       "sem-cyan-on-high-contrast": "#0b161a",
+      "sem-cyan-on-soft": "#bbf3fef7",
       "sem-cyan-on-solid": "#ffffff",
       "sem-cyan-soft": "#00befd28",
       "sem-cyan-soft-hover": "#00baff3b",
@@ -1662,6 +1688,7 @@
       "sem-error-high-contrast": "#ffcdc4",
       "sem-error-light": "#ff9081",
       "sem-error-on-high-contrast": "#190e0c",
+      "sem-error-on-soft": "#ffcdc4",
       "sem-error-on-solid": "#ffffff",
       "sem-error-soft": "#fe000037",
       "sem-error-soft-hover": "#fe000053",
@@ -1671,12 +1698,14 @@
       "sem-error-surface-hover": "#fe000037",
       "sem-error-ui": "#fe11119a",
       "sem-error-ui-hover": "#ff191acc",
+      "sem-focus-ring": "#71b8ff",
       "sem-gray-contrast": "#ffffff",
       "sem-gray-default": "#fdfdffef",
       "sem-gray-disabled": "#eee7ff5d",
       "sem-gray-high-contrast": "#fdfdffef",
       "sem-gray-light": "#f5f1ffb7",
       "sem-gray-on-high-contrast": "#121113",
+      "sem-gray-on-soft": "#fdfdffef",
       "sem-gray-on-solid": "#ffffff",
       "sem-gray-soft": "#ebeaf814",
       "sem-gray-soft-hover": "#eee5f81d",
@@ -1692,6 +1721,7 @@
       "sem-green-high-contrast": "#bbffd7f0",
       "sem-green-light": "#46fea5d4",
       "sem-green-on-high-contrast": "#0e1512",
+      "sem-green-on-soft": "#bbffd7f0",
       "sem-green-on-solid": "#ffffff",
       "sem-green-soft": "#22ff991e",
       "sem-green-soft-hover": "#11ff992d",
@@ -1707,6 +1737,7 @@
       "sem-indigo-high-contrast": "#d6e1ff",
       "sem-indigo-light": "#9eb1ff",
       "sem-indigo-on-high-contrast": "#11131f",
+      "sem-indigo-on-soft": "#d6e1ff",
       "sem-indigo-on-solid": "#ffffff",
       "sem-indigo-soft": "#2f62ff3c",
       "sem-indigo-soft-hover": "#3566ff57",
@@ -1722,6 +1753,7 @@
       "sem-info-high-contrast": "#c2e6ff",
       "sem-info-light": "#70b8ff",
       "sem-info-on-high-contrast": "#0d1520",
+      "sem-info-on-soft": "#c2e6ff",
       "sem-info-on-solid": "#ffffff",
       "sem-info-soft": "#0077ff3a",
       "sem-info-soft-hover": "#0075ff57",
@@ -1740,6 +1772,7 @@
       "sem-lime-high-contrast": "#e9febff7",
       "sem-lime-light": "#d1fe77e4",
       "sem-lime-on-high-contrast": "#11130c",
+      "sem-lime-on-soft": "#e9febff7",
       "sem-lime-on-solid": "#1d211c",
       "sem-lime-soft": "#9bfd4c1a",
       "sem-lime-soft-hover": "#a7fe5c29",
@@ -1755,6 +1788,7 @@
       "sem-mauve-high-contrast": "#fdfdffef",
       "sem-mauve-light": "#f5f1ffb7",
       "sem-mauve-on-high-contrast": "#121113",
+      "sem-mauve-on-soft": "#fdfdffef",
       "sem-mauve-on-solid": "#ffffff",
       "sem-mauve-soft": "#ebeaf814",
       "sem-mauve-soft-hover": "#eee5f81d",
@@ -1770,6 +1804,7 @@
       "sem-mint-high-contrast": "#cbfee9f5",
       "sem-mint-light": "#67ffded2",
       "sem-mint-on-high-contrast": "#0e1515",
+      "sem-mint-on-soft": "#cbfee9f5",
       "sem-mint-on-solid": "#1a211e",
       "sem-mint-soft": "#00fff61d",
       "sem-mint-soft-hover": "#00fff42c",
@@ -1785,6 +1820,7 @@
       "sem-orange-high-contrast": "#ffe0c2",
       "sem-orange-light": "#ffa057",
       "sem-orange-on-high-contrast": "#17120e",
+      "sem-orange-on-soft": "#ffe0c2",
       "sem-orange-on-solid": "#ffffff",
       "sem-orange-soft": "#fb6a0025",
       "sem-orange-soft-hover": "#ff590039",
@@ -1800,6 +1836,7 @@
       "sem-pink-high-contrast": "#ffd3ecfd",
       "sem-pink-light": "#ff8dcc",
       "sem-pink-on-high-contrast": "#191117",
+      "sem-pink-on-soft": "#ffd3ecfd",
       "sem-pink-on-solid": "#ffffff",
       "sem-pink-soft": "#fe37cc29",
       "sem-pink-soft-hover": "#fc1ec43f",
@@ -1815,6 +1852,7 @@
       "sem-purple-high-contrast": "#f1ddfffa",
       "sem-purple-light": "#d19dff",
       "sem-purple-on-high-contrast": "#18111b",
+      "sem-purple-on-soft": "#f1ddfffa",
       "sem-purple-on-solid": "#ffffff",
       "sem-purple-soft": "#c150ff2d",
       "sem-purple-soft-hover": "#bb53fd42",
@@ -1830,6 +1868,7 @@
       "sem-red-high-contrast": "#ffcdc4",
       "sem-red-light": "#ff9081",
       "sem-red-on-high-contrast": "#190e0c",
+      "sem-red-on-soft": "#ffcdc4",
       "sem-red-on-solid": "#ffffff",
       "sem-red-soft": "#fe000037",
       "sem-red-soft-hover": "#fe000053",
@@ -1845,6 +1884,7 @@
       "sem-sky-high-contrast": "#c2f3ff",
       "sem-sky-light": "#7cd3ffef",
       "sem-sky-on-high-contrast": "#0d141f",
+      "sem-sky-on-soft": "#c2f3ff",
       "sem-sky-on-solid": "#1c2024",
       "sem-sky-soft": "#1184fc33",
       "sem-sky-soft-hover": "#128fff49",
@@ -1860,6 +1900,7 @@
       "sem-success-high-contrast": "#bbffd7f0",
       "sem-success-light": "#46fea5d4",
       "sem-success-on-high-contrast": "#0e1512",
+      "sem-success-on-soft": "#bbffd7f0",
       "sem-success-on-solid": "#ffffff",
       "sem-success-soft": "#22ff991e",
       "sem-success-soft-hover": "#11ff992d",
@@ -1875,6 +1916,7 @@
       "sem-teal-high-contrast": "#b8ffebef",
       "sem-teal-light": "#0afed5d6",
       "sem-teal-on-high-contrast": "#0d1514",
+      "sem-teal-on-soft": "#b8ffebef",
       "sem-teal-on-solid": "#ffffff",
       "sem-teal-soft": "#00ffe61e",
       "sem-teal-soft-hover": "#00ffe92d",
@@ -1890,6 +1932,7 @@
       "sem-warning-high-contrast": "#ffe0c2",
       "sem-warning-light": "#ffa057",
       "sem-warning-on-high-contrast": "#17120e",
+      "sem-warning-on-soft": "#ffe0c2",
       "sem-warning-on-solid": "#ffffff",
       "sem-warning-soft": "#fb6a0025",
       "sem-warning-soft-hover": "#ff590039",
@@ -1905,6 +1948,7 @@
       "sem-yellow-high-contrast": "#fef6baf6",
       "sem-yellow-light": "#fee949f5",
       "sem-yellow-on-high-contrast": "#14120b",
+      "sem-yellow-on-soft": "#fef6baf6",
       "sem-yellow-on-solid": "#21201c",
       "sem-yellow-soft": "#ffaa001e",
       "sem-yellow-soft-hover": "#fdb70028",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Experimental Volt UI rebuild: Radix primitives styled with Griffel, bundled per micro-frontend instead of shared as a singleton",
   "type": "module",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,13 +21,17 @@
       "import": "./dist/tokens/index.js"
     },
     "./tokens.json": "./dist/tokens.json",
+    "./testing/jest-preset.cjs": "./testing/jest-preset.cjs",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "testing",
     "tokens.js",
     "tokens.d.ts",
-    "README.md"
+    "README.md",
+    "AGENTS.md",
+    "AUTHORING.md"
   ],
   "sideEffects": false,
   "publishConfig": {

package/testing/jest-preset.cjs

@@ -0,0 +1,64 @@
+/**
+ * Jest/Vitest configuration for consumers of this package.
+ *
+ * WHY THIS EXISTS. The package is ESM-only. Jest 26 and 27 ignore the `exports` field, so before
+ * 0.2.2 a bare `@epilot/volt-ui-experimental-griffel` resolved to nothing and every suite that
+ * rendered a component died with "Cannot find module". Both pilot MFEs hit it; one hand-wrote
+ * `moduleNameMapper: { '^@epilot/…$': '<rootDir>/../../../node_modules/@epilot/…/dist/index.js' }`,
+ * a path that breaks the moment hoisting changes.
+ *
+ * 0.2.2 adds a `main` field, so those resolvers now find `dist/index.js` on their own and no
+ * mapping is needed. What is still needed is a TRANSFORM: the file they resolve is ESM, and Jest's
+ * default `transformIgnorePatterns` skips everything in `node_modules`. That is what this file
+ * supplies.
+ *
+ * There is deliberately no CommonJS build. The runtime keeps module-level state — `sheet.ts` holds
+ * the `installed` Set that dedups token sheets, and one shared renderer — and a dual ESM/CJS build
+ * would give a consumer two copies of it. That breaks the single-insertion-point and single-renderer
+ * guarantees `gate:isolation` and `gate:griffel-contract` assert. One format is a correctness
+ * requirement here, not an oversight. See DECISIONS D13.
+ *
+ * USAGE — spread it into your own config:
+ *
+ *   const griffel = require("@epilot/volt-ui-experimental-griffel/testing/jest-preset.cjs")
+ *
+ *   module.exports = griffel.withGriffel({
+ *     preset: "ts-jest",
+ *     // …your config…
+ *   }, { alsoTransform: ["@xyflow"] })
+ *
+ * Requires `babel-jest` and `@babel/preset-env` as devDependencies. If you already transform JS in
+ * `node_modules` with something else, take `transformIgnorePatterns` from here and keep your own
+ * `transform`.
+ */
+const PACKAGE_NAME = "@epilot/volt-ui-experimental-griffel"
+
+/** Transform for the ESM this package ships. Keyed on `.js`/`.mjs`, which is all it emits. */
+const transform = {
+  "^.+\\.m?js$": [
+    "babel-jest",
+    { presets: [["@babel/preset-env", { targets: { node: "current" } }]] },
+  ],
+}
+
+/**
+ * Jest ignores a file if ANY pattern matches, so an extra pattern cannot un-ignore what the
+ * default `/node_modules/` already caught — the array has to be replaced, not appended to. Hence
+ * the explicit `alsoTransform` list rather than a merge.
+ */
+const transformIgnorePatterns = (alsoTransform = []) => [
+  `node_modules/(?!(${[PACKAGE_NAME, ...alsoTransform].join("|")})/)`,
+]
+
+const withGriffel = (config = {}, { alsoTransform = [] } = {}) => ({
+  ...config,
+  transform: { ...transform, ...config.transform },
+  transformIgnorePatterns: transformIgnorePatterns(alsoTransform),
+})
+
+module.exports = {
+  PACKAGE_NAME,
+  transform,
+  transformIgnorePatterns: transformIgnorePatterns(),
+  withGriffel,
+}