@multiplatform.one/theme 7.43.0 → 7.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.43.0",
+  "version": "7.44.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -59,8 +59,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.43.0",
-    "@multiplatform.one/store": "^7.43.0",
+    "@multiplatform.one/platform": "^7.44.0",
+    "@multiplatform.one/store": "^7.44.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -73,8 +73,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.43.0",
-    "@multiplatform.one/test-utils": "7.43.0",
+    "@multiplatform.one/config": "7.44.0",
+    "@multiplatform.one/test-utils": "7.44.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/fieldFocus.spec.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { createThemesBuilder } from "./createThemes";
+import { defaultAccentTheme } from "./defaults/accent";
+import { defaultBaseTheme } from "./defaults/base";
+import { defaultBuilderOptions } from "./defaults/builderOptions";
+import {
+  FIELD_FOCUS_COLOR,
+  FIELD_FOCUS_REST,
+  FIELD_FOCUS_STYLE,
+  fieldFocusCss,
+  fieldFocusHoldsContrast,
+} from "./fieldFocus";
+
+const themes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+describe("FZ-7717: one field focus look", () => {
+  it("is the accent border at the same width, with no ring, gap or shadow", () => {
+    expect(FIELD_FOCUS_STYLE.borderColor).toBe("$accentColor");
+    expect(FIELD_FOCUS_COLOR).toBe("$accentColor");
+    expect(FIELD_FOCUS_STYLE.outlineWidth).toBe(0);
+    expect(FIELD_FOCUS_REST.outlineWidth).toBe(0);
+    for (const key of Object.keys(FIELD_FOCUS_STYLE)) {
+      expect(key).not.toMatch(/^(borderWidth|outlineOffset|shadow|elevation|boxShadow)/);
+    }
+  });
+
+  it("web css paints the accent border and drops the ring on pointer and keyboard focus", () => {
+    const css = fieldFocusCss("[data-mp-input-box]");
+    expect(css).toContain("[data-mp-input-box]:has(input:focus)");
+    expect(css).toContain("[data-mp-input-box]:focus-visible");
+    expect(css).toContain("border-color: var(--accentColor");
+    expect(css).toContain("outline: none");
+    expect(css).not.toMatch(/outline-offset|box-shadow|border-width/);
+  });
+
+  // WCAG 2.4.7 / 1.4.11: the focused border must hold 3:1 against the field
+  // fill ($background) and the grounds a field sits on, in every colour theme.
+  for (const [name, theme] of Object.entries(themes)) {
+    if (!/^(light|dark)(_(blue|gray|green|orange|pink|purple|red|yellow|neutral))?$/.test(name))
+      continue;
+    it(`${name}: $accentColor holds 3:1 on the field fill and page grounds`, () => {
+      expect(theme.accentColor, name).toBeTruthy();
+      expect(
+        fieldFocusHoldsContrast(theme.accentColor, [
+          theme.background,
+          theme.color1,
+          theme.color2,
+          theme.color3,
+        ]),
+        `${name}: ${theme.accentColor} on ${theme.background}`,
+      ).toBe(true);
+    });
+  }
+});

package/src/theme/fieldFocus.ts

