@tamagui/core 2.0.0-1768427228811 → 2.0.0-1768530912818

package/dist/native.cjs

@@ -8438,9 +8438,179 @@ var getTokens = function() {
 };
 function setupDev(conf2) {
 }
-var cache$4 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(strIn) {
+var matchMediaImpl = matchMediaFallback, matchMedia$1 = function() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+  return matchMediaImpl(...args);
+};
+function matchMediaFallback(query2) {
+  return !process.env.IS_STATIC && false, {
+    match: function(a, b2) {
+      return false;
+    },
+    addListener: function() {
+    },
+    removeListener: function() {
+    },
+    matches: false
+  };
+}
+function setupMatchMedia(_2) {
+  matchMediaImpl = _2, globalThis.matchMedia = _2;
+}
+exports.mediaState = // development only safeguard
+{};
+var mediaQueryConfig = {}, getMedia = function() {
+  return exports.mediaState;
+}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
+  if (key[0] !== "$") return false;
+  if (mediaKeys.has(key)) return true;
+  var match = key.match(mediaKeyRegex);
+  return match ? match[1] : false;
+}, initState, mediaKeysOrdered, getMediaKeyImportance = function(key) {
+  return mediaKeysOrdered.indexOf(key) + 100;
+}, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
+  var {
+    media
+  } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
+  if (media) {
+    mediaVersion++;
+    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
+  }
+};
+function unlisten() {
+  dispose.forEach(function(cb) {
+    return cb();
+  }), dispose.clear();
+}
+var setupVersion = -1;
+function setupMediaListeners() {
+  var _loop2 = function(key2) {
+    var str = mediaObjectToString(mediaQueryConfig[key2]), getMatch = function() {
+      return matchMedia$1(str);
+    }, match = getMatch();
+    if (!match) throw new Error("⚠️ No match");
+    match.addListener(update2), dispose.add(function() {
+      match.removeListener(update2);
+    });
+    function update2() {
+      var next = !!getMatch().matches;
+      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
+        [key2]: next
+      }), updateMediaListeners());
+    }
+    update2();
+  };
+  if (!process.env.IS_STATIC && setupVersion !== mediaVersion) {
+    setupVersion = mediaVersion, unlisten();
+    for (var key in mediaQueryConfig) _loop2(key);
+  }
+}
+var listeners = /* @__PURE__ */ new Set();
+function updateMediaListeners() {
+  listeners.forEach(function(cb) {
+    return cb(exports.mediaState);
+  });
+}
+var States = /* @__PURE__ */ new WeakMap();
+function setMediaShouldUpdate(ref, enabled, keys) {
+  var cur = States.get(ref);
+  (!cur || cur.enabled !== enabled || keys) && States.set(ref, __spreadProps(__spreadValues({}, cur), {
+    enabled,
+    keys
+  }));
+}
+function subscribe(subscriber) {
+  return listeners.add(subscriber), function() {
+    listeners.delete(subscriber);
+  };
+}
+function useMedia(componentContext, debug) {
+  var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
+  internalRef.current || (internalRef.current = {
+    keys: /* @__PURE__ */ new Set(),
+    lastState: exports.mediaState
+  }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
+  var {
+    keys
+  } = internalRef.current;
+  keys.size && keys.clear();
+  var state = React.useSyncExternalStore(subscribe, function() {
+    var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
+      lastState,
+      pendingState
+    } = internalRef.current;
+    if (!curKeys2.size) return lastState;
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    try {
+      for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var key = _step.value;
+        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
+      }
+    } catch (err) {
+      _didIteratorError = true, _iteratorError = err;
+    } finally {
+      try {
+        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+      } finally {
+        if (_didIteratorError) throw _iteratorError;
+      }
+    }
+    return lastState;
+  }, getServerSnapshot);
+  return new Proxy(state, {
+    get(_2, key) {
+      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
+    }
+  });
+}
+var getServerSnapshot = function() {
+  return initState;
+}, disableMediaTouch = false;
+function _disableMediaTouch(val) {
+  disableMediaTouch = val;
+}
+function getMediaState(mediaGroups, layout) {
+  disableMediaTouch = true;
+  var res;
+  try {
+    res = Object.fromEntries([...mediaGroups].map(function(mediaKey) {
+      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
+    }));
+  } finally {
+    disableMediaTouch = false;
+  }
+  return res;
+}
+var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
+  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
+  return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
+};
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, function(m) {
+    return `-${m.toLowerCase()}`;
+  }).toLowerCase();
+}
+var cache$4 = /* @__PURE__ */ new WeakMap();
+function mediaObjectToString(query2, key) {
+  if (typeof query2 == "string") return query2;
+  if (cache$4.has(query2)) return cache$4.get(query2);
+  var res = Object.entries(query2).map(function(param) {
+    var [feature, value] = param;
+    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
+  }).join(" and ");
+  return cache$4.set(query2, res), res;
+}
+function mediaKeyMatch(key, dimensions2) {
+  var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query2) {
+    var expectedVal = +mediaQueries[query2], isMax = query2.startsWith("max"), isWidth = query2.endsWith("Width"), givenVal = dimensions2[isWidth ? "width" : "height"];
+    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
+  });
+  return result;
+}
+var cache$3 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(strIn) {
   var hashMin = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 10;
-  if (cache$4.has(strIn)) return cache$4.get(strIn);
+  if (cache$3.has(strIn)) return cache$3.get(strIn);
   var str = strIn;
   str[0] === "v" && str.startsWith("var(") && (str = str.slice(6, str.length - 1));
   for (var hash = 0, valids = "", added = 0, len = str.length, i = 0; i < len; i++) {
@@ -8458,7 +8628,7 @@ var cache$4 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(st
     hash = hashChar(hash, str[i]);
   }
   var res = valids + (hash ? Math.abs(hash) : "");
-  return cacheSize > 1e4 && (cache$4.clear(), cacheSize = 0), cache$4.set(strIn, res), cacheSize++, res;
+  return cacheSize > 1e4 && (cache$3.clear(), cacheSize = 0), cache$3.set(strIn, res), cacheSize++, res;
 }, hashChar = function(hash, c) {
   return Math.imul(31, hash) + c.charCodeAt(0) | 0;
 };
@@ -8917,6 +9087,26 @@ function px(value) {
 function getOppositeScheme(scheme) {
   return scheme === "dark" ? "light" : "dark";
 }
+var colorStyleKeys = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  borderBlockColor: true,
+  borderBlockEndColor: true,
+  borderBlockStartColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+  tintColor: true,
+  outlineColor: true
+};
+function isColorStyleKey(key) {
+  return colorStyleKeys[key] === true;
+}
 function getDynamicVal(param) {
   var {
     scheme,
@@ -9166,11 +9356,11 @@ function doesRootSchemeMatchSystem() {
   var _getRootThemeState;
   return ((_getRootThemeState = getRootThemeState()) === null || _getRootThemeState === void 0 ? void 0 : _getRootThemeState.scheme) === Appearance.getColorScheme();
 }
-var cache$3 = /* @__PURE__ */ new Map(), curKeys, curProps, curState, emptyObject = {};
+var cache$2 = /* @__PURE__ */ new Map(), curKeys, curProps, curState, emptyObject = {};
 function getThemeProxied(_props, _state, _keys) {
   if (!(_state == null ? void 0 : _state.theme)) return emptyObject;
-  if (curKeys = _keys, curProps = _props, curState = _state, cache$3.has(curState.theme)) {
-    var proxied = cache$3.get(curState.theme);
+  if (curKeys = _keys, curProps = _props, curState = _state, cache$2.has(curState.theme)) {
+    var proxied = cache$2.get(curState.theme);
     return proxied;
   }
   var config = getConfig();
@@ -9202,7 +9392,7 @@ function getThemeProxied(_props, _state, _keys) {
     });
     return [[key, proxied2], [`$${key}`, proxied2]];
   }));
-  return cache$3.set(_state.theme, proxied1), proxied1;
+  return cache$2.set(_state.theme, proxied1), proxied1;
 }
 var EMPTY = {}, useTheme = function() {
   var [theme] = useThemeWithState(EMPTY), res = theme;
@@ -9218,10 +9408,14 @@ var _withStableStyle = function(Component, styleProvider) {
       _expressions = []
     } = _a, rest = __objRest(_a, [
       "_expressions"
-    ]), theme = useTheme();
+    ]), theme = useTheme(), hasMediaKeys = _expressions.some(function(expr) {
+      return typeof expr == "string";
+    }), media = hasMediaKeys ? useMedia() : null, resolvedExpressions = media ? _expressions.map(function(expr) {
+      return typeof expr == "string" ? media[expr] : expr;
+    }) : _expressions;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, __spreadValues({
       ref,
-      style: styleProvider(theme, _expressions)
+      style: styleProvider(theme, resolvedExpressions)
     }, rest));
   });
 };
