feat: update text colors to match new S2 spectrum design for Table/Tree (#9280)

Author: LFDanLu

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

@@ -953,7 +953,10 @@ const commonCellStyles = {
 
 const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({
   ...commonCellStyles,
-  color: baseColor('neutral'),
+  color: {
+    default: baseColor('neutral-subdued'),
+    isSelected: baseColor('neutral')
+  },
   paddingY: centerPadding(),
   minHeight: {
     default: 40,

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

@@ -12,6 +12,7 @@
 
 import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {ActionMenuContext} from './ActionMenu';
+import {baseColor, colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {
   Button,
   ButtonContext,
@@ -31,7 +32,6 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -153,7 +153,10 @@ const treeRow = style({
   width: 'full',
   boxSizing: 'border-box',
   font: 'ui',
-  color: 'body',
+  color: {
+    default: baseColor('neutral-subdued'),
+    isSelected: baseColor('neutral')
+  },
   outlineStyle: 'none',
   cursor: {
     default: 'default',

packages/react-aria-components/src/Table.tsx

@@ -1313,6 +1313,11 @@ export interface CellRenderProps {
    * @selector [data-hovered]
    */
   isHovered: boolean,
+  /**
+   * Whether the parent row is currently selected.
+   * @selector [data-selected]
+   */
+  isSelected: boolean,
   /**
    * The unique id of the cell.
    **/
@@ -1363,6 +1368,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
   }, state, ref);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({});
+  let isSelected = cell.parentKey != null ? state.selectionManager.isSelected(cell.parentKey) : false;
 
   let renderProps = useRenderProps({
     ...props,
@@ -1373,6 +1379,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       isFocusVisible,
       isPressed,
       isHovered,
+      isSelected,
       id: cell.key
     }
   });
@@ -1386,7 +1393,8 @@ export const Cell = /*#__PURE__*/ createLeafComponent(TableCellNode, (props: Cel
       ref={ref as any}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
-      data-pressed={isPressed || undefined}>
+      data-pressed={isPressed || undefined}
+      data-selected={isSelected || undefined}>
       <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
         {renderProps.children}
       </CollectionRendererContext.Provider>