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

[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)

[devongovett]

@snowystinger

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

Is this a problem?

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

I only see this when you reach the end of the cards, which I think is expected?

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

I don't see this.

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

Looks ok to me?

[rspbot]

Build successful! 🎉

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

[yihuiliao]

Autocomplete - Vanilla CSS: there's a lot of space between items when you filter them using autocomplete.

Calendar - Vanilla CSS: there's no focus visible styles so i can't see what date i'm focused on

GridList - Tailwind: you can see the border of the gridlist underneath the focus visible styles. not the worst, just doesn't feel super clean

Another thing with GridList is that when you try to keyboard drag and drop, it ends up scrolling the screen so it's hard to actually see where you're dropping.

Table: should the LoadingIndicator in the Async example be centered? right now, it's aligned to the left. Is this what the column resizing should look like when you keyboard navigate to it? it looks a bit cut off

ToggleButtonGroup - Vanilla CSS: similar to calendar, but there's no focus ring so i can't actually tell if im on a button. (actually, it shows up under the animation example but not the others)

Toolbar - Vanilla CSS: no focus rings around the ToggleButtonGroup with the text formatting styles

Tooltip - Tailwind: don't think it's grabbing the right font for the text inside the tooltip

Tree: the focus ring around the drag handle looks off centered

should the drag indicator be a slightly different color then the selected state? it's difficult to see the drag indicator when it's up against a selected item

[LFDanLu]

• Can't seem to reproduce, but yesterday I got into a state where the theme wasn't selected by default and thus things like visible focus colors were missing
• Nit: Should we remove the theme picker from components like ColorArea, ColorSlider, ColorSwatch, ColorWheel, Meter
• GridList: as you keyboard navigate downwards, the entire page scrolls down as well, probably something wrong with the scroll into view code?
• Group: bit weird that the placeholder is cut off

• the last submenu here is rendered a bit too far to the right when compared to the first submenu

• toggle button doesn't seem to have a focus ring

First batch of things I notices, only did light theme w/ Vanilla CSS examples and tried to dedupe from what others have already mentioned. I like the updated examples (especially the pokemon pics in the DnD examples haha) and the more stylish buttons and such. Will followup on the other combos after

[devongovett]

@LFDanLu

GridList: as you keyboard navigate downwards, the entire page scrolls down as well, probably something wrong with the scroll into view code?

This happens in CardView as well. Probably an actual bug not something in the docs?

Group: bit weird that the placeholder is cut off

Rob mentioned that too and I thought I fixed it? Looks ok to me.

[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
 }

---