@@ -9254,176 +9448,6 @@ var defaultComponentState = {
 }), defaultComponentStateShouldEnter = __spreadProps(__spreadValues({}, defaultComponentState), {
   unmounted: "should-enter"
 });
-var matchMediaImpl = matchMediaFallback, matchMedia$1 = function() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-  return matchMediaImpl(...args);
-};
-function matchMediaFallback(query2) {
-  return !process.env.IS_STATIC && false, {
-    match: function(a, b2) {
-      return false;
-    },
-    addListener: function() {
-    },
-    removeListener: function() {
-    },
-    matches: false
-  };
-}
-function setupMatchMedia(_2) {
-  matchMediaImpl = _2, globalThis.matchMedia = _2;
-}
-exports.mediaState = // development only safeguard
-{};
-var mediaQueryConfig = {}, getMedia = function() {
-  return exports.mediaState;
-}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
-  if (key[0] !== "$") return false;
-  if (mediaKeys.has(key)) return true;
-  var match = key.match(mediaKeyRegex);
-  return match ? match[1] : false;
-}, initState, mediaKeysOrdered, getMediaKeyImportance = function(key) {
-  return mediaKeysOrdered.indexOf(key) + 100;
-}, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
-  var {
-    media
-  } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
-  if (media) {
-    mediaVersion++;
-    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
-    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
-  }
-};
-function unlisten() {
-  dispose.forEach(function(cb) {
-    return cb();
-  }), dispose.clear();
-}
-var setupVersion = -1;
-function setupMediaListeners() {
-  var _loop2 = function(key2) {
-    var str = mediaObjectToString(mediaQueryConfig[key2]), getMatch = function() {
-      return matchMedia$1(str);
-    }, match = getMatch();
-    if (!match) throw new Error("⚠️ No match");
-    match.addListener(update2), dispose.add(function() {
-      match.removeListener(update2);
-    });
-    function update2() {
-      var next = !!getMatch().matches;
-      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
-        [key2]: next
-      }), updateMediaListeners());
-    }
-    update2();
-  };
-  if (!process.env.IS_STATIC && setupVersion !== mediaVersion) {
-    setupVersion = mediaVersion, unlisten();
-    for (var key in mediaQueryConfig) _loop2(key);
-  }
-}
-var listeners = /* @__PURE__ */ new Set();
-function updateMediaListeners() {
-  listeners.forEach(function(cb) {
-    return cb(exports.mediaState);
-  });
-}
-var States = /* @__PURE__ */ new WeakMap();
-function setMediaShouldUpdate(ref, enabled, keys) {
-  var cur = States.get(ref);
-  (!cur || cur.enabled !== enabled || keys) && States.set(ref, __spreadProps(__spreadValues({}, cur), {
-    enabled,
-    keys
-  }));
-}
-function subscribe(subscriber) {
-  return listeners.add(subscriber), function() {
-    listeners.delete(subscriber);
-  };
-}
-function useMedia(componentContext, debug) {
-  var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
-  internalRef.current || (internalRef.current = {
-    keys: /* @__PURE__ */ new Set(),
-    lastState: exports.mediaState
-  }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
-  var {
-    keys
-  } = internalRef.current;
-  keys.size && keys.clear();
-  var state = React.useSyncExternalStore(subscribe, function() {
-    var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
-      lastState,
-      pendingState
-    } = internalRef.current;
-    if (!curKeys2.size) return lastState;
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-    try {
-      for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var key = _step.value;
-        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
-      }
-    } catch (err) {
-      _didIteratorError = true, _iteratorError = err;
-    } finally {
-      try {
-        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-      } finally {
-        if (_didIteratorError) throw _iteratorError;
-      }
-    }
-    return lastState;
-  }, getServerSnapshot);
-  return new Proxy(state, {
-    get(_2, key) {
-      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
-    }
-  });
-}
-var getServerSnapshot = function() {
-  return initState;
-}, disableMediaTouch = false;
-function _disableMediaTouch(val) {
-  disableMediaTouch = val;
-}
-function getMediaState(mediaGroups, layout) {
-  disableMediaTouch = true;
-  var res;
-  try {
-    res = Object.fromEntries([...mediaGroups].map(function(mediaKey) {
-      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
-    }));
-  } finally {
-    disableMediaTouch = false;
-  }
-  return res;
-}
-var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
-  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
-  return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
-};
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, function(m) {
-    return `-${m.toLowerCase()}`;
-  }).toLowerCase();
-}
-var cache$2 = /* @__PURE__ */ new WeakMap();
-function mediaObjectToString(query2, key) {
-  if (typeof query2 == "string") return query2;
-  if (cache$2.has(query2)) return cache$2.get(query2);
-  var res = Object.entries(query2).map(function(param) {
-    var [feature, value] = param;
-    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
-  }).join(" and ");
-  return cache$2.set(query2, res), res;
-}
-function mediaKeyMatch(key, dimensions2) {
-  var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query2) {
-    var expectedVal = +mediaQueries[query2], isMax = query2.startsWith("max"), isWidth = query2.endsWith("Width"), givenVal = dimensions2[isWidth ? "width" : "height"];
-    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
-  });
-  return result;
-}
 function getGroupPropParts(groupProp) {
   var mediaQueries = getMedia(), [_2, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
   return media ? pseudo = part4 : pseudo = part3, {
@@ -10210,12 +10234,16 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             }
             var mediaStyle1 = getSubStyle(styleState, key4, val2, true), importanceBump = 0;
             if (isThemeMedia) {
-              if (dynamicThemeAccess = true, isIos && getSetting("fastSchemeChange")) {
+              if (isIos && getSetting("fastSchemeChange")) {
                 var _styleState3;
                 (_styleState3 = styleState).style || (_styleState3.style = {});
-                var scheme = mediaKeyShort, oppositeScheme = getOppositeScheme(mediaKeyShort), themeOriginalValues = styleOriginalValues.get(mediaStyle1);
+                var scheme = mediaKeyShort, oppositeScheme = getOppositeScheme(mediaKeyShort), themeOriginalValues = styleOriginalValues.get(mediaStyle1), isCurrentScheme = themeName === scheme || themeName.startsWith(scheme);
                 for (var subKey1 in mediaStyle1) {
                   var _$val1 = extractValueFromDynamic(mediaStyle1[subKey1], scheme), existing = styleState.style[subKey1];
+                  if (!isColorStyleKey(subKey1)) {
+                    dynamicThemeAccess = true, isCurrentScheme ? mediaStyle1[subKey1] = _$val1 : delete mediaStyle1[subKey1];
+                    continue;
+                  }
                   if (existing == null ? void 0 : existing.dynamic) existing.dynamic[scheme] = _$val1, mediaStyle1[subKey1] = existing;
                   else {
                     var oppositeVal = extractValueFromDynamic(existing, oppositeScheme);
@@ -10226,7 +10254,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                     }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority, false, themeOriginalValues == null ? void 0 : themeOriginalValues[subKey1]);
                   }
                 }
-              } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
+              } else if (dynamicThemeAccess = true, !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
@@ -10285,9 +10313,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null;
-  props.space;
-  var hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
+  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
   var mediaStylesSeen = 0, validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
   var styleState = {

package/dist/test.native.cjs

@@ -590,9 +590,179 @@ var getTokens = function() {
 };
 function setupDev(conf2) {
 }
-var cache$4 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(strIn) {
+var matchMediaImpl = matchMediaFallback, matchMedia$1 = function() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+  return matchMediaImpl(...args);
+};
+function matchMediaFallback(query) {
+  return !process.env.IS_STATIC && false, {
+    match: function(a, b2) {
+      return false;
+    },
+    addListener: function() {
+    },
+    removeListener: function() {
+    },
+    matches: false
+  };
+}
+function setupMatchMedia(_2) {
+  matchMediaImpl = _2, globalThis.matchMedia = _2;
+}
+exports.mediaState = // development only safeguard
+{};
+var mediaQueryConfig = {}, getMedia = function() {
+  return exports.mediaState;
+}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
+  if (key[0] !== "$") return false;
+  if (mediaKeys.has(key)) return true;
+  var match = key.match(mediaKeyRegex);
+  return match ? match[1] : false;
+}, initState, mediaKeysOrdered, getMediaKeyImportance = function(key) {
+  return mediaKeysOrdered.indexOf(key) + 100;
+}, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
+  var {
+    media
+  } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
+  if (media) {
+    mediaVersion++;
+    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
+  }
+};
+function unlisten() {
+  dispose.forEach(function(cb) {
+    return cb();
+  }), dispose.clear();
+}
+var setupVersion = -1;
+function setupMediaListeners() {
+  var _loop2 = function(key2) {
+    var str = mediaObjectToString(mediaQueryConfig[key2]), getMatch = function() {
+      return matchMedia$1(str);
+    }, match = getMatch();
+    if (!match) throw new Error("⚠️ No match");
+    match.addListener(update), dispose.add(function() {
+      match.removeListener(update);
+    });
+    function update() {
+      var next = !!getMatch().matches;
+      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
+        [key2]: next
+      }), updateMediaListeners());
+    }
+    update();
+  };
+  if (!process.env.IS_STATIC && setupVersion !== mediaVersion) {
+    setupVersion = mediaVersion, unlisten();
+    for (var key in mediaQueryConfig) _loop2(key);
+  }
+}
+var listeners = /* @__PURE__ */ new Set();
+function updateMediaListeners() {
+  listeners.forEach(function(cb) {
+    return cb(exports.mediaState);
+  });
+}
+var States = /* @__PURE__ */ new WeakMap();
+function setMediaShouldUpdate(ref, enabled, keys) {
+  var cur = States.get(ref);
+  (!cur || cur.enabled !== enabled || keys) && States.set(ref, __spreadProps(__spreadValues({}, cur), {
+    enabled,
+    keys
+  }));
+}
+function subscribe(subscriber) {
+  return listeners.add(subscriber), function() {
+    listeners.delete(subscriber);
+  };
+}
+function useMedia(componentContext, debug) {
+  var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
+  internalRef.current || (internalRef.current = {
+    keys: /* @__PURE__ */ new Set(),
+    lastState: exports.mediaState
+  }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
+  var {
+    keys
+  } = internalRef.current;
+  keys.size && keys.clear();
+  var state = React.useSyncExternalStore(subscribe, function() {
+    var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
+      lastState,
+      pendingState
+    } = internalRef.current;
+    if (!curKeys2.size) return lastState;
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    try {
+      for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var key = _step.value;
+        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
+      }
+    } catch (err) {
+      _didIteratorError = true, _iteratorError = err;
+    } finally {
+      try {
+        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+      } finally {
+        if (_didIteratorError) throw _iteratorError;
+      }
+    }
+    return lastState;
+  }, getServerSnapshot);
+  return new Proxy(state, {
+    get(_2, key) {
+      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
+    }
+  });
+}
+var getServerSnapshot = function() {
+  return initState;
+}, disableMediaTouch = false;
+function _disableMediaTouch(val) {
+  disableMediaTouch = val;
+}
+function getMediaState(mediaGroups, layout) {
+  disableMediaTouch = true;
+  var res;
+  try {
+    res = Object.fromEntries([...mediaGroups].map(function(mediaKey) {
+      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
+    }));
+  } finally {
+    disableMediaTouch = false;
+  }
+  return res;
+}
+var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
+  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
+  return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
+};
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, function(m) {
+    return `-${m.toLowerCase()}`;
+  }).toLowerCase();
+}
+var cache$4 = /* @__PURE__ */ new WeakMap();
+function mediaObjectToString(query, key) {
+  if (typeof query == "string") return query;
+  if (cache$4.has(query)) return cache$4.get(query);
+  var res = Object.entries(query).map(function(param) {
+    var [feature, value] = param;
+    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
+  }).join(" and ");
+  return cache$4.set(query, res), res;
+}
+function mediaKeyMatch(key, dimensions) {
+  var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query) {
+    var expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
+    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
+  });
+  return result;
+}
+var cache$3 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(strIn) {
   var hashMin = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 10;
-  if (cache$4.has(strIn)) return cache$4.get(strIn);
+  if (cache$3.has(strIn)) return cache$3.get(strIn);
   var str = strIn;
   str[0] === "v" && str.startsWith("var(") && (str = str.slice(6, str.length - 1));
   for (var hash = 0, valids = "", added = 0, len = str.length, i = 0; i < len; i++) {
@@ -610,7 +780,7 @@ var cache$4 = /* @__PURE__ */ new Map(), cacheSize = 0, simpleHash = function(st
     hash = hashChar(hash, str[i]);
   }
   var res = valids + (hash ? Math.abs(hash) : "");
-  return cacheSize > 1e4 && (cache$4.clear(), cacheSize = 0), cache$4.set(strIn, res), cacheSize++, res;
+  return cacheSize > 1e4 && (cache$3.clear(), cacheSize = 0), cache$3.set(strIn, res), cacheSize++, res;
 }, hashChar = function(hash, c) {
   return Math.imul(31, hash) + c.charCodeAt(0) | 0;
 };
@@ -1069,6 +1239,26 @@ function px(value) {
 function getOppositeScheme(scheme) {
   return scheme === "dark" ? "light" : "dark";
 }
+var colorStyleKeys = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  borderBlockColor: true,
+  borderBlockEndColor: true,
+  borderBlockStartColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+  tintColor: true,
+  outlineColor: true
+};
+function isColorStyleKey(key) {
+  return colorStyleKeys[key] === true;
+}
 function getDynamicVal(param) {
   var {
     scheme,
@@ -1318,11 +1508,11 @@ function doesRootSchemeMatchSystem() {
   var _getRootThemeState;
   return ((_getRootThemeState = getRootThemeState()) === null || _getRootThemeState === void 0 ? void 0 : _getRootThemeState.scheme) === reactNative.Appearance.getColorScheme();
 }
-var cache$3 = /* @__PURE__ */ new Map(), curKeys, curProps, curState, emptyObject = {};
+var cache$2 = /* @__PURE__ */ new Map(), curKeys, curProps, curState, emptyObject = {};
 function getThemeProxied(_props, _state, _keys) {
   if (!(_state == null ? void 0 : _state.theme)) return emptyObject;
-  if (curKeys = _keys, curProps = _props, curState = _state, cache$3.has(curState.theme)) {
-    var proxied = cache$3.get(curState.theme);
+  if (curKeys = _keys, curProps = _props, curState = _state, cache$2.has(curState.theme)) {
+    var proxied = cache$2.get(curState.theme);
     return proxied;
   }
   var config = getConfig();
@@ -1354,7 +1544,7 @@ function getThemeProxied(_props, _state, _keys) {
     });
     return [[key, proxied2], [`$${key}`, proxied2]];
   }));
-  return cache$3.set(_state.theme, proxied1), proxied1;
+  return cache$2.set(_state.theme, proxied1), proxied1;
 }
 var EMPTY = {}, useTheme = function() {
   var [theme] = useThemeWithState(EMPTY), res = theme;
@@ -1370,10 +1560,14 @@ var _withStableStyle = function(Component, styleProvider) {
       _expressions = []
     } = _a, rest = __objRest(_a, [
       "_expressions"
-    ]), theme = useTheme();
+    ]), theme = useTheme(), hasMediaKeys = _expressions.some(function(expr) {
+      return typeof expr == "string";
+    }), media = hasMediaKeys ? useMedia() : null, resolvedExpressions = media ? _expressions.map(function(expr) {
+      return typeof expr == "string" ? media[expr] : expr;
+    }) : _expressions;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Component, __spreadValues({
       ref,
-      style: styleProvider(theme, _expressions)
+      style: styleProvider(theme, resolvedExpressions)
     }, rest));
   });
 };
