feat: wrap spectrum View, Text and Heading to accept custom colors

[dsmmcken]

• Exposes our extra semantic colors to these components
• Created colorUtils in theme, containing theme variables
• Move spectrumUtils to spectrum/utils (was originally going to put it here)
• Added eslint config to allow using UNSAFE_styles/UNSAFE_classname

Tested with:

<Text color="red">css red</Text>
<Text color="red-1000">theme red-1000</Text>
<Text color="accent">accent</Text>
<Text color="positive">positive</Text>
<Text color="negative">negative</Text>
<Text color="info">info</Text>
<Text color="notice">notice</Text>
<Text color="bg">bg</Text>
<Text color="color-mix(in srgb, red, blue)">purple</Text>

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.23%. Comparing base (f8a12f7) to head (ad077e0).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1903      +/-   ##
==========================================
+ Coverage   46.20%   46.23%   +0.03%     
==========================================
  Files         641      645       +4     
  Lines       38218    38241      +23     
  Branches     9670     9672       +2     
==========================================
+ Hits        17659    17682      +23     
  Misses      20506    20506              
  Partials       53       53              

Flag	Coverage Δ
unit	46.23% <100.00%> (+0.03%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bmingles]

General idea looks good. I think you may need to memoize the converted props since the UNSAFE_style prop gets re-created on every render. Possible Spectrum handles this gracefully, but IMO it's good to not assume that will be the case.

I think you could incorporate a general util here. Something like:

export function wrapColorProps<
  TProps extends Record<string, unknown> & {
    backgroundColor?: ColorValue;
    color?: ColorValue;
    UNSAFE_style?: React.CSSProperties;
  },
>(props: TProps): Omit<TProps, 'backgroundColor' | 'color'> {
  const { backgroundColor, color, ...rest } = props;

  if (backgroundColor == null && color == null) {
    return props;
  }

  return {
    ...rest,
    UNSAFE_style: {
      ...props.UNSAFE_style,
      backgroundColor:
        backgroundColor == null ? undefined : colorValueStyle(backgroundColor),
      color: color == null ? undefined : colorValueStyle(color),
    },
  };
}

And then consuming it could be like:

const colorProps = useMemo(() => wrapColorProps(props), [props]);
return <SpectrumView {...colorProps} />;

Alternatively, we could make a custom hook like useWrappedColorProps to include the memoization.

[bmingles]

Left some comments. The suggestion for wrapColorProps function may impact the other suggestions, so I would look at that comment first to see what you think.

[dsmmcken]

Kept it simple. Just did a useMemo for style, and allowed colorValueStyle to return undefined. Didn't seem worth a separate abstraction.

[bmingles]

LGTM

[dsmmcken]

I didn't do an exhaustive search, but replaced some usages. We should add a no-restricted-modules eslint rule later to not allow importing from @adobe/spectrum from outside of the components/spectrum and theme/ folders.

[bmingles]

LGTM