@multiplatform.one/forms 7.88.7 → 7.88.9

package/dist/cjs/Button/index.cjs

@@ -466,7 +466,9 @@ function Button({
   });
   const tierPaint = tier ? (0, import_theme3.controlTierPaint)(tier, darkScheme, elevatedGround) : void 0;
   const tierDisabled = tier && disabledState.style !== "dimWhole" ? (0, import_theme3.controlTierDisabled)(tier) : void 0;
-  const hostScoped = fragment => Object.fromEntries(Object.entries(fragment).map(([key, value]) => [key, typeof value === "string" && value.startsWith("$") ? parentScopeTheme[value.slice(1)]?.val ?? value : value]));
+  const pageTheme = parentScopeTheme;
+  const hostTheme = (mediaPlate ? (0, import_tamagui.getConfig)().themes.dark : void 0) ?? pageTheme;
+  const hostScoped = fragment => Object.fromEntries(Object.entries(fragment).map(([key, value]) => [key, typeof value === "string" && value.startsWith("$") ? hostTheme[value.slice(1)]?.val ?? value : value]));
   const hostWashVar = token => `--mp-host-${token}`;
   const hostWash = fragment => import_tamagui.isWeb ? Object.fromEntries(Object.entries(fragment).map(([key, value]) => [key, typeof value === "string" && value.startsWith("$") ? `var(${hostWashVar(value.slice(1))})` : value])) : hostScoped(fragment);
   const washOnHost = Boolean(unavailable && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName));
