@multiplatform.one/config 7.43.0 → 7.45.0

package/README.md

@@ -143,8 +143,13 @@ the enclosing `Svg` has a `viewBox`, including one passed through a spread, or
 when the mark is a fragment drawn into an `Svg` elsewhere. Primitives inside an
 `Svg` with no `viewBox`, and the `Svg` element's own size, are still reported.
 
-Every violation is tagged with its rule: `hex`, `geometry`, `inline-spacing`,
-`raw-control`, `styled-mpo` or `token-file`.
+A `focusStyle`, `focusVisibleStyle` or `focusWithinStyle` that paints its own
+outline, box shadow, shadow or elevation is reported as `field-focus`. Focus
+looks come from MPO: fields take `FIELD_FOCUS_STYLE` (the accent border), other
+controls the theme's focus ring. Zeroing those keys is allowed.
+
+Every violation is tagged with its rule: `field-focus`, `hex`, `geometry`,
+`inline-spacing`, `raw-control`, `styled-mpo` or `token-file`.
 
 #### Ratchet
 

package/design-lint.mjs

@@ -51,6 +51,11 @@ const svgPrimitives = new Set([
   "Use",
 ]);
 const svgRoots = new Set(["Svg", "Symbol"]);
+// FZ-7717: focus looks come from MPO (FIELD_FOCUS_STYLE / the control ring).
+// A use site that paints its own focus ring or shadow forks the look.
+const focusPaint =
+  /^(?:outline(?:Width|Color|Offset)?|boxShadow|shadow(?:Color|Opacity|Radius|Offset)|elevation)$/;
+const focusStates = new Set(["focusStyle", "focusVisibleStyle", "focusWithinStyle"]);
 const tokenFactories = new Set([
   "createTokens",
   "createTamagui",
@@ -59,6 +64,7 @@ const tokenFactories = new Set([
   "createFont",
 ]);
 export const designRules = [
+  "field-focus",
   "hex",
   "geometry",
   "inline-spacing",
@@ -224,6 +230,42 @@ export function inspectDesign(source, filename, projectRoot = process.cwd()) {
       return spacing(value.whenTrue) || spacing(value.whenFalse);
     return false;
   }
+  function inert(node) {
+    const value = resolve(node);
+    if (ts.isNumericLiteral(value)) return Number(value.text) === 0;
+    if (ts.isStringLiteralLike(value)) return /^(?:0(?:px)?|none|transparent)$/.test(value.text);
+    return value.kind === ts.SyntaxKind.UndefinedKeyword || value.getText(file) === "undefined";
+  }
+  function paintsFocus(node, seen = new Set()) {
+    const value = resolve(node);
+    if (seen.has(value)) return undefined;
+    seen.add(value);
+    if (ts.isConditionalExpression(value))
+      return paintsFocus(value.whenTrue, seen) ?? paintsFocus(value.whenFalse, seen);
+    if (!ts.isObjectLiteralExpression(value)) return undefined;
+    for (const prop of value.properties) {
+      if (ts.isSpreadAssignment(prop)) {
+        const inner = paintsFocus(prop.expression, seen);
+        if (inner) return inner;
+      } else if (
+        ts.isPropertyAssignment(prop) &&
+        focusPaint.test(name(prop.name)) &&
+        !inert(prop.initializer)
+      )
+        return prop;
+    }
+    return undefined;
+  }
+  function checkFocus(key, value, node) {
+    if (!focusStates.has(key)) return;
+    const painted = paintsFocus(value);
+    if (painted)
+      report(
+        node,
+        "field-focus",
+        `${key} paints its own ${name(painted.name)}; focus comes from MPO (FIELD_FOCUS_STYLE).`,
+      );
+  }
   function report(node, rule, message) {
     const { line, character } = file.getLineAndCharacterOfPosition(node.getStart(file));
     errors.push(`${filename}:${line + 1}:${character + 1}: [${rule}] ${message}`);
@@ -260,6 +302,7 @@ export function inspectDesign(source, filename, projectRoot = process.cwd()) {
             : prop.initializer;
           if (!initializer) return;
           const key = name(prop.name);
+          checkFocus(key, initializer, prop);
           if (layout.test(key) && numeric(initializer))
             report(prop, "geometry", `${name(prop.name)} requires a token, not a numeric literal.`);
           if (/style$/i.test(key) && spacing(initializer))
@@ -346,6 +389,7 @@ export function inspectDesign(source, filename, projectRoot = process.cwd()) {
       const value = ts.isJsxExpression(node.initializer)
         ? node.initializer.expression
         : node.initializer;
+      if (value) checkFocus(key, value, node);
       if (value && (key.startsWith("$") || /style$/i.test(key))) inspectProps(value);
       if (value && layout.test(key) && numeric(value) && !svgArtwork(node.parent.parent))
         report(node, "geometry", `${key} requires a token, not a numeric literal.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/config",
-  "version": "7.43.0",
+  "version": "7.45.0",
   "description": "Shared build and test configuration presets for multiplatform.one",
   "keywords": [
     "config",
@@ -106,7 +106,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/utils": "^7.43.0",
+    "@multiplatform.one/utils": "^7.45.0",
     "@tamagui/vite-plugin": "2.7.6",
     "@vitejs/plugin-react": "^6.1.2",
     "dotenv": "^17.4.2",