@@ -1406,176 +1600,6 @@ var defaultComponentState = {
 }), defaultComponentStateShouldEnter = __spreadProps(__spreadValues({}, defaultComponentState), {
   unmounted: "should-enter"
 });
-var matchMediaImpl = matchMediaFallback, matchMedia$1 = function() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-  return matchMediaImpl(...args);
-};
-function matchMediaFallback(query) {
-  return !process.env.IS_STATIC && false, {
-    match: function(a, b2) {
-      return false;
-    },
-    addListener: function() {
-    },
-    removeListener: function() {
-    },
-    matches: false
-  };
-}
-function setupMatchMedia(_2) {
-  matchMediaImpl = _2, globalThis.matchMedia = _2;
-}
-exports.mediaState = // development only safeguard
-{};
-var mediaQueryConfig = {}, getMedia = function() {
-  return exports.mediaState;
-}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
-  if (key[0] !== "$") return false;
-  if (mediaKeys.has(key)) return true;
-  var match = key.match(mediaKeyRegex);
-  return match ? match[1] : false;
-}, initState, mediaKeysOrdered, getMediaKeyImportance = function(key) {
-  return mediaKeysOrdered.indexOf(key) + 100;
-}, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
-  var {
-    media
-  } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
-  if (media) {
-    mediaVersion++;
-    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
-    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
-  }
-};
-function unlisten() {
-  dispose.forEach(function(cb) {
-    return cb();
-  }), dispose.clear();
-}
-var setupVersion = -1;
-function setupMediaListeners() {
-  var _loop2 = function(key2) {
-    var str = mediaObjectToString(mediaQueryConfig[key2]), getMatch = function() {
-      return matchMedia$1(str);
-    }, match = getMatch();
-    if (!match) throw new Error("⚠️ No match");
-    match.addListener(update), dispose.add(function() {
-      match.removeListener(update);
-    });
-    function update() {
-      var next = !!getMatch().matches;
-      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
-        [key2]: next
-      }), updateMediaListeners());
-    }
-    update();
-  };
-  if (!process.env.IS_STATIC && setupVersion !== mediaVersion) {
-    setupVersion = mediaVersion, unlisten();
-    for (var key in mediaQueryConfig) _loop2(key);
-  }
-}
-var listeners = /* @__PURE__ */ new Set();
-function updateMediaListeners() {
-  listeners.forEach(function(cb) {
-    return cb(exports.mediaState);
-  });
-}
-var States = /* @__PURE__ */ new WeakMap();
-function setMediaShouldUpdate(ref, enabled, keys) {
-  var cur = States.get(ref);
-  (!cur || cur.enabled !== enabled || keys) && States.set(ref, __spreadProps(__spreadValues({}, cur), {
-    enabled,
-    keys
-  }));
-}
-function subscribe(subscriber) {
-  return listeners.add(subscriber), function() {
-    listeners.delete(subscriber);
-  };
-}
-function useMedia(componentContext, debug) {
-  var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
-  internalRef.current || (internalRef.current = {
-    keys: /* @__PURE__ */ new Set(),
-    lastState: exports.mediaState
-  }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
-  var {
-    keys
-  } = internalRef.current;
-  keys.size && keys.clear();
-  var state = React.useSyncExternalStore(subscribe, function() {
-    var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
-      lastState,
-      pendingState
-    } = internalRef.current;
-    if (!curKeys2.size) return lastState;
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-    try {
-      for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var key = _step.value;
-        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
-      }
-    } catch (err) {
-      _didIteratorError = true, _iteratorError = err;
-    } finally {
-      try {
-        !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-      } finally {
-        if (_didIteratorError) throw _iteratorError;
-      }
-    }
-    return lastState;
-  }, getServerSnapshot);
-  return new Proxy(state, {
-    get(_2, key) {
-      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
-    }
-  });
-}
-var getServerSnapshot = function() {
-  return initState;
-}, disableMediaTouch = false;
-function _disableMediaTouch(val) {
-  disableMediaTouch = val;
-}
-function getMediaState(mediaGroups, layout) {
-  disableMediaTouch = true;
-  var res;
-  try {
-    res = Object.fromEntries([...mediaGroups].map(function(mediaKey) {
-      return [mediaKey, mediaKeyMatch(mediaKey, layout)];
-    }));
-  } finally {
-    disableMediaTouch = false;
-  }
-  return res;
-}
-var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
-  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
-  return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
-};
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, function(m) {
-    return `-${m.toLowerCase()}`;
-  }).toLowerCase();
-}
-var cache$2 = /* @__PURE__ */ new WeakMap();
-function mediaObjectToString(query, key) {
-  if (typeof query == "string") return query;
-  if (cache$2.has(query)) return cache$2.get(query);
-  var res = Object.entries(query).map(function(param) {
-    var [feature, value] = param;
-    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
-  }).join(" and ");
-  return cache$2.set(query, res), res;
-}
-function mediaKeyMatch(key, dimensions) {
-  var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query) {
-    var expectedVal = +mediaQueries[query], isMax = query.startsWith("max"), isWidth = query.endsWith("Width"), givenVal = dimensions[isWidth ? "width" : "height"];
-    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
-  });
-  return result;
-}
 function getGroupPropParts(groupProp) {
   var mediaQueries = getMedia(), [_2, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
   return media ? pseudo = part4 : pseudo = part3, {
@@ -2905,12 +2929,16 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             }
             var mediaStyle1 = getSubStyle(styleState, key4, val2, true), importanceBump = 0;
             if (isThemeMedia) {
-              if (dynamicThemeAccess = true, isIos && getSetting("fastSchemeChange")) {
+              if (isIos && getSetting("fastSchemeChange")) {
                 var _styleState3;
                 (_styleState3 = styleState).style || (_styleState3.style = {});
-                var scheme = mediaKeyShort, oppositeScheme = getOppositeScheme(mediaKeyShort), themeOriginalValues = styleOriginalValues.get(mediaStyle1);
+                var scheme = mediaKeyShort, oppositeScheme = getOppositeScheme(mediaKeyShort), themeOriginalValues = styleOriginalValues.get(mediaStyle1), isCurrentScheme = themeName === scheme || themeName.startsWith(scheme);
                 for (var subKey1 in mediaStyle1) {
                   var _$val1 = extractValueFromDynamic(mediaStyle1[subKey1], scheme), existing = styleState.style[subKey1];
+                  if (!isColorStyleKey(subKey1)) {
+                    dynamicThemeAccess = true, isCurrentScheme ? mediaStyle1[subKey1] = _$val1 : delete mediaStyle1[subKey1];
+                    continue;
+                  }
                   if (existing == null ? void 0 : existing.dynamic) existing.dynamic[scheme] = _$val1, mediaStyle1[subKey1] = existing;
                   else {
                     var oppositeVal = extractValueFromDynamic(existing, oppositeScheme);
@@ -2921,7 +2949,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                     }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority, false, themeOriginalValues == null ? void 0 : themeOriginalValues[subKey1]);
                   }
                 }
-              } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
+              } else if (dynamicThemeAccess = true, !(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
@@ -2980,9 +3008,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null;
-  props.space;
-  var hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
+  } = staticConfig, viewProps = {}, mediaState = styleProps.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
   var mediaStylesSeen = 0, validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
   var styleState = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "2.0.0-1768427228811",
+  "version": "2.0.0-1768530912818",
   "type": "module",
   "source": "src/index.tsx",
   "main": "dist/cjs",
@@ -33,18 +33,18 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/helpers": "2.0.0-1768427228811",
-    "@tamagui/react-native-media-driver": "2.0.0-1768427228811",
-    "@tamagui/react-native-use-pressable": "2.0.0-1768427228811",
-    "@tamagui/react-native-use-responder-events": "2.0.0-1768427228811",
-    "@tamagui/use-element-layout": "2.0.0-1768427228811",
-    "@tamagui/use-event": "2.0.0-1768427228811",
-    "@tamagui/web": "2.0.0-1768427228811"
+    "@tamagui/helpers": "2.0.0-1768530912818",
+    "@tamagui/react-native-media-driver": "2.0.0-1768530912818",
+    "@tamagui/react-native-use-pressable": "2.0.0-1768530912818",
+    "@tamagui/react-native-use-responder-events": "2.0.0-1768530912818",
+    "@tamagui/use-element-layout": "2.0.0-1768530912818",
+    "@tamagui/use-event": "2.0.0-1768530912818",
+    "@tamagui/web": "2.0.0-1768530912818"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768427228811",
-    "@tamagui/native-bundle": "2.0.0-1768427228811",
-    "@tamagui/react-native-web-lite": "2.0.0-1768427228811",
+    "@tamagui/build": "2.0.0-1768530912818",
+    "@tamagui/native-bundle": "2.0.0-1768530912818",
+    "@tamagui/react-native-web-lite": "2.0.0-1768530912818",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",