Update Spectrum colors to v6 #3604

devongovett · 2022-10-05T23:28:58Z

Updates all global theme colors to v6. This was scripted based on the latest @spectrum-css/vars package (v8), mapping their updated variable names to our old ones.

Known differences between what's implemented here and what's in the XD files, because the XD files have not been updated to the new token system yet:

TextField, Picker, ActionButton, and other field component borders are darker.
TextField and other field invalid state border colors are different
ProgressBar and Meter colors are different from the XD files
Tabs emphasized color does not meet contrast in XD and will be updated.

adobe-bot · 2022-10-05T23:36:19Z

Build successful! 🎉

…color-v6

adobe-bot · 2022-10-11T00:55:30Z

Build successful! 🎉

adobe-bot · 2022-10-11T01:15:07Z

Build successful! 🎉

adobe-bot · 2022-10-14T01:12:52Z

Build successful! 🎉

adobe-bot · 2022-10-18T20:46:46Z

Build successful! 🎉

adobe-bot · 2022-10-20T18:53:07Z

Build successful! 🎉

adobe-bot · 2022-10-21T02:08:17Z

Build successful! 🎉

devongovett · 2022-10-21T02:59:29Z

To do: fix syntax highlighting in docs, especially in dark mode.

adobe-bot · 2022-10-24T18:57:34Z

Build successful! 🎉

adobe-bot · 2022-10-25T19:22:47Z

Build successful! 🎉

…color-v6

adobe-bot · 2022-10-27T20:24:03Z

Build successful! 🎉

adobe-bot · 2022-10-27T20:24:04Z

API Changes

undefined already in set

@react-spectrum/utils

viewStyleProps

-convertStyleProps {
-  props: ViewStyleProps
-  handlers: StyleHandlers
-  direction: Direction
-  matchedBreakpoints: Array<Breakpoint>
-  returnVal: undefined
-}
+

useMatchedBreakpoints

-
+convertStyleProps<C extends ColorVersion> {
+  props: ViewStyleProps<C>
+  handlers: StyleHandlers
+  direction: Direction
+  matchedBreakpoints: Array<Breakpoint>
+  returnVal: undefined
+}

@react-spectrum/view

View

-View {
-  UNSAFE_className?: string
-  UNSAFE_style?: CSSProperties
-  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
-  backgroundColor?: Responsive<BackgroundColorValue>
-  borderBottomColor?: Responsive<BorderColorValue>
-  borderBottomEndRadius?: Responsive<BorderRadiusValue>
-  borderBottomStartRadius?: Responsive<BorderRadiusValue>
-  borderBottomWidth?: Responsive<BorderSizeValue>
-  borderColor?: Responsive<BorderColorValue>
-  borderEndColor?: Responsive<BorderColorValue>
-  borderEndWidth?: Responsive<BorderSizeValue>
-  borderRadius?: Responsive<BorderRadiusValue>
-  borderStartColor?: Responsive<BorderColorValue>
-  borderStartWidth?: Responsive<BorderSizeValue>
-  borderTopColor?: Responsive<BorderColorValue>
-  borderTopEndRadius?: Responsive<BorderRadiusValue>
-  borderTopStartRadius?: Responsive<BorderRadiusValue>
-  borderTopWidth?: Responsive<BorderSizeValue>
-  borderWidth?: Responsive<BorderSizeValue>
-  borderXColor?: Responsive<BorderColorValue>
-  borderXWidth?: Responsive<BorderSizeValue>
-  borderYColor?: Responsive<BorderColorValue>
-  borderYWidth?: Responsive<BorderSizeValue>
-  bottom?: Responsive<DimensionValue>
-  children?: ReactNode
-  elementType?: string | JSXElementConstructor<any>
-  end?: Responsive<DimensionValue>
-  flex?: Responsive<string | number | boolean>
-  flexBasis?: Responsive<number | string>
-  flexGrow?: Responsive<number>
-  flexShrink?: Responsive<number>
-  gridArea?: Responsive<string>
-  gridColumn?: Responsive<string>
-  gridColumnEnd?: Responsive<string>
-  gridColumnStart?: Responsive<string>
-  gridRow?: Responsive<string>
-  gridRowEnd?: Responsive<string>
-  gridRowStart?: Responsive<string>
-  height?: Responsive<DimensionValue>
-  id?: string
-  isHidden?: Responsive<boolean>
-  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
-  left?: Responsive<DimensionValue>
-  margin?: Responsive<DimensionValue>
-  marginBottom?: Responsive<DimensionValue>
-  marginEnd?: Responsive<DimensionValue>
-  marginStart?: Responsive<DimensionValue>
-  marginTop?: Responsive<DimensionValue>
-  marginX?: Responsive<DimensionValue>
-  marginY?: Responsive<DimensionValue>
-  maxHeight?: Responsive<DimensionValue>
-  maxWidth?: Responsive<DimensionValue>
-  minHeight?: Responsive<DimensionValue>
-  minWidth?: Responsive<DimensionValue>
-  order?: Responsive<number>
-  overflow?: Responsive<string>
-  padding?: Responsive<DimensionValue>
-  paddingBottom?: Responsive<DimensionValue>
-  paddingEnd?: Responsive<DimensionValue>
-  paddingStart?: Responsive<DimensionValue>
-  paddingTop?: Responsive<DimensionValue>
-  paddingX?: Responsive<DimensionValue>
-  paddingY?: Responsive<DimensionValue>
-  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
-  right?: Responsive<DimensionValue>
-  start?: Responsive<DimensionValue>
-  top?: Responsive<DimensionValue>
-  width?: Responsive<DimensionValue>
-  zIndex?: Responsive<number>
-}
+

