From d4dd81412fcac73be249a95f8e9cb034f659ff79 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:44:00 -0700
Subject: [PATCH 1/2] chore: update token colors in meter, illustrated message

---
 packages/@react-spectrum/s2/src/IllustratedMessage.tsx | 5 ++---
 packages/@react-spectrum/s2/src/Meter.tsx              | 8 ++++----
 packages/@react-spectrum/s2/style/spectrum-theme.ts    | 5 +++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index eeafbd923f4..90a60d740a6 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -114,9 +114,8 @@ const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolea
   '--iconPrimary': {
     type: 'color',
     value: {
-      // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec
-      default: 'gray-800',
-      isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead
+      default: 'neutral',
+      isInDropZone: 'neutral-visual',
       isDropTarget: 'accent'
     }
   }
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 6b5b55e39e8..93ecee6bda3 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -82,11 +82,11 @@ const fillStyles = style<MeterStyleProps>({
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
-    default: 'informative',
+    default: 'informative-visual',
     variant: {
-      positive: 'positive',
-      notice: 'notice',
-      negative: 'negative'
+      positive: 'positive-visual',
+      notice: 'notice-visual',
+      negative: 'negative-visual'
     },
     staticColor: {
       white: {
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index cbfaadbcf34..8cdd3bf84a0 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -451,6 +451,7 @@ export const style = createTheme({
         isPressed: colorToken('neutral-subdued-content-color-down')
         // isSelected: colorToken('neutral-subdued-content-color-selected'),
       },
+      'neutral-visual': weirdColorToken('neutral-visual-color'),
       negative: {
         default: colorToken('negative-content-color-default'),
         isHovered: colorToken('negative-content-color-hover'),
@@ -495,6 +496,7 @@ export const style = createTheme({
         isFocusVisible: weirdColorToken('negative-background-color-key-focus'),
         isPressed: weirdColorToken('negative-background-color-down')
       },
+      'negative-visual': weirdColorToken('negative-visual-color'),
       'negative-subtle': weirdColorToken('negative-subtle-background-color-default'),
       informative: {
         default: weirdColorToken('informative-background-color-default'),
@@ -502,6 +504,7 @@ export const style = createTheme({
         isFocusVisible: weirdColorToken('informative-background-color-key-focus'),
         isPressed: weirdColorToken('informative-background-color-down')
       },
+      'informative-visual': weirdColorToken('informative-visual-color'),
       'informative-subtle': weirdColorToken('informative-subtle-background-color-default'),
       positive: {
         default: weirdColorToken('positive-background-color-default'),
@@ -509,8 +512,10 @@ export const style = createTheme({
         isFocusVisible: weirdColorToken('positive-background-color-key-focus'),
         isPressed: weirdColorToken('positive-background-color-down')
       },
+      'positive-visual': weirdColorToken('positive-visual-color'),
       'positive-subtle': weirdColorToken('positive-subtle-background-color-default'),
       notice: weirdColorToken('notice-background-color-default'),
+      'notice-visual': weirdColorToken('notice-visual-color'),
       'notice-subtle': weirdColorToken('notice-subtle-background-color-default'),
       gray: weirdColorToken('gray-background-color-default'),
       'gray-subtle': weirdColorToken('gray-subtle-background-color-default'),

From b1f4b6d08265ddca4398053b0f56141ac23c2f93 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:10:15 -0400
Subject: [PATCH 2/2] illustration should have same color in IM and DropZone

---
 packages/@react-spectrum/s2/src/IllustratedMessage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index 90a60d740a6..61295f36669 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -115,7 +115,6 @@ const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolea
     type: 'color',
     value: {
       default: 'neutral',
-      isInDropZone: 'neutral-visual',
       isDropTarget: 'accent'
     }
   }