docs: Style macro reference table refactor

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

@@ -687,15 +687,19 @@ export const style = createTheme({
     containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width),
     containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height),
     minHeight: createSpectrumSizingProperty('minHeight', height),
-    maxHeight: createSpectrumSizingProperty('maxHeight', {
-      ...height,
-      none: 'none'
-    }),
+    maxHeight: createSpectrumSizingProperty('maxHeight', (() => {
+      // auto is not a valid value for maxHeight
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {auto, ...rest} = height;
+      return {...rest, none: 'none'};
+    })()),
     minWidth: createSpectrumSizingProperty('minWidth', width),
-    maxWidth: createSpectrumSizingProperty('maxWidth', {
-      ...width,
-      none: 'none'
-    }),
+    maxWidth: createSpectrumSizingProperty('maxWidth', (() => {
+      // auto is not a valid value for maxWidth
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const {auto, ...rest} = width;
+      return {...rest, none: 'none'};
+    })()),
     borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth),
     borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth),
     borderTopWidth: borderWidth,

packages/dev/s2-docs/pages/s2/style-macro.mdx

@@ -1,7 +1,7 @@
 import {Layout} from '../../src/Layout';
 import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
 import {StyleMacroProperties} from '../../src/StyleMacroProperties';
-import {getPropertyDefinitions, getShorthandDefinitions} from '../../src/styleProperties';
+import {getPropertyDefinitions} from '../../src/styleProperties';
 export default Layout;
 
 export const section = 'Components';
@@ -24,7 +24,7 @@ All Spectrum 2 color tokens are available across color properties (e.g., `backgr
 
 ## Text
 
-Spectrum 2 typography can be applied via the `font` [shorthand](#shorthands), which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
+Spectrum 2 typography can be applied via the `font` shorthand, which sets `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `color`. You can override any of these individually.
 Note that `font` should be applied on a per element basis rather than globally so as to properly conform with Spectrum designs.
 
 ```tsx
@@ -52,12 +52,6 @@ Note that `font` should be applied on a per element basis rather than globally s
 
 <StyleMacroProperties properties={getPropertyDefinitions('misc')} />
 
-## Shorthands
-
-Shorthands apply their provided value to commonly grouped properties.
-
-<StyleMacroProperties properties={getShorthandDefinitions('shorthand')} />
-
 ## Conditions
 
-<StyleMacroProperties properties={getPropertyDefinitions('conditions')} />
+<StyleMacroProperties properties={getPropertyDefinitions('conditions')} sort={false} />

packages/dev/s2-docs/src/S2Colors.tsx

@@ -151,7 +151,7 @@ function ColorScale({scale}) {
   ));
 }
 
-function Color({name, className}) {
+export function Color({name, className}) {
   return (
     <div className={style({display: 'flex', gap: 8, marginBottom: 4, font: 'ui', alignItems: 'center', breakInside: 'avoid'})}>
       <div className={typeof className === 'function' ? className({}) : className} />