@@ -520,6 +522,10 @@ function Button({
   const isSelected = selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : void 0);
   const selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate && !fieldGlyph;
   const barInk = accentInk && chromeless && !selectedFill && (!unavailable || frameless) && !confirmPlate ? labelled ? glyphTint.label : glyphTint.glyph : null;
+  const barInkPaint = import_tamagui.isWeb && barInk && !mediaPlate && pageTheme.identityInk?.val === barInk ? hostWash({
+    color: "$identityInk"
+  }).color : barInk;
+  const barGlyphInk = barInk && import_tamagui.isWeb && props.color == null ? "currentColor" : barInk;
   const inlineGlyph = iconButton && inline === true && !nested;
   const barGlyph = (iconButton || mediaPlate || confirmPlate) && !nested || labelled && chromeless && accentInk === true && edge === "start";
   const labelLine = labelLinePx(knobProps.body.fontFamily);
@@ -529,7 +535,7 @@ function Button({
   const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
   const accentFillHex = confirmPlate ? accentSolidFill(hostThemeName) : null;
   const confirmInk = accentFillHex && (0, import_theme3.contrastRatio)((0, import_theme3.relativeLuminance)("#ffffff"), (0, import_theme3.relativeLuminance)(accentFillHex)) >= import_theme3.GLYPH_CONTRAST_FLOOR ? "#ffffff" : "$color";
-  const plateInk = unavailable || barInk || outlinedInk ? void 0 : mediaPlate || iconButton && groupGround === "media" ? "$color12" : confirmPlate ? confirmInk : framedCircle && !activeThemeName ? hostScoped({
+  const plateInk = unavailable || barInk || outlinedInk ? void 0 : mediaPlate || iconButton && groupGround === "media" ? "$color12" : confirmPlate ? confirmInk : framedCircle && !activeThemeName ? hostWash({
     color: "$color12"
   }).color : void 0;
   const framedCirclePx = touch && typeof sizeProp !== "number" ? Math.max(sizeTokenPx(resolvedSize), import_theme3.MIN_PRESS_TARGET) : sizeTokenPx(resolvedSize);
@@ -543,7 +549,7 @@ function Button({
   // it up to the same floor.
   Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8)) : recipe.iconSize;
   const barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
-  const glyph = barGlyph || inlineGlyph || framedCircle ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk) : icon;
+  const glyph = barGlyph || inlineGlyph || framedCircle ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk) : icon;
   const labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
   const labelMaxFontScale = Math.min((0, import_theme3.maxFontScaleToFit)(labelBoxPx, nested ? (0, import_tamagui.getFontSize)(knobProps.label.fontSize) : recipe.fontSize, import_theme3.dynamicTypeFit.controlLabelFill), labelLine === void 0 ? Number.POSITIVE_INFINITY : (0, import_theme3.maxFontScaleToFit)(labelBoxPx, labelLine, 1));
   const renderLabelText = (label, key) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
@@ -564,8 +570,8 @@ function Button({
     } : outlinedInk ? {
       color: outlinedInk
     } : void 0),
-    ...(barInk ? {
-      color: barInk
+    ...(barInkPaint ? {
+      color: barInkPaint
     } : void 0),
     ...(unavailable ? disabledText : void 0),
     fontWeight: knobProps.body.fontWeight,
@@ -599,7 +605,7 @@ function Button({
       color: nativeIconColor
     })
   }) : null;
-  const glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk) : iconAfter;
+  const glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk) : iconAfter;
   const iconAfterElement = glyphAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
     children: import_tamagui.isWeb ? normalizeButtonIcon(glyphAfter, iconSize, webGlyphInk) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
@@ -646,14 +652,14 @@ function Button({
   const restFill = selectedFill ? outlined ? "$background" : "$backgroundPress" : tierPaint?.rest;
   const plainTier = tier === "plain";
   const glyphState = iconButton && !selectedFill;
-  const iconHover = glyphState ? import_tamagui.isWeb ? hostScoped({
+  const iconHover = glyphState ? import_tamagui.isWeb ? hostWash({
     backgroundColor: "$backgroundHover"
   }) : {
     backgroundColor: "transparent"
   } : mediaPlate ? {
     backgroundColor: "$shadow5"
   } : void 0;
-  const iconPress = glyphState ? import_tamagui.isWeb ? hostScoped({
+  const iconPress = glyphState ? import_tamagui.isWeb ? hostWash({
     backgroundColor: "$backgroundPress"
   }) : GlassView || glassGroup ? {
     backgroundColor: "transparent"
@@ -729,8 +735,8 @@ function Button({
     ...(outlinedInk ? {
       color: outlinedInk
     } : void 0),
-    ...(barInk ? {
-      color: barInk
+    ...(barInkPaint ? {
+      color: barInkPaint
     } : void 0),
     ...(plateInk ? {
       color: plateInk
@@ -777,9 +783,9 @@ function Button({
     },
     focusVisibleStyle: (0, import_theme3.ensureFocusVisibleRing)({
       ...control.focusVisibleKnobProps,
-      ...(pageOutlineColor ? {
-        outlineColor: pageOutlineColor
-      } : void 0)
+      ...(pageOutlineColor ? hostWash({
+        outlineColor: "$outlineColor"
+      }) : void 0)
     }),
     onPress: handlePress,
     ...(import_tamagui.isWeb ? {
@@ -895,8 +901,18 @@ function Button({
     color: hostAccentInk
   }, {
     color: textColor
+  }, {
+    outlineColor: "$outlineColor"
+  }, {
+    backgroundColor: "$backgroundHover"
+  }, {
+    backgroundColor: "$backgroundPress"
+  }, {
+    color: "$color12"
+  }, {
+    color: "$identityInk"
   }].flatMap(fragment => Object.values(fragment)).filter(value => typeof value === "string" && value.startsWith("$")).map(value => [hostWashVar(value.slice(1)), `var(--${value.slice(1)})`]));
-  const hostedButton = import_tamagui.isWeb && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  const hostedButton = import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
     style: {
       display: "contents",
       ...hostWashScope

package/dist/cjs/Button/index.native.js

@@ -361,8 +361,8 @@ function Button(param) {
     paddingHorizontal: paddingHorizontalProp,
     ...props
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4, _props_color, _ref5, _ref6, _ref7, _props_color1, _props_id;
-  var _parentScopeTheme_outlineColor;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _props_color, _ref6, _ref7, _ref8, _props_color1, _props_id;
+  var _parentScopeTheme_outlineColor, _pageTheme_identityInk;
   var {
     resolvedForm: formFromHook
   } = (0, import_utils.useFormField)({
@@ -513,12 +513,14 @@ function Button(param) {
   });
   var tierPaint = tier ? (0, import_theme3.controlTierPaint)(tier, darkScheme, elevatedGround) : void 0;
   var tierDisabled = tier && disabledState.style !== "dimWhole" ? (0, import_theme3.controlTierDisabled)(tier) : void 0;
+  var pageTheme = parentScopeTheme;
+  var hostTheme = (_ref1 = mediaPlate ? (0, import_tamagui.getConfig)().themes.dark : void 0) !== null && _ref1 !== void 0 ? _ref1 : pageTheme;
   var hostScoped = function hostScoped2(fragment) {
     return Object.fromEntries(Object.entries(fragment).map(function (param2) {
       var [key, value] = param2;
-      var _ref8;
-      var _parentScopeTheme_value_slice;
-      return [key, typeof value === "string" && value.startsWith("$") ? (_ref8 = (_parentScopeTheme_value_slice = parentScopeTheme[value.slice(1)]) === null || _parentScopeTheme_value_slice === void 0 ? void 0 : _parentScopeTheme_value_slice.val) !== null && _ref8 !== void 0 ? _ref8 : value : value];
+      var _ref9;
+      var _hostTheme_value_slice;
+      return [key, typeof value === "string" && value.startsWith("$") ? (_ref9 = (_hostTheme_value_slice = hostTheme[value.slice(1)]) === null || _hostTheme_value_slice === void 0 ? void 0 : _hostTheme_value_slice.val) !== null && _ref9 !== void 0 ? _ref9 : value : value];
     }));
   };
   var hostWashVar = function hostWashVar2(token) {
@@ -585,6 +587,10 @@ function Button(param) {
   var isSelected = selected !== null && selected !== void 0 ? selected : ariaPressedProp === true || ariaPressedProp === "true" ? true : void 0;
   var selectedFill = Boolean(isSelected) && !unavailable && !mediaPlate && !fieldGlyph;
   var barInk = accentInk && chromeless && !selectedFill && (!unavailable || frameless) && !confirmPlate ? labelled ? glyphTint.label : glyphTint.glyph : null;
+  var barInkPaint = import_tamagui.isWeb && barInk && !mediaPlate && ((_pageTheme_identityInk = pageTheme.identityInk) === null || _pageTheme_identityInk === void 0 ? void 0 : _pageTheme_identityInk.val) === barInk ? hostWash({
+    color: "$identityInk"
+  }).color : barInk;
+  var barGlyphInk = barInk && import_tamagui.isWeb && props.color == null ? "currentColor" : barInk;
   var inlineGlyph = iconButton && inline === true && !nested;
   var barGlyph = (iconButton || mediaPlate || confirmPlate) && !nested || labelled && chromeless && accentInk === true && edge === "start";
   var labelLine = labelLinePx(knobProps.body.fontFamily);
@@ -594,7 +600,7 @@ function Button(param) {
   var framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
   var accentFillHex = confirmPlate ? accentSolidFill(hostThemeName) : null;
   var confirmInk = accentFillHex && (0, import_theme3.contrastRatio)((0, import_theme3.relativeLuminance)("#ffffff"), (0, import_theme3.relativeLuminance)(accentFillHex)) >= import_theme3.GLYPH_CONTRAST_FLOOR ? "#ffffff" : "$color";
-  var plateInk = unavailable || barInk || outlinedInk ? void 0 : mediaPlate || iconButton && groupGround === "media" ? "$color12" : confirmPlate ? confirmInk : framedCircle && !activeThemeName ? hostScoped({
+  var plateInk = unavailable || barInk || outlinedInk ? void 0 : mediaPlate || iconButton && groupGround === "media" ? "$color12" : confirmPlate ? confirmInk : framedCircle && !activeThemeName ? hostWash({
     color: "$color12"
   }).color : void 0;
   var framedCirclePx = touch && typeof sizeProp !== "number" ? Math.max(sizeTokenPx(resolvedSize), import_theme3.MIN_PRESS_TARGET) : sizeTokenPx(resolvedSize);
@@ -608,7 +614,7 @@ function Button(param) {
   // it up to the same floor.
   Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8)) : recipe.iconSize;
   var barGlyphFloor = barGlyph && !framedCircle && !inlineGlyph && !nested;
-  var glyph = barGlyph || inlineGlyph || framedCircle ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk) : icon;
+  var glyph = barGlyph || inlineGlyph || framedCircle ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk) : icon;
   var labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
   var labelMaxFontScale = Math.min((0, import_theme3.maxFontScaleToFit)(labelBoxPx, nested ? (0, import_tamagui.getFontSize)(knobProps.label.fontSize) : recipe.fontSize, import_theme3.dynamicTypeFit.controlLabelFill), labelLine === void 0 ? Number.POSITIVE_INFINITY : (0, import_theme3.maxFontScaleToFit)(labelBoxPx, labelLine, 1));
   var renderLabelText = function renderLabelText2(label, key) {
@@ -630,8 +636,8 @@ function Button(param) {
       } : outlinedInk ? {
         color: outlinedInk
       } : void 0),
-      ...(barInk ? {
-        color: barInk
+      ...(barInkPaint ? {
+        color: barInkPaint
       } : void 0),
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground for the wash's AA ink (keepLabel keeps >=4.5:1).
@@ -650,10 +656,10 @@ function Button(param) {
   var labelContent = isBareTextChild(resolvedChildren) ? renderLabelText(resolvedChildren) : (flattenedChildren === null || flattenedChildren === void 0 ? void 0 : flattenedChildren.some(isBareTextChild)) ? wrapBareTextChildren(flattenedChildren, renderLabelText) : resolvedChildren;
   var hasIcon = icon || iconAfter || loading;
   var unavailableInk = unavailable ? disabledText.color : void 0;
-  var nativeIconColor = (_ref1 = (_ref2 = (_ref3 = (_ref4 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : unavailableInk) !== null && _ref4 !== void 0 ? _ref4 : barInk) !== null && _ref3 !== void 0 ? _ref3 : plateInk) !== null && _ref2 !== void 0 ? _ref2 : textColor ? outlinedOnHost ? hostWash({
+  var nativeIconColor = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_props_color = props.color) !== null && _props_color !== void 0 ? _props_color : unavailableInk) !== null && _ref5 !== void 0 ? _ref5 : barInk) !== null && _ref4 !== void 0 ? _ref4 : plateInk) !== null && _ref3 !== void 0 ? _ref3 : textColor ? outlinedOnHost ? hostWash({
     color: textColor
-  }).color : textColor : outlinedInk) !== null && _ref1 !== void 0 ? _ref1 : "$color";
-  var webInk = (_ref5 = (_ref6 = (_ref7 = (_props_color1 = props.color) !== null && _props_color1 !== void 0 ? _props_color1 : unavailableInk) !== null && _ref7 !== void 0 ? _ref7 : barInk) !== null && _ref6 !== void 0 ? _ref6 : plateInk) !== null && _ref5 !== void 0 ? _ref5 : outlinedInk;
+  }).color : textColor : outlinedInk) !== null && _ref2 !== void 0 ? _ref2 : "$color";
+  var webInk = (_ref6 = (_ref7 = (_ref8 = (_props_color1 = props.color) !== null && _props_color1 !== void 0 ? _props_color1 : unavailableInk) !== null && _ref8 !== void 0 ? _ref8 : barInk) !== null && _ref7 !== void 0 ? _ref7 : plateInk) !== null && _ref6 !== void 0 ? _ref6 : outlinedInk;
   var webGlyphInk = import_tamagui.isWeb && webInk != null ? "currentColor" : void 0;
   var iconElement = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
@@ -672,7 +678,7 @@ function Button(param) {
       color: nativeIconColor
     })
   }) : null;
-  var glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barInk) : iconAfter;
+  var glyphAfter = iconAfter && (barGlyph || inlineGlyph || framedCircle) ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight, barGlyphFloor, barGlyphInk) : iconAfter;
   var iconAfterElement = glyphAfter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
     children: import_tamagui.isWeb ? normalizeButtonIcon(glyphAfter, iconSize, webGlyphInk) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeButtonIcon, {
@@ -719,14 +725,14 @@ function Button(param) {
   var restFill = selectedFill ? outlined ? "$background" : "$backgroundPress" : tierPaint === null || tierPaint === void 0 ? void 0 : tierPaint.rest;
   var plainTier = tier === "plain";
   var glyphState = iconButton && !selectedFill;
-  var iconHover = glyphState ? import_tamagui.isWeb ? hostScoped({
+  var iconHover = glyphState ? import_tamagui.isWeb ? hostWash({
     backgroundColor: "$backgroundHover"
   }) : {
     backgroundColor: "transparent"
   } : mediaPlate ? {
     backgroundColor: "$shadow5"
   } : void 0;
-  var iconPress = glyphState ? import_tamagui.isWeb ? hostScoped({
+  var iconPress = glyphState ? import_tamagui.isWeb ? hostWash({
     backgroundColor: "$backgroundPress"
   }) : GlassView || glassGroup ? {
     backgroundColor: "transparent"
@@ -820,8 +826,8 @@ function Button(param) {
     ...(outlinedInk ? {
       color: outlinedInk
     } : void 0),
-    ...(barInk ? {
-      color: barInk
+    ...(barInkPaint ? {
+      color: barInkPaint
     } : void 0),
     ...(plateInk ? {
       color: plateInk
@@ -877,15 +883,15 @@ function Button(param) {
     },
     // DG-A11Y-01 / LC-71: house keyboard ring (≥2px `$outlineColor`) on the
     // whole painted frame. Rest and mouse-focus paint none. Parent-scope
-    // `$outlineColor` literal: intent buttons re-theme the frame, and those
+    // `$outlineColor`: intent buttons re-theme the frame, and those
     // sub-themes derive a ring for their own inverted surfaces — invisible
     // on the page the ring actually draws on (measured 1.17:1 on the accent
     // pagination button).
     focusVisibleStyle: (0, import_theme3.ensureFocusVisibleRing)({
       ...control.focusVisibleKnobProps,
-      ...(pageOutlineColor ? {
-        outlineColor: pageOutlineColor
-      } : void 0)
+      ...(pageOutlineColor ? hostWash({
+        outlineColor: "$outlineColor"
+      }) : void 0)
     }),
     onPress: handlePress,
     ...(import_tamagui.isWeb ? {
@@ -1012,6 +1018,16 @@ function Button(param) {
     color: hostAccentInk
   }, {
     color: textColor
+  }, {
+    outlineColor: "$outlineColor"
+  }, {
+    backgroundColor: "$backgroundHover"
+  }, {
+    backgroundColor: "$backgroundPress"
+  }, {
+    color: "$color12"
+  }, {
+    color: "$identityInk"
   }].flatMap(function (fragment) {
     return Object.values(fragment);
   }).filter(function (value) {
@@ -1019,7 +1035,7 @@ function Button(param) {
   }).map(function (value) {
     return [hostWashVar(value.slice(1)), `var(--${value.slice(1)})`];
   }));
-  var hostedButton = import_tamagui.isWeb && activeThemeName && import_theme3.solidPaletteThemes.has(activeThemeName) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+  var hostedButton = import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
     style: {
       display: "contents",
       ...hostWashScope