@oxyhq/bloom 0.7.0 → 0.7.1

package/src/theme/color-presets.ts

@@ -53,25 +53,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'teal',
     hex: '#005c67',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '185 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '185 10% 97%',
+      '--surface': '185 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '185 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '185 100% 20%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '185 8% 95%',
+      '--secondary': '185 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '185 8% 95%',
+      '--muted': '185 12% 95%',
       '--muted-foreground': '185 5% 42%',
-      '--accent': '185 8% 95%',
+      '--accent': '185 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '185 8% 88%',
-      '--input': '185 8% 88%',
+      '--border': '185 14% 88%',
+      '--input': '185 14% 88%',
       '--ring': '185 100% 20%',
-      '--sidebar': '185 10% 97%',
+      '--sidebar': '185 14% 97%',
     },
     dark: {
       '--background': '185 50% 5%',
@@ -100,25 +100,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'blue',
     hex: '#1D9BF0',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '205 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '205 10% 97%',
+      '--surface': '205 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '205 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '205 87% 53%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '205 8% 95%',
+      '--secondary': '205 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '205 8% 95%',
+      '--muted': '205 12% 95%',
       '--muted-foreground': '205 5% 42%',
-      '--accent': '205 8% 95%',
+      '--accent': '205 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '205 8% 88%',
-      '--input': '205 8% 88%',
+      '--border': '205 14% 88%',
+      '--input': '205 14% 88%',
       '--ring': '205 87% 53%',
-      '--sidebar': '205 10% 97%',
+      '--sidebar': '205 14% 97%',
     },
     dark: {
       '--background': '205 50% 5%',
@@ -147,25 +147,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'green',
     hex: '#10B981',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '160 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '160 10% 97%',
+      '--surface': '160 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '160 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '160 84% 39%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '160 8% 95%',
+      '--secondary': '160 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '160 8% 95%',
+      '--muted': '160 12% 95%',
       '--muted-foreground': '160 5% 42%',
-      '--accent': '160 8% 95%',
+      '--accent': '160 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '160 8% 88%',
-      '--input': '160 8% 88%',
+      '--border': '160 14% 88%',
+      '--input': '160 14% 88%',
       '--ring': '160 84% 39%',
-      '--sidebar': '160 10% 97%',
+      '--sidebar': '160 14% 97%',
     },
     dark: {
       '--background': '160 50% 5%',
@@ -194,25 +194,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'amber',
     hex: '#F59E0B',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '38 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '38 10% 97%',
+      '--surface': '38 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '38 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '38 92% 50%',
       '--primary-foreground': '0 0% 0%',
-      '--secondary': '38 8% 95%',
+      '--secondary': '38 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '38 8% 95%',
+      '--muted': '38 12% 95%',
       '--muted-foreground': '38 5% 42%',
-      '--accent': '38 8% 95%',
+      '--accent': '38 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '38 8% 88%',
-      '--input': '38 8% 88%',
+      '--border': '38 14% 88%',
+      '--input': '38 14% 88%',
       '--ring': '38 92% 50%',
-      '--sidebar': '38 10% 97%',
+      '--sidebar': '38 14% 97%',
     },
     dark: {
       '--background': '38 50% 5%',
@@ -241,25 +241,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'yellow',
     hex: '#ffc300',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '46 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '46 10% 97%',
+      '--surface': '46 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '46 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '46 100% 50%',
       '--primary-foreground': '0 0% 0%',
-      '--secondary': '46 8% 95%',
+      '--secondary': '46 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '46 8% 95%',
+      '--muted': '46 12% 95%',
       '--muted-foreground': '46 5% 42%',
-      '--accent': '46 8% 95%',
+      '--accent': '46 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '46 8% 88%',
-      '--input': '46 8% 88%',
+      '--border': '46 14% 88%',
+      '--input': '46 14% 88%',
       '--ring': '46 100% 50%',
-      '--sidebar': '46 10% 97%',
+      '--sidebar': '46 14% 97%',
     },
     dark: {
       '--background': '46 50% 5%',
@@ -288,25 +288,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'red',
     hex: '#EF4444',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '0 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '0 10% 97%',
+      '--surface': '0 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '0 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '0 84% 60%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '0 8% 95%',
+      '--secondary': '0 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '0 8% 95%',
+      '--muted': '0 12% 95%',
       '--muted-foreground': '0 5% 42%',
-      '--accent': '0 8% 95%',
+      '--accent': '0 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '0 8% 88%',
-      '--input': '0 8% 88%',
+      '--border': '0 14% 88%',
+      '--input': '0 14% 88%',
       '--ring': '0 84% 60%',
-      '--sidebar': '0 10% 97%',
+      '--sidebar': '0 14% 97%',
     },
     dark: {
       '--background': '0 50% 5%',
@@ -335,25 +335,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'purple',
     hex: '#8B5CF6',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '258 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '258 10% 97%',
+      '--surface': '258 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '258 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '258 90% 66%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '258 8% 95%',
+      '--secondary': '258 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '258 8% 95%',
+      '--muted': '258 12% 95%',
       '--muted-foreground': '258 5% 42%',
-      '--accent': '258 8% 95%',
+      '--accent': '258 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '258 8% 88%',
-      '--input': '258 8% 88%',
+      '--border': '258 14% 88%',
+      '--input': '258 14% 88%',
       '--ring': '258 90% 66%',
-      '--sidebar': '258 10% 97%',
+      '--sidebar': '258 14% 97%',
     },
     dark: {
       '--background': '258 50% 5%',
@@ -382,25 +382,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'pink',
     hex: '#EC4899',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '330 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '330 10% 97%',
+      '--surface': '330 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '330 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '330 81% 60%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '330 8% 95%',
+      '--secondary': '330 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '330 8% 95%',
+      '--muted': '330 12% 95%',
       '--muted-foreground': '330 5% 42%',
-      '--accent': '330 8% 95%',
+      '--accent': '330 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '330 8% 88%',
-      '--input': '330 8% 88%',
+      '--border': '330 14% 88%',
+      '--input': '330 14% 88%',
       '--ring': '330 81% 60%',
-      '--sidebar': '330 10% 97%',
+      '--sidebar': '330 14% 97%',
     },
     dark: {
       '--background': '330 50% 5%',
@@ -429,25 +429,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'sky',
     hex: '#0EA5E9',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '199 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '199 10% 97%',
+      '--surface': '199 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '199 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '199 89% 48%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '199 8% 95%',
+      '--secondary': '199 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '199 8% 95%',
+      '--muted': '199 12% 95%',
       '--muted-foreground': '199 5% 42%',
-      '--accent': '199 8% 95%',
+      '--accent': '199 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '199 8% 88%',
-      '--input': '199 8% 88%',
+      '--border': '199 14% 88%',
+      '--input': '199 14% 88%',
       '--ring': '199 89% 48%',
-      '--sidebar': '199 10% 97%',
+      '--sidebar': '199 14% 97%',
     },
     dark: {
       '--background': '199 50% 5%',
@@ -476,25 +476,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'orange',
     hex: '#F97316',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '25 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '25 10% 97%',
+      '--surface': '25 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '25 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '25 95% 53%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '25 8% 95%',
+      '--secondary': '25 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '25 8% 95%',
+      '--muted': '25 12% 95%',
       '--muted-foreground': '25 5% 42%',
-      '--accent': '25 8% 95%',
+      '--accent': '25 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '25 8% 88%',
-      '--input': '25 8% 88%',
+      '--border': '25 14% 88%',
+      '--input': '25 14% 88%',
       '--ring': '25 95% 53%',
-      '--sidebar': '25 10% 97%',
+      '--sidebar': '25 14% 97%',
     },
     dark: {
       '--background': '25 50% 5%',
@@ -523,25 +523,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'mint',
     hex: '#14B8A6',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '173 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '173 10% 97%',
+      '--surface': '173 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '173 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '173 80% 40%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '173 8% 95%',
+      '--secondary': '173 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '173 8% 95%',
+      '--muted': '173 12% 95%',
       '--muted-foreground': '173 5% 42%',
-      '--accent': '173 8% 95%',
+      '--accent': '173 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '173 8% 88%',
-      '--input': '173 8% 88%',
+      '--border': '173 14% 88%',
+      '--input': '173 14% 88%',
       '--ring': '173 80% 40%',
-      '--sidebar': '173 10% 97%',
+      '--sidebar': '173 14% 97%',
     },
     dark: {
       '--background': '173 50% 5%',
@@ -570,25 +570,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'oxy',
     hex: '#c46ede',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '277 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '277 10% 97%',
+      '--surface': '277 14% 97%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '277 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '277 66% 56%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '277 8% 95%',
+      '--secondary': '277 12% 95%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '277 8% 95%',
+      '--muted': '277 12% 95%',
       '--muted-foreground': '277 5% 42%',
-      '--accent': '277 8% 95%',
+      '--accent': '277 12% 95%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '277 8% 88%',
-      '--input': '277 8% 88%',
+      '--border': '277 14% 88%',
+      '--input': '277 14% 88%',
       '--ring': '277 66% 56%',
-      '--sidebar': '277 10% 97%',
+      '--sidebar': '277 14% 97%',
     },
     dark: {
       '--background': '277 50% 5%',
@@ -616,25 +616,25 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     name: 'faircoin',
     hex: '#9ffb50',
     light: {
-      '--background': '0 0% 99%',
+      '--background': '92 8% 99%',
       '--foreground': '0 0% 12%',
-      '--surface': '92 12% 95%',
+      '--surface': '92 16% 95%',
       '--surface-foreground': '0 0% 12%',
-      '--popover': '0 0% 100%',
+      '--popover': '92 12% 99%',
       '--popover-foreground': '0 0% 12%',
       '--primary': '92 90% 25%',
       '--primary-foreground': '0 0% 100%',
-      '--secondary': '92 10% 92%',
+      '--secondary': '92 14% 92%',
       '--secondary-foreground': '0 0% 12%',
-      '--muted': '92 8% 93%',
-      '--muted-foreground': '0 0% 40%',
-      '--accent': '92 10% 92%',
+      '--muted': '92 12% 93%',
+      '--muted-foreground': '92 5% 40%',
+      '--accent': '92 14% 92%',
       '--accent-foreground': '0 0% 12%',
       '--destructive': '0 84% 60%',
-      '--border': '92 8% 85%',
-      '--input': '92 8% 85%',
+      '--border': '92 12% 85%',
+      '--input': '92 12% 85%',
       '--ring': '92 90% 25%',
-      '--sidebar': '92 12% 95%',
+      '--sidebar': '92 16% 95%',
     },
     dark: {
       '--background': '69 54% 8%',

package/src/theme/color-scope/index.tsx

@@ -4,7 +4,7 @@ import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { BloomThemeContext, type BloomThemeContextValue } from '../BloomThemeProvider';
 import { buildTheme } from '../build-theme';
 import type { AppColorName } from '../color-presets';
-import { buildNativePresetStyle } from './style-builder';
+import { buildNativePresetStyle, buildScopeVars, getVariableContextProvider } from './style-builder';
 
 export interface BloomColorScopeProps {
   /**
@@ -46,10 +46,15 @@ export function BloomColorScope({
     return { ...parent, theme, colorPreset };
   }, [colorPreset, resolvedMode, parent]);
 
-  const varsStyle = useMemo(
-    () => buildNativePresetStyle(colorPreset, resolvedMode),
+  // Preset vars flow to the subtree through react-native-css's real
+  // VariableContext (`VariableContextProvider`), NOT via an inline `vars()`
+  // style — under react-native-css@3 inline vars applied to a plain `<View>`
+  // (no matched className rules) are dropped silently. See `style-builder.ts`.
+  const nativeVars = useMemo(
+    () => buildScopeVars(colorPreset, resolvedMode),
     [colorPreset, resolvedMode],
   );
+  const VariableProvider = getVariableContextProvider();
 
   let content: React.ReactNode;
   if (asChild) {
@@ -59,20 +64,37 @@ export function BloomColorScope({
         'BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.',
       );
     }
+    // The vars no longer ride on the child's `style`; merge only the caller's
+    // `style` and the child's own `style` (child last so its styles win).
     const childStyle = child.props.style;
-    const mergedStyle: StyleProp<ViewStyle> = [varsStyle, style, childStyle];
+    const mergedStyle: StyleProp<ViewStyle> = [style, childStyle];
     content = cloneElement(child, { style: mergedStyle });
   } else {
-    content = <View style={[{ flex: 1 }, varsStyle, style]}>{children}</View>;
+    content = <View style={[{ flex: 1 }, style]}>{children}</View>;
   }
 
-  return <BloomThemeContext.Provider value={contextValue}>{content}</BloomThemeContext.Provider>;
+  // Wrap the subtree in the variable provider when NativeWind is available;
+  // otherwise render as-is so we never crash on web/non-NativeWind hosts.
+  const scoped = VariableProvider ? (
+    <VariableProvider value={nativeVars}>{content}</VariableProvider>
+  ) : (
+    content
+  );
+
+  return <BloomThemeContext.Provider value={contextValue}>{scoped}</BloomThemeContext.Provider>;
 }
 
 /**
  * Escape hatch for advanced cases where the wrapping element is owned by the
- * caller. Returns a stable native style object carrying the preset's CSS vars.
- * Returns `undefined` on web or when `nativewind` is not installed.
+ * caller. Returns a stable native style object carrying the preset's CSS vars
+ * via NativeWind's `vars()`. Returns `undefined` on web or when `nativewind`
+ * is not installed.
+ *
+ * NOTE: subject to the react-native-css@3 limitation — the returned style only
+ * propagates vars to descendants when applied to an interop className component
+ * (the runtime gates propagation on matched className style rules). It is a
+ * no-op on a plain `<View>` with no `className`. For the common case prefer
+ * `<BloomColorScope>`, which wraps children in `VariableContextProvider`.
  */
 export function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle> {
   const parent = useContext(BloomThemeContext);

package/src/theme/color-scope/style-builder.ts

@@ -1,11 +1,24 @@
+import type React from 'react';
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
 
 import { getPresetVars } from '../preset-vars';
 import type { AppColorName } from '../color-presets';
 import { lazyRequire } from '../../utils/lazy-require';
 
+/**
+ * Component that provides inline CSS variables to a subtree via NativeWind's
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
+ * `--` from each key internally, so we feed it the full `--name -> value`
+ * record produced by `buildScopeVars`.
+ */
+export type VariableContextProviderComponent = React.ComponentType<{
+  value: Record<string, string>;
+  children: React.ReactNode;
+}>;
+
 interface NativeWindVarsModule {
   vars: (record: Record<string, string>) => StyleProp<ViewStyle>;
+  VariableContextProvider?: VariableContextProviderComponent;
 }
 
 const getNativeWindVars = lazyRequire<NativeWindVarsModule>('nativewind');
@@ -22,11 +35,38 @@ export function buildScopeVars(
   return getPresetVars(colorPreset, mode, { includeResolvedColorVars: true });
 }
 
+/**
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
+ * reads the same `VariableContext` that interop className components consume, so
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
+ * when `nativewind` is not installed.
+ *
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
+ * propagated to children when the host element matches className style rules
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
+ * vars silently, so the subtree renders without the preset palette.
+ */
+export function getVariableContextProvider(): VariableContextProviderComponent | null {
+  if (Platform.OS === 'web') return null;
+  const module = getNativeWindVars();
+  if (!module || typeof module.VariableContextProvider !== 'function') return null;
+  return module.VariableContextProvider;
+}
+
 /**
  * Build a native style object carrying every CSS var of the preset, using
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
  * provider writes vars to `documentElement` instead) or when `nativewind` is
  * not installed.
+ *
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
+ * when applied to an interop className component (the runtime gates propagation
+ * on matched className style rules). Applied to a plain `<View>` the vars are
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
+ * caller owns the host element and is expected to be a className component.
  */
 export function buildNativePresetStyle(
   colorPreset: AppColorName,