ViewProps

-ViewProps {
-  UNSAFE_className?: string
-  UNSAFE_style?: CSSProperties
-  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
-  backgroundColor?: Responsive<BackgroundColorValue>
-  borderBottomColor?: Responsive<BorderColorValue>
-  borderBottomEndRadius?: Responsive<BorderRadiusValue>
-  borderBottomStartRadius?: Responsive<BorderRadiusValue>
-  borderBottomWidth?: Responsive<BorderSizeValue>
-  borderColor?: Responsive<BorderColorValue>
-  borderEndColor?: Responsive<BorderColorValue>
-  borderEndWidth?: Responsive<BorderSizeValue>
-  borderRadius?: Responsive<BorderRadiusValue>
-  borderStartColor?: Responsive<BorderColorValue>
-  borderStartWidth?: Responsive<BorderSizeValue>
-  borderTopColor?: Responsive<BorderColorValue>
-  borderTopEndRadius?: Responsive<BorderRadiusValue>
-  borderTopStartRadius?: Responsive<BorderRadiusValue>
-  borderTopWidth?: Responsive<BorderSizeValue>
-  borderWidth?: Responsive<BorderSizeValue>
-  borderXColor?: Responsive<BorderColorValue>
-  borderXWidth?: Responsive<BorderSizeValue>
-  borderYColor?: Responsive<BorderColorValue>
-  borderYWidth?: Responsive<BorderSizeValue>
-  bottom?: Responsive<DimensionValue>
-  children?: ReactNode
-  elementType?: string | JSXElementConstructor<any>
-  end?: Responsive<DimensionValue>
-  flex?: Responsive<string | number | boolean>
-  flexBasis?: Responsive<number | string>
-  flexGrow?: Responsive<number>
-  flexShrink?: Responsive<number>
-  gridArea?: Responsive<string>
-  gridColumn?: Responsive<string>
-  gridColumnEnd?: Responsive<string>
-  gridColumnStart?: Responsive<string>
-  gridRow?: Responsive<string>
-  gridRowEnd?: Responsive<string>
-  gridRowStart?: Responsive<string>
-  height?: Responsive<DimensionValue>
-  id?: string
-  isHidden?: Responsive<boolean>
-  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
-  left?: Responsive<DimensionValue>
-  margin?: Responsive<DimensionValue>
-  marginBottom?: Responsive<DimensionValue>
-  marginEnd?: Responsive<DimensionValue>
-  marginStart?: Responsive<DimensionValue>
-  marginTop?: Responsive<DimensionValue>
-  marginX?: Responsive<DimensionValue>
-  marginY?: Responsive<DimensionValue>
-  maxHeight?: Responsive<DimensionValue>
-  maxWidth?: Responsive<DimensionValue>
-  minHeight?: Responsive<DimensionValue>
-  minWidth?: Responsive<DimensionValue>
-  order?: Responsive<number>
-  overflow?: Responsive<string>
-  padding?: Responsive<DimensionValue>
-  paddingBottom?: Responsive<DimensionValue>
-  paddingEnd?: Responsive<DimensionValue>
-  paddingStart?: Responsive<DimensionValue>
-  paddingTop?: Responsive<DimensionValue>
-  paddingX?: Responsive<DimensionValue>
-  paddingY?: Responsive<DimensionValue>
-  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
-  right?: Responsive<DimensionValue>
-  start?: Responsive<DimensionValue>
-  top?: Responsive<DimensionValue>
-  width?: Responsive<DimensionValue>
-  zIndex?: Responsive<number>
-}
+

undefined

