[WIP]: first go at new layout tokens

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

@@ -12,6 +12,7 @@
 
 import {ActionButtonGroup} from './ActionButtonGroup';
 import {announce} from 'react-aria/private/live-announcer/LiveAnnouncer';
+import {banner, StyleProps} from './style-utils' with {type: 'macro'};
 import {CloseButton} from './CloseButton';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {
@@ -31,7 +32,6 @@ import {DOMProps, DOMRef, DOMRefValue, Key} from '@react-types/shared';
 import {FocusScope} from 'react-aria/FocusScope';
 import intlMessages from '../intl/*.json';
 import {lightDark, style} from '../style' with {type: 'macro'};
-import {StyleProps} from './style-utils' with {type: 'macro'};
 import {useControlledState} from 'react-stately/useControlledState';
 import {useDOMRef} from './useDOMRef';
 import {useEnterAnimation, useExitAnimation} from 'react-aria/private/utils/animation';
@@ -42,6 +42,7 @@ import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 const actionBarStyles = style({
+  ...banner(),
   borderRadius: 'lg',
   '--s2-container-bg': {
     type: 'backgroundColor',
@@ -60,10 +61,7 @@ const actionBarStyles = style({
     isEmphasized: 'transparent',
     forcedColors: 'ButtonBorder'
   },
-  paddingX: 8,
-  paddingY: 12,
   display: 'flex',
-  gap: 16,
   alignItems: 'center',
   position: {
     isInContainer: 'absolute'
@@ -194,7 +192,14 @@ const ActionBarInner = forwardRef(function ActionBarInner(
         {...keyboardProps}
         className={
           (props.UNSAFE_className || '') +
-          actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})
+          actionBarStyles({
+            isEmphasized,
+            isInContainer: !!scrollRef,
+            isEntering,
+            isExiting,
+            orientation: 'horizontal',
+            density: 'compact'
+          })
         }
         style={{
           insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`,

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

@@ -15,6 +15,7 @@ import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {
   getAllowedOverrides,
+  groupGap,
   StylesPropWithHeight,
   UnsafeStyles
 } from './style-utils' with {type: 'macro'};
@@ -70,20 +71,7 @@ export const actionGroupStyle = style(
         vertical: 'column'
       }
     },
-    gap: {
-      density: {
-        compact: 2,
-        regular: {
-          size: {
-            XS: 4,
-            S: 4,
-            M: 8,
-            L: 8,
-            XL: 8
-          }
-        }
-      }
-    }
+    gap: groupGap()
   },
   getAllowedOverrides({height: true})
 );

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

@@ -35,6 +35,7 @@ import {
 import {ContextValue, Provider} from 'react-aria-components/slots';
 import {
   controlFont,
+  controlGap,
   controlSize,
   getAllowedOverrides,
   StyleProps
@@ -112,13 +113,7 @@ const wrapper = style<BreadcrumbsStyleProps>(
     flexGrow: 1,
     flexShrink: 0,
     flexBasis: 0,
-    gap: {
-      size: {
-        // TODO: why do these scale but other spacings don't?
-        M: size(6), // breadcrumbs-text-to-separator-medium
-        L: size(9) // breadcrumbs-text-to-separator-large
-      }
-    },
+    gap: controlGap(),
     padding: 0,
     transition: 'default',
     marginTop: 0,

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

@@ -15,7 +15,7 @@ import {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, groupGap, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
@@ -66,14 +66,7 @@ const buttongroup = style<ButtonGroupStyleProps>(
     display: 'inline-flex',
     position: 'relative',
     maxWidth: 'full',
-    gap: {
-      size: {
-        S: 8,
-        M: 12,
-        L: 12,
-        XL: 12
-      }
-    },
+    gap: groupGap(),
     flexDirection: {
       default: 'row',
       orientation: {

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

@@ -24,6 +24,7 @@ import {ContextValue, useSlottedContext} from 'react-aria-components/slots';
 import {
   controlBorderRadius,
   controlFont,
+  controlGap,
   controlSize,
   getAllowedOverrides,
   StyleProps
@@ -89,7 +90,7 @@ const field = style(
       default: ['max-content', '1fr'],
       isNoVisibleLabel: ['max-content']
     },
-    columnGap: 'text-to-control',
+    columnGap: controlGap(),
     alignContent: 'start',
     width: {
       default: 'fit',

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

@@ -25,7 +25,7 @@ import {
   Orientation,
   SpectrumLabelableProps
 } from '@react-types/shared';
-import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, getAllowedOverrides, groupGap, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {style} from '../style' with {type: 'macro'};
@@ -104,12 +104,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(
         UNSAFE_className +
         style(
           {
-            ...field(),
-            // Double the usual gap because of the internal padding within checkbox that spectrum has.
-            '--field-gap': {
-              type: 'rowGap',
-              value: 'calc(var(--field-height) - 1lh)'
-            }
+            ...field()
           },
           getAllowedOverrides()
         )(
@@ -146,7 +141,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(
                 }
               },
               lineHeight: 'ui',
-              rowGap: '--field-gap',
+              rowGap: groupGap().density.spacious,
               // Spectrum uses a fixed spacing value for horizontal,
               // but the gap changes depending on t-shirt size in vertical.
               columnGap: 16,

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

@@ -17,7 +17,12 @@ import {
 
 import {ColorHandle} from './ColorHandle';
 import {ContextValue} from 'react-aria-components/slots';
-import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  controlFont,
+  controlGap,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, useRef} from 'react';
 import {
   DOMRef,
@@ -91,7 +96,7 @@ export const ColorSlider = forwardRef(function ColorSlider(
             },
             gridTemplateColumns: ['1fr', 'auto'],
             gridTemplateAreas: ['label output', 'track track'],
-            rowGap: 4
+            rowGap: controlGap().size.S
           },
           getAllowedOverrides()
         )(renderProps, styles)

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

@@ -20,8 +20,8 @@ import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
-import {focusRing, space, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {focusRing, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, groupGap, StyleProps} from './style-utils' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -81,9 +81,9 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
             flexWrap: 'wrap',
             gap: {
               density: {
-                compact: space(2),
-                regular: 4,
-                spacious: space(6)
+                compact: groupGap().density.compact,
+                regular: groupGap().density.default.size.XS,
+                spacious: groupGap().density.default.size.M
               }
             }
           },

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

@@ -48,6 +48,7 @@ import {
   control,
   controlBorderRadius,
   controlFont,
+  controlPadding,
   controlSize,
   field,
   fieldInput,
@@ -292,10 +293,10 @@ export let listboxItem = style(
     gridTemplateAreas: ['. checkmark icon label       .', '. .         .    description .'],
     gridTemplateColumns: {
       size: {
-        S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(24)],
-        M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(32)],
-        L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(40)],
-        XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(48)]
+        S: [controlPadding().size.S, 'auto', 'auto', 'minmax(0, 1fr)', controlPadding().size.S],
+        M: [controlPadding().size.M, 'auto', 'auto', 'minmax(0, 1fr)', controlPadding().size.M],
+        L: [controlPadding().size.L, 'auto', 'auto', 'minmax(0, 1fr)', controlPadding().size.L],
+        XL: [controlPadding().size.XL, 'auto', 'auto', 'minmax(0, 1fr)', controlPadding().size.XL]
       }
     },
     gridTemplateRows: {
@@ -324,26 +325,12 @@ export let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
   boxSizing: 'border-box',
   minHeight: controlSize(),
   paddingY: centerPadding(),
-  marginX: {
-    size: {
-      S: `[${edgeToText(24)}]`,
-      M: `[${edgeToText(32)}]`,
-      L: `[${edgeToText(40)}]`,
-      XL: `[${edgeToText(48)}]`
-    }
-  }
+  marginX: controlPadding()
 });
 
 const separatorWrapper = style({
   display: 'flex',
-  marginX: {
-    size: {
-      S: `[${edgeToText(24)}]`,
-      M: `[${edgeToText(32)}]`,
-      L: `[${edgeToText(40)}]`,
-      XL: `[${edgeToText(48)}]`
-    }
-  },
+  marginX: controlPadding(),
   height: 12,
   alignItems: 'center'
 });

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

@@ -1,5 +1,6 @@
 import {ActionButton} from './ActionButton';
 import {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {containerGap, containerPadding, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   ContentContext,
   FooterContext,
@@ -18,8 +19,7 @@ import {mergeProps} from 'react-aria/mergeProps';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria-components/Popover';
 import {Popover, PopoverDialogProps} from './Popover';
-import {space, style} from '../style' with {type: 'macro'};
-import {StyleProps} from './style-utils' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {TextContext} from 'react-aria-components/Text';
 import {useId} from 'react-aria/useId';
 import {useLabels} from 'react-aria/private/utils/useLabels';
@@ -36,15 +36,15 @@ export interface ContextualHelpPopoverProps extends Omit<PopoverDialogProps, 'is
 const wrappingDiv = style({
   minWidth: 268,
   width: 268,
-  padding: 24,
+  padding: containerPadding().size.XL,
   boxSizing: 'border-box',
   height: 'full'
 });
 
 const headingStyles = style({
   font: 'heading-xs',
   margin: 0,
-  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
+  marginBottom: containerPadding().size.XS
 });
 
 // TODO: docs to come after release, for now this is just mentioned in unavaiable menu docs
@@ -61,7 +61,11 @@ export function ContextualHelpPopover(props: ContextualHelpPopoverProps) {
         <div
           className={mergeStyles(
             dialogInner,
-            style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24})
+            style({
+              borderRadius: 'none',
+              margin: 'calc(self(paddingTop) * -1)',
+              padding: containerPadding().size.XL
+            })
           )}>
           <Provider
             values={[
@@ -101,7 +105,7 @@ export function ContextualHelpPopover(props: ContextualHelpPopoverProps) {
                 {
                   styles: style({
                     font: 'body-sm',
-                    marginTop: 16
+                    marginTop: containerGap().size.M
                   })
                 }
               ]

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

@@ -52,7 +52,7 @@ const dialogStyle = style(
     padding: {
       padding: {
         default: {
-          default: 24,
+          default: 24, // TODO: what should these be?
           sm: 32
         },
         none: 0

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

@@ -23,6 +23,7 @@ import {
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';
 import {
+  controlPadding,
   field,
   fieldInput,
   getAllowedOverrides,
@@ -168,7 +169,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
               styles={style({
                 ...fieldInput(),
                 textWrap: 'nowrap',
-                paddingX: 'edge-to-text'
+                paddingX: controlPadding()
               })({size})}>
               <DateInputContainer>
                 <DateInput />