@@ -0,0 +1,54 @@
+import { focusRingColorMeetsContrast } from "./focusState";
+
+/**
+ * FZ-7717: the ONE focus look for every focusable MPO field (Input, TextArea,
+ * Select, Duration, Date and Time, Number, OTP and every other Input.Box).
+ * Clay's pick (rv_a60d41af5f9beea6): the field's own border turns the accent
+ * colour at the width it already has. No ring, no gap, no shadow.
+ *
+ * `$accentColor` is the accent ink, held at 4.5:1 on color1..color3 by
+ * holdAccentFloor, so the border clears the 3:1 focus floor on every field
+ * ground. Fields spread these fragments; they never define their own.
+ */
+export const FIELD_FOCUS_COLOR = "$accentColor";
+
+export const FIELD_FOCUS_STYLE = {
+  borderColor: FIELD_FOCUS_COLOR,
+  outlineWidth: 0,
+  outlineStyle: "solid" as const,
+  outlineColor: "transparent",
+};
+
+/** The same field at rest: no outline left over from a ring recipe. */
+export const FIELD_FOCUS_REST = {
+  outlineWidth: 0,
+  outlineStyle: "solid" as const,
+  outlineColor: "transparent",
+};
+
+/**
+ * Web: the focused element is the inner <input>, not the painted Box, so the
+ * Box takes the look through `:has()`. Covers pointer and keyboard focus;
+ * `:focus-visible` on the Box covers button-like Boxes (Select, Date).
+ * `deep` also lights the Box when any inner control has keyboard focus, for
+ * Boxes whose adornment is the field itself (PhoneInput's country picker).
+ * A Box with a separate inner action (SearchInput's clear) stays shallow.
+ */
+export function fieldFocusCss(box: string, { deep = false }: { deep?: boolean } = {}): string {
+  const selectors = [
+    `${box}:has(input:focus)`,
+    `${box}:has(textarea:focus)`,
+    `${box}:has([data-mp-input-area]:focus)`,
+    `${box}:focus-visible`,
+    ...(deep ? [`${box}:has(:focus-visible)`] : []),
+  ];
+  return `${selectors.join(",\n")} {
+  border-color: var(--accentColor, CanvasText) !important;
+  outline: none !important;
+}`;
+}
+
+/** True when the accent border clears 3:1 against every given field ground. */
+export function fieldFocusHoldsContrast(accent: string, grounds: string[]): boolean {
+  return grounds.every((ground) => focusRingColorMeetsContrast(accent, ground));
+}

package/src/theme/index.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";
 export * from "./fontCategoryMetrics";

package/types/theme/fieldFocus.d.ts

@@ -0,0 +1,37 @@
+/**
+ * FZ-7717: the ONE focus look for every focusable MPO field (Input, TextArea,
+ * Select, Duration, Date and Time, Number, OTP and every other Input.Box).
+ * Clay's pick (rv_a60d41af5f9beea6): the field's own border turns the accent
+ * colour at the width it already has. No ring, no gap, no shadow.
+ *
+ * `$accentColor` is the accent ink, held at 4.5:1 on color1..color3 by
+ * holdAccentFloor, so the border clears the 3:1 focus floor on every field
+ * ground. Fields spread these fragments; they never define their own.
+ */
+export declare const FIELD_FOCUS_COLOR = "$accentColor";
+export declare const FIELD_FOCUS_STYLE: {
+    borderColor: string;
+    outlineWidth: number;
+    outlineStyle: "solid";
+    outlineColor: string;
+};
+/** The same field at rest: no outline left over from a ring recipe. */
+export declare const FIELD_FOCUS_REST: {
+    outlineWidth: number;
+    outlineStyle: "solid";
+    outlineColor: string;
+};
+/**
+ * Web: the focused element is the inner <input>, not the painted Box, so the
+ * Box takes the look through `:has()`. Covers pointer and keyboard focus;
+ * `:focus-visible` on the Box covers button-like Boxes (Select, Date).
+ * `deep` also lights the Box when any inner control has keyboard focus, for
+ * Boxes whose adornment is the field itself (PhoneInput's country picker).
+ * A Box with a separate inner action (SearchInput's clear) stays shallow.
+ */
+export declare function fieldFocusCss(box: string, { deep }?: {
+    deep?: boolean;
+}): string;
+/** True when the accent border clears 3:1 against every given field ground. */
+export declare function fieldFocusHoldsContrast(accent: string, grounds: string[]): boolean;
+//# sourceMappingURL=fieldFocus.d.ts.map

package/types/theme/fieldFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldFocus.d.ts","sourceRoot":"","sources":["../../src/theme/fieldFocus.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAEhD,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,IAAY,EAAE,GAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,MAAM,CAY5F;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO,CAElF"}

package/types/theme/index.d.ts

@@ -8,6 +8,7 @@ export * from "./createDefaultThemeConfig";
 export * from "./createThemes";
 export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
+export * from "./fieldFocus";
 export * from "./focusState";
 export * from "./glyphPaint";
 export * from "./fontCategoryMetrics";

package/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAElC,cAAc,UAAU,CAAC;AACzB,OAAO,EACL,eAAe,IAAI,kBAAkB,EACrC,kBAAkB,EAClB,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEpF,cAAc,YAAY,CAAC"}