-
+View<C extends ColorVersion> {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  backgroundColor?: Responsive<BackgroundColor[ColorVersion]>
+  borderBottomColor?: Responsive<BorderColor[ColorVersion]>
+  borderBottomEndRadius?: Responsive<BorderRadiusValue>
+  borderBottomStartRadius?: Responsive<BorderRadiusValue>
+  borderBottomWidth?: Responsive<BorderSizeValue>
+  borderColor?: Responsive<BorderColor[ColorVersion]>
+  borderEndColor?: Responsive<BorderColor[ColorVersion]>
+  borderEndWidth?: Responsive<BorderSizeValue>
+  borderRadius?: Responsive<BorderRadiusValue>
+  borderStartColor?: Responsive<BorderColor[ColorVersion]>
+  borderStartWidth?: Responsive<BorderSizeValue>
+  borderTopColor?: Responsive<BorderColor[ColorVersion]>
+  borderTopEndRadius?: Responsive<BorderRadiusValue>
+  borderTopStartRadius?: Responsive<BorderRadiusValue>
+  borderTopWidth?: Responsive<BorderSizeValue>
+  borderWidth?: Responsive<BorderSizeValue>
+  borderXColor?: Responsive<BorderColor[ColorVersion]>
+  borderXWidth?: Responsive<BorderSizeValue>
+  borderYColor?: Responsive<BorderColor[ColorVersion]>
+  borderYWidth?: Responsive<BorderSizeValue>
+  bottom?: Responsive<DimensionValue>
+  children?: ReactNode
+  colorVersion?: ColorVersion = 5
+  elementType?: string | JSXElementConstructor<any>
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
+  id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  overflow?: Responsive<string>
+  padding?: Responsive<DimensionValue>
+  paddingBottom?: Responsive<DimensionValue>
+  paddingEnd?: Responsive<DimensionValue>
+  paddingStart?: Responsive<DimensionValue>
+  paddingTop?: Responsive<DimensionValue>
+  paddingX?: Responsive<DimensionValue>
+  paddingY?: Responsive<DimensionValue>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
+}

undefined

-
+ViewProps<C extends ColorVersion> {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  backgroundColor?: Responsive<BackgroundColor[ColorVersion]>
+  borderBottomColor?: Responsive<BorderColor[ColorVersion]>
+  borderBottomEndRadius?: Responsive<BorderRadiusValue>
+  borderBottomStartRadius?: Responsive<BorderRadiusValue>
+  borderBottomWidth?: Responsive<BorderSizeValue>
+  borderColor?: Responsive<BorderColor[ColorVersion]>
+  borderEndColor?: Responsive<BorderColor[ColorVersion]>
+  borderEndWidth?: Responsive<BorderSizeValue>
+  borderRadius?: Responsive<BorderRadiusValue>
+  borderStartColor?: Responsive<BorderColor[ColorVersion]>
+  borderStartWidth?: Responsive<BorderSizeValue>
+  borderTopColor?: Responsive<BorderColor[ColorVersion]>
+  borderTopEndRadius?: Responsive<BorderRadiusValue>
+  borderTopStartRadius?: Responsive<BorderRadiusValue>
+  borderTopWidth?: Responsive<BorderSizeValue>
+  borderWidth?: Responsive<BorderSizeValue>
+  borderXColor?: Responsive<BorderColor[ColorVersion]>
+  borderXWidth?: Responsive<BorderSizeValue>
+  borderYColor?: Responsive<BorderColor[ColorVersion]>
+  borderYWidth?: Responsive<BorderSizeValue>
+  bottom?: Responsive<DimensionValue>
+  children?: ReactNode
+  colorVersion?: ColorVersion = 5
+  elementType?: string | JSXElementConstructor<any>
+  end?: Responsive<DimensionValue>
+  flex?: Responsive<string | number | boolean>
+  flexBasis?: Responsive<number | string>
+  flexGrow?: Responsive<number>
+  flexShrink?: Responsive<number>
+  gridArea?: Responsive<string>
+  gridColumn?: Responsive<string>
+  gridColumnEnd?: Responsive<string>
+  gridColumnStart?: Responsive<string>
+  gridRow?: Responsive<string>
+  gridRowEnd?: Responsive<string>
+  gridRowStart?: Responsive<string>
+  height?: Responsive<DimensionValue>
+  id?: string
+  isHidden?: Responsive<boolean>
+  justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
+  left?: Responsive<DimensionValue>
+  margin?: Responsive<DimensionValue>
+  marginBottom?: Responsive<DimensionValue>
+  marginEnd?: Responsive<DimensionValue>
+  marginStart?: Responsive<DimensionValue>
+  marginTop?: Responsive<DimensionValue>
+  marginX?: Responsive<DimensionValue>
+  marginY?: Responsive<DimensionValue>
+  maxHeight?: Responsive<DimensionValue>
+  maxWidth?: Responsive<DimensionValue>
+  minHeight?: Responsive<DimensionValue>
+  minWidth?: Responsive<DimensionValue>
+  order?: Responsive<number>
+  overflow?: Responsive<string>
+  padding?: Responsive<DimensionValue>
+  paddingBottom?: Responsive<DimensionValue>
+  paddingEnd?: Responsive<DimensionValue>
+  paddingStart?: Responsive<DimensionValue>
+  paddingTop?: Responsive<DimensionValue>
+  paddingX?: Responsive<DimensionValue>
+  paddingY?: Responsive<DimensionValue>
+  position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
+  right?: Responsive<DimensionValue>
+  start?: Responsive<DimensionValue>
+  top?: Responsive<DimensionValue>
+  width?: Responsive<DimensionValue>
+  zIndex?: Responsive<number>
+}

