[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,7 +48,9 @@ import {
   control,
   controlBorderRadius,
   controlFont,
+  controlPadding,
   controlSize,
+  controlTemplate,
   field,
   fieldInput,
   getAllowedOverrides,
@@ -70,7 +72,6 @@ import {
 } from 'react';
 import {createFocusableRef} from './useDOMRef';
 import {createLeafComponent} from 'react-aria/CollectionBuilder';
-import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
@@ -229,7 +230,7 @@ const progressCircleStyles = style({
     }
   },
   marginStart: {
-    isInput: 'text-to-visual'
+    isInput: 'text-to-visual' // TODO
   }
 });
 
@@ -252,7 +253,7 @@ const emptyStateText = style({
   },
   display: 'flex',
   alignItems: 'center',
-  paddingStart: 'edge-to-text'
+  paddingStart: 'edge-to-text' // TODO
 });
 
 export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
@@ -265,6 +266,7 @@ export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
   fontFamily: 'sans',
   fontSize: controlFont(),
   outlineStyle: 'none'
+  // TODO where to put popover padding like picker?
 });
 
 export let listboxItem = style(
@@ -292,10 +294,34 @@ 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 +350,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: controlTemplate().paddingX
 });
 
 const separatorWrapper = style({
   display: 'flex',
-  marginX: {
-    size: {
-      S: `[${edgeToText(24)}]`,
-      M: `[${edgeToText(32)}]`,
-      L: `[${edgeToText(40)}]`,
-      XL: `[${edgeToText(48)}]`
-    }
-  },
+  marginX: controlTemplate().paddingX,
   height: 12,
   alignItems: 'center'
 });
@@ -360,7 +372,7 @@ const dividerStyle = style({
 
 const avatar = style({
   gridArea: 'icon',
-  marginEnd: 'text-to-visual'
+  marginEnd: 'text-to-visual' // TODO
 });
 
 // Not from any design, just following the sizing of the existing rows