adobe · devongovett · May 7, 2025 · Apr 25, 2025 · Apr 28, 2025 · Apr 28, 2025
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -222,7 +222,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   '--badgeTop': {
     type: 'top',
     value: {
-      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',
+      default: 'calc(self(height)/2 - var(--iconWidth)/2)',
       [textOnly]: 0
     }
   },
@@ -240,8 +240,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   '--badgePosition': {
     type: 'width',
     value: {
-      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',
-      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',
+      default: 'calc(var(--buttonPaddingX) + var(--iconWidth))',
+      [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
       [textOnly]: 'full'
     }
   }
@@ -315,7 +315,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
             staticColor: staticColor,
             size: props.size === 'XS' ? undefined : props.size,
             isDisabled: props.isDisabled,
-            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})
+            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
           }]
         ]}>
         {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}

diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
@@ -39,7 +39,7 @@ export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroup
 
 const avatar = style({
   marginStart: {
-    default: '[calc(var(--size) / -4)]',
+    default: 'calc(var(--size) / -4)',
     ':first-child': 0
   }
 });

diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
@@ -228,10 +228,10 @@ let preview = style({
   position: 'relative',
   transition: 'default',
   overflow: 'clip',
-  marginX: '[calc(var(--card-padding-x) * -1)]',
-  marginTop: '[calc(var(--card-padding-y) * -1)]',
+  marginX: 'calc(var(--card-padding-x) * -1)',
+  marginTop: 'calc(var(--card-padding-y) * -1)',
   marginBottom: {
-    ':last-child': '[calc(var(--card-padding-y) * -1)]'
+    ':last-child': 'calc(var(--card-padding-y) * -1)'
   },
   borderRadius: {
     isQuiet: borderRadius
@@ -326,7 +326,7 @@ let content = style({
     ':first-child': 0
   },
   paddingBottom: {
-    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    default: 'calc(var(--card-spacing) * 1.5 / 2)',
     ':last-child': 0
   }
 });
@@ -335,7 +335,7 @@ let actionMenu = style({
   gridArea: 'menu',
   // Don't cause the row to expand, preserve gap between title and description text.
   // Would use -100% here but it doesn't work in Firefox.
-  marginY: '[calc(-1 * self(height))]'
+  marginY: 'calc(-1 * self(height))'
 });
 
 let footer = style({
@@ -344,7 +344,7 @@ let footer = style({
   alignItems: 'end',
   justifyContent: 'space-between',
   gap: 8,
-  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+  paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
 export const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');
@@ -647,7 +647,7 @@ export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMR
                 position: 'relative',
                 marginTop: {
                   default: 0,
-                  ':is([slot=preview] + *)': '[calc(var(--size) / -2)]'
+                  ':is([slot=preview] + *)': 'calc(var(--size) / -2)'
                 }
               }),
               isOverBackground: true
@@ -717,7 +717,7 @@ export const ProductCard = forwardRef(function ProductCard(props: ProductCardPro
                     objectFit: 'cover',
                     marginTop: {
                       default: 0,
-                      ':is([slot=preview] + *)': '[calc(self(height) / -2)]'
+                      ':is([slot=preview] + *)': 'calc(self(height) / -2)'
                     },
                     outlineStyle: 'solid',
                     outlineWidth: {

diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -85,7 +85,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
         // Double the usual gap because of the internal padding within checkbox that spectrum has.
         '--field-gap': {
           type: 'rowGap',
-          value: '[calc(var(--field-height) - 1lh)]'
+          value: 'calc(var(--field-height) - 1lh)'
         }
       }, getAllowedOverrides())({
         size: props.size,

diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -136,7 +136,7 @@ let popover = style({
     }
   },
   // Don't be larger than full screen minus 2 * containerPadding
-  maxWidth: '[calc(100vw - 24px)]',
+  maxWidth: 'calc(100vw - 24px)',
   boxSizing: 'border-box',
   translateY: {
     placement: {
@@ -291,7 +291,7 @@ let content = style({
     ':first-child': 0
   },
   paddingBottom: {
-    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    default: 'calc(var(--card-spacing) * 1.5 / 2)',
     ':last-child': 0
   }
 });
@@ -300,7 +300,7 @@ let actionMenu = style({
   gridArea: 'menu',
   // Don't cause the row to expand, preserve gap between title and description text.
   // Would use -100% here but it doesn't work in Firefox.
-  marginY: '[calc(-1 * self(height))]'
+  marginY: 'calc(-1 * self(height))'
 });
 
 let footer = style({
@@ -309,7 +309,7 @@ let footer = style({
   alignItems: 'end',
   justifyContent: 'space-between',
   gap: 8,
-  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+  paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
 const actionButtonSize = {

diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -255,7 +255,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
                 // better way to do this one? it's not actually half, they are
                 // [9, 4], [12, 6], [15, 8], [18, 8]
                 // also noticed that our measurement is including the border, making the padding too much
-                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'
+                paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16)'
               })({size})}>
               <InputContext.Consumer>
                 {ctx => (
@@ -300,8 +300,8 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
                 '--trigger-width': `calc(${triggerWidth} - 2px)`
               } as CSSProperties}
               styles={style({
-                minWidth: '[var(--trigger-width)]',
-                width: '[var(--trigger-width)]'
+                minWidth: '--trigger-width',
+                width: '--trigger-width'
               })}>
               <Provider
                 values={[

diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -104,7 +104,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         crossOffset={crossOffset}
         hideArrow
         styles={popover}>
-        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: '[calc(self(paddingTop) * -1)]', padding: 24}))}>
+        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
           <Provider
             values={[
               [TextContext, {

diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -140,9 +140,9 @@ const buttonStyles = style({
   display: 'flex',
   flexGrow: 1,
   alignItems: 'baseline',
-  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',
+  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
   paddingY: centerPadding(),
-  gap: '[calc(self(minHeight) * 3/8 - 1px)]',
+  gap: 'calc(self(minHeight) * 3/8 - 1px)',
   minHeight: {
     // compact is equivalent to 'control', but other densities have more padding.
     size: {

diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -86,7 +86,7 @@ const banner = style({
   borderRadius: 'default',
   color: 'white',
   fontWeight: 'bold',
-  padding: '[calc((self(minHeight))/1.5)]'
+  padding: 'calc((self(minHeight))/1.5)'
 });
 
 /**

diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -86,13 +86,13 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
               S: 336,
               M: 416,
               L: 576,
-              fullscreen: '[calc(100% - 40px)]',
+              fullscreen: 'calc(100% - 40px)',
               fullscreenTakeover: 'full'
             }
           },
           height: {
             size: {
-              fullscreen: '[calc(100% - 40px)]',
+              fullscreen: 'calc(100% - 40px)',
               fullscreenTakeover: 'full'
             }
           },

diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -393,12 +393,12 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                   isQuiet: -12
                 },
                 minWidth: {
-                  default: '[var(--trigger-width)]',
+                  default: '--trigger-width',
                   isQuiet: 192
                 },
                 width: {
-                  default: '[var(--trigger-width)]',
-                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                  default: '--trigger-width',
+                  isQuiet: 'calc(var(--trigger-width) + (-2 * self(marginStart)))'
                 }
               })(props)}>
               <Provider

diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -77,7 +77,7 @@ let popover = style({
     }
   },
   // Don't be larger than full screen minus 2 * containerPadding
-  maxWidth: '[calc(100vw - 24px)]',
+  maxWidth: 'calc(100vw - 24px)',
   boxSizing: 'border-box',
   display: 'flex',
   opacity: {

diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -81,7 +81,7 @@ const circle = style<RenderProps>({
   boxSizing: 'border-box',
   borderWidth: {
     default: space(2),
-    isSelected: '[calc((self(height) - (4 / 16) * 1rem) / 2)]'
+    isSelected: 'calc((self(height) - (4 / 16) * 1rem) / 2)'
   },
   forcedColorAdjust: 'none',
   backgroundColor: 'gray-25',

diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -85,7 +85,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
         // Double the usual gap because of the internal padding within checkbox that spectrum has.
         '--field-gap': {
           type: 'rowGap',
-          value: '[calc(var(--field-height) - 1lh)]'
+          value: 'calc(var(--field-height) - 1lh)'
         }
       }, getAllowedOverrides())({
         size,

diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -961,7 +961,7 @@ const checkboxCellStyle = style({
   ...stickyCell,
   paddingStart: 16,
   alignContent: 'center',
-  height: '[calc(100% - 1px)]',
+  height: 'calc(100% - 1px)',
   borderBottomWidth: 0,
   backgroundColor: '--rowBackgroundColor'
 });

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -493,10 +493,10 @@ let HiddenTabs = function (props: {
       inert={inertValue(true)}
       ref={listRef}
       className={style({
-        display: '[inherit]',
-        flexDirection: '[inherit]',
-        gap: '[inherit]',
-        flexWrap: '[inherit]',
+        display: 'inherit',
+        flexDirection: 'inherit',
+        gap: 'inherit',
+        flexWrap: 'inherit',
         position: 'absolute',
         inset: 0,
         visibility: 'hidden',

diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -248,7 +248,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               styles={style({
                 marginStart: -12,
                 minWidth: 192,
-                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                width: 'calc(var(--trigger-width) + (-2 * self(marginStart)))'
               })}>
               <Provider
                 values={[

diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -450,7 +450,7 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
   height: 'control',
   transition: 'default',
   minWidth: 0,
-  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3
+  // maxWidth: 'calc(self(height) * 7)', // s2 designs show a max width on tags but we pushed back on this in v3
   backgroundColor: {
     default: 'gray-100',
     isHovered: {

diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx
@@ -254,7 +254,7 @@ const toastStyle = style({
     type: 'maxWidth',
     value: 336
   },
-  maxWidth: '[min(var(--maxWidth), 90vw)]',
+  maxWidth: 'min(var(--maxWidth), 90vw)',
   boxSizing: 'border-box',
   flexShrink: 0,
   font: 'ui',

diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -345,7 +345,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
             <div
               className={style({
                 gridArea: 'level-padding',
-                width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'
+                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'
               })} />
             {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
             <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />

diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -109,7 +109,7 @@ export const fieldInput = () => ({
     }
   },
   // contain-intrinsic-width only includes the width of children, not the padding or borders.
-  containIntrinsicWidth: '[calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))]'
+  containIntrinsicWidth: 'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'
 } as const);
 
 export const colorScheme = () => ({

diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -32,7 +32,7 @@ export default meta;
 const tabs = style({width: 'full', height: 'full'});
 
 export const Example = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={tabs} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR">Founding of Rome</Tab>
@@ -58,7 +58,7 @@ export const Example = (args: any) => (
 );
 
 export const Disabled = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={tabs} disabledKeys={['FoR', 'MaR', 'Emp']} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR">Founding of Rome</Tab>
@@ -79,7 +79,7 @@ export const Disabled = (args: any) => (
 );
 
 const IconsRender = (props) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...props} styles={tabs} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
@@ -115,7 +115,7 @@ let items: Item[] = [
 ];
 
 export const Dynamic = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <div id="the-label" className={style({font: 'ui'})}>External label for tabs</div>
     <Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
       <TabList items={items}>

diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -62,7 +62,7 @@ describe('style-macro', () => {
     let {css, js} = testStyle({
       borderWidth: 2,
       paddingX: 'edge-to-text',
-      width: '[calc(200px - self(borderStartWidth) - self(paddingStart))]'
+      width: 'calc(200px - self(borderStartWidth) - self(paddingStart))'
     });
 
     expect(css).toMatchInlineSnapshot(`

diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -93,7 +93,7 @@ type SpectrumColor = Color<keyof typeof color> | ArbitraryValue;
 function parseColor(value: SpectrumColor) {
   let arbitrary = parseArbitraryValue(value);
   if (arbitrary) {
-    return arbitrary[0];
+    return arbitrary;
   }
   let [colorValue, opacity] = value.split('/');
   colorValue = color[colorValue];
@@ -480,10 +480,7 @@ export const style = createTheme({
         isFocusVisible: colorToken('negative-content-color-key-focus'),
         isPressed: colorToken('negative-content-color-down')
       },
-      disabled: {
-        default: colorToken('disabled-content-color')
-        // forcedColors: 'GrayText'
-      },
+      disabled: colorToken('disabled-content-color'),
       heading: colorToken('heading-color'),
       title: colorToken('title-color'),
       body: colorToken('body-color'),

diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -169,6 +169,13 @@ export function parseArbitraryValue(value: Value): string | undefined {
     return `var(${value})`;
   } else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
     return value.slice(1, -1);
+  } else if (
+    typeof value === 'string' && (
+      /^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || 
+      /^(inherit|initial|unset)$/.test(value)
+    )
+  ) {
+    return value;
   }
 }