Update Spectrum colors to v6

b87f8de

devongovett added 7 commits October 6, 2022 15:24

Merge branch 'main' of github.com:adobe/react-spectrum into spectrum-…

21a9f71

…color-v6

Fix invalid hover states

6352aba

Update badge and tooltip semantic colors

b7afe61

Update tabs

35d7185

Make picker, combobox, and datepicker match icon colors

be9e9fe

Fix slider track color

16a25d2

Fix table sort icon color

ba7e5f6

Fix picker invalid icon color

161d086

devongovett added 2 commits October 13, 2022 17:15

Add full v6 color palette with backward compatible mappings

ceef6a4

Add colorVersion prop to View

63cd992

This was referenced Oct 14, 2022

Button and ActionButton design updates #3650

Merged

Support spectrum express theme #3651

Merged

Update aliases to new color mappings

657a0bf

devongovett marked this pull request as ready for review October 19, 2022 21:23

Don't apply invalid states when disabled

6a201a1

devongovett added 5 commits October 20, 2022 18:56

Fix calendar and date picker selection colors

31401fa

Fix logic button

f9ecbe9

Fix badge

cd252f0

Fix accordion disabled text color

d6a7726

Fix action bar background

2fd582b

Fix syntax highlighting theme in dark mode

102c265

Fix slider track

fce1075

dannify previously approved these changes Oct 25, 2022

View reviewed changes

matthewdeutsch assigned devongovett Oct 26, 2022

snowystinger previously approved these changes Oct 26, 2022

View reviewed changes

devongovett added 2 commits October 27, 2022 13:11

Merge branch 'main' of github.com:adobe/react-spectrum into spectrum-…

eef64c9

…color-v6

Disable production docs deploy

422c973

devongovett dismissed stale reviews from snowystinger and dannify via 422c973 October 27, 2022 20:15

devongovett merged commit c604e69 into main Oct 27, 2022

devongovett deleted the spectrum-color-v6 branch October 27, 2022 20:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update Spectrum colors to v6 #3604

Update Spectrum colors to v6 #3604

Uh oh!

devongovett commented Oct 5, 2022 •

edited

Loading

Uh oh!

adobe-bot commented Oct 5, 2022

Uh oh!

adobe-bot commented Oct 11, 2022

Uh oh!

adobe-bot commented Oct 11, 2022

Uh oh!

adobe-bot commented Oct 14, 2022

Uh oh!

adobe-bot commented Oct 18, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Oct 21, 2022

Uh oh!

devongovett commented Oct 21, 2022

Uh oh!

adobe-bot commented Oct 24, 2022

Uh oh!

adobe-bot commented Oct 25, 2022

Uh oh!

adobe-bot commented Oct 27, 2022

Uh oh!

adobe-bot commented Oct 27, 2022

Uh oh!

Uh oh!

Update Spectrum colors to v6 #3604

Update Spectrum colors to v6 #3604

Uh oh!

Conversation

devongovett commented Oct 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adobe-bot commented Oct 5, 2022

Uh oh!

adobe-bot commented Oct 11, 2022

Uh oh!

adobe-bot commented Oct 11, 2022

Uh oh!

adobe-bot commented Oct 14, 2022

Uh oh!

adobe-bot commented Oct 18, 2022

Uh oh!

adobe-bot commented Oct 20, 2022

Uh oh!

adobe-bot commented Oct 21, 2022

Uh oh!

devongovett commented Oct 21, 2022

Uh oh!

adobe-bot commented Oct 24, 2022

Uh oh!

adobe-bot commented Oct 25, 2022

Uh oh!

adobe-bot commented Oct 27, 2022

Uh oh!

adobe-bot commented Oct 27, 2022

API Changes

@react-spectrum/utils

viewStyleProps

useMatchedBreakpoints

@react-spectrum/view

View

ViewProps

undefined

undefined

Uh oh!

Uh oh!

devongovett commented Oct 5, 2022 •

edited

Loading