Fix tests

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -15,7 +15,7 @@ import {DisclosureContext} from './Disclosure';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import React, {createContext, forwardRef} from 'react';
-import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {style} from '../style' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 

packages/@react-spectrum/s2/src/Button.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, focusRing, fontRelative, size as sizeValue, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -378,8 +378,8 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
               styles={style({
                 size: {
                   size: {
-                    S: sizeValue(14),
-                    M: sizeValue(18),
+                    S: 14,
+                    M: 18,
                     L: 20,
                     XL: 24
                   }

packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx

@@ -15,7 +15,7 @@ import {Color} from '@react-types/color';
 import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
 import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
-import {focusRing, size as sizeValue, style} from '../style' with {type: 'macro'};
+import {focusRing, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -61,9 +61,9 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivEle
         flexWrap: 'wrap',
         gap: {
           density: {
-            compact: sizeValue(2),
+            compact: space(2),
             regular: 4,
-            spacious: sizeValue(6)
+            spacious: space(6)
           }
         }
       }, getAllowedOverrides())({density}, props.styles)}>

packages/@react-spectrum/s2/src/ContextualHelp.tsx

@@ -12,7 +12,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
 import {Popover, PopoverProps} from './Popover';
-import {style, size as styleSize} from '../style' with {type: 'macro'};
+import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -112,7 +112,7 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
               [HeadingContext, {styles: style({
                 font: 'heading-xs',
                 margin: 0,
-                marginBottom: styleSize(8) // This only makes it 10px on mobile and should be 12px
+                marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
               })}],
               [ContentContext, {styles: style({
                 font: 'body-sm'

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -17,7 +17,7 @@ import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import {focusRing, lightDark, size as sizeValue, style} from '../style' with { type: 'macro' };
+import {focusRing, lightDark, style} from '../style' with { type: 'macro' };
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -62,7 +62,7 @@ const disclosure = style({
   borderEndWidth: 0,
   borderStyle: 'solid',
   borderColor: 'gray-200',
-  minWidth: sizeValue(200)
+  minWidth: 200
 }, getAllowedOverrides());
 
 function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
@@ -319,9 +319,9 @@ const panelStyles = style({
     isExpanded: {
       size: {
         S: 8,
-        M: sizeValue(9),
+        M: 9,
         L: 12,
-        XL: sizeValue(15)
+        XL: 15
       }
     }
   }

packages/@react-spectrum/s2/src/TableView.tsx

@@ -45,7 +45,7 @@ import {
 import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, fontRelative, lightDark, space, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {colorMix, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
 import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';

packages/@react-spectrum/s2/style/index.ts

@@ -10,9 +10,23 @@
  * governing permissions and limitations under the License.
  */
 
-export {baseColor, edgeToText, fontRelative, lightDark, size, space, style} from './spectrum-theme';
+import {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';
+export {baseColor, edgeToText, lightDark, colorMix, style} from './spectrum-theme';
 export type {StyleString} from './types';
 
+// Wrap these functions in arbitrary value syntax when called from the outside.
+export function size(px: number): `[${string}]` {
+  return `[${internalSize(px)}]`;
+}
+
+export function space(px: number): `[${string}]` {
+  return `[${internalSpace(px)}]`;
+}
+
+export function fontRelative(base: number, baseFontSize?: number): `[${string}]` {
+  return `[${internalFontRelative(base, baseFontSize)}]`;
+}
+
 export const focusRing = () => ({
   outlineStyle: {
     default: 'none',

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -191,20 +191,16 @@ const negativeSpacing = generateSpacing([
   -384
 ] as const);
 
-function arbitrary(ctx: MacroContext | void, value: string): `[${string}]` {
-  return ctx ? `[${value}]` : value as any;
-}
-
 export function fontRelative(this: MacroContext | void, base: number, baseFontSize = 14) {
-  return arbitrary(this, (base / baseFontSize) + 'em');
+  return (base / baseFontSize) + 'em';
 }
 
 export function edgeToText(this: MacroContext | void, height: keyof typeof baseSpacing) {
   return `calc(${baseSpacing[height]} * 3 / 8)`;
 }
 
 export function space(this: MacroContext | void, px: number) {
-  return arbitrary(this, pxToRem(px));
+  return pxToRem(px);
 }
 
 const spacing = {
@@ -222,7 +218,7 @@ const spacing = {
 };
 
 export function size(this: MacroContext | void, px: number) {
-  return arbitrary(this, `calc(${pxToRem(px)} * var(--s2-scale))`);
+  return `calc(${pxToRem(px)} * var(--s2-scale))`;
 }
 
 const sizing = {