docs: Update React Aria example styling

[devongovett]

Updates the styling of all React Aria docs examples to look much nicer than before. Most of the changes are in the vanilla starter, so this will only affect the new docs. There were also a few changes in the Tailwind starter.

Mainly, the vanilla starter now has a more 3d appearance, which is implemented with box-shadow. This effect is centralized into 3 utility classes:

• button-base provides a common look for buttons (optionally with selection). These appear raised above the page.
• indicator is a small indicator such as a checkbox/radio/switch. These are also raised above the page, but have higher contrast.
• inset is a class that makes an element look etched into the page. Used for things like textfields and slider tracks.

The styles are themable by setting the --tint CSS variable. All of the colors are calculated from this base color using oklch, which guarantees a baseline level of contrast across all hues. I provided some default hues as variables, but it can also work with any arbitrary color. Added a picker to the docs to change the theme when on the Vanilla CSS examples.

Test instructions

• Test all examples in the new docs for RAC for styling issues. Make sure to test light mode, dark mode, and high contrast mode.
• Smoke test starter storybook
• Smoke test example app on the RAC homepage in the old docs (which uses the tailwind starter)

[devongovett]

These utilities are used across many different components, but currently are not displayed in the docs themselves. Do we want to add "utilities.css" and "theme.css" as tabs to the RAC examples? Should we split the utilities up into individual files? Should we put them all in theme.css so there's only one extra tab? 🤷

[snowystinger]

I'm good to have them all in theme.css

[devongovett]

It does make that file quite large: over 500 lines

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

## API Changes

react-aria-components

/react-aria-components:ColumnRenderProps

 ColumnRenderProps {
   allowsSorting: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isHovered: boolean
+  isPressed: boolean
   isResizing: boolean
   sort: (SortDirection) => void
   sortDirection: SortDirection | undefined
   startResize: () => void

---

@react-aria/table

/@react-aria/table:TableColumnHeaderAria

 TableColumnHeaderAria {
   columnHeaderProps: DOMAttributes
+  isPressed: boolean
 }

---

[devongovett]

Changed GridList styling to be more like CardView and less similar to ListBox. Maybe it will help with the confusion between the two components.

[snowystinger]

Noticed in TextFields there's no difference between data-focused and focus-visible

Disclosure is using native focus ring

Form example, hitting 'reset' after filling out the form causes blur and validation which increase the width of the form and then you missing completing the click on reset. We should hardcode the width.

GridList, tab to first example, press arrow down, entire page scrolls. I think this was pre-existing.

Group, example doesn't fit

Link, tabbing to the link seems to bring up a square focus ring that then turns into the rounded one.

RangeCalendar wiggles are you select, i am guessing we need to use box-sizing border-box somewhere in there

GridList, selection in checkbox not visible in HCM

Tabs, next to impossible to see the selection indicator in HCM (at least, in dark mode)