chore: update s2 tokens (#7371)

* chore: update s2 tokens

* correct theme

* fix lint

* Upgrade all deps

---------

Co-authored-by: Devon Govett <[email protected]>

Author: snowystinger

packages/@react-spectrum/s2/package.json

@@ -120,7 +120,7 @@
     "postpack": "git checkout -- package.json"
   },
   "devDependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.48",
+    "@adobe/spectrum-tokens": "^13.0.0-beta.53",
     "@parcel/macros": "2.12.1-canary.3165",
     "@react-aria/test-utils": "1.0.0-alpha.1"
   },

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

@@ -20,7 +20,7 @@ import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, LabelPosition} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {size, style} from '../style' with {type: 'macro'};
+import {lightDark, size, style} from '../style' with {type: 'macro'};
 import {SkeletonWrapper} from './Skeleton';
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -37,8 +37,8 @@ interface MeterStyleProps {
    * @default 'M'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
-  /** 
-   * The static color style to apply. Useful when the button appears over a color background. 
+  /**
+   * The static color style to apply. Useful when the button appears over a color background.
    */
   staticColor?: 'white' | 'black',
   /**
@@ -82,11 +82,11 @@ const fillStyles = style<MeterStyleProps>({
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
-    default: 'informative-visual',
+    default: lightDark('informative-800', 'informative-900'), // 'informative-visual',
     variant: {
-      positive: 'positive-visual',
-      notice: 'notice-visual',
-      negative: 'negative-visual'
+      positive: lightDark('positive-800', 'positive-900'), // 'positive-visual',
+      notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',
+      negative: lightDark('negative-800', 'negative-900') // 'negative-visual'
     },
     staticColor: {
       white: {

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -451,7 +451,6 @@ 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'),
@@ -496,26 +495,22 @@ 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'),
         isHovered: weirdColorToken('informative-background-color-hover'),
         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'),
         isHovered: weirdColorToken('positive-background-color-hover'),
         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'),

packages/dev/parcel-transformer-s2-icon/package.json

@@ -6,7 +6,7 @@
     "parcel": "^2.0.0"
   },
   "dependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.48",
+    "@adobe/spectrum-tokens": "^13.0.0-beta.53",
     "@parcel/plugin": "^2.0.0",
     "@svgr/core": "^6.2.0",
     "@svgr/plugin-jsx": "^6.2.0",

yarn.lock

@@ -145,10 +145,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@adobe/spectrum-tokens@npm:^13.0.0-beta.48":
-  version: 13.0.0-beta.49
-  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.49"
-  checksum: 10c0/91dad202f31901a6e014a019964c1d917ef073f98debd2f04573c371109dd491ba0a942c68843358f2b3f10281737173b89daed23328f233e290e12b7faa1d49
+"@adobe/spectrum-tokens@npm:^13.0.0-beta.53":
+  version: 13.0.0-beta.53
+  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.53"
+  checksum: 10c0/e9968e211aec06cb6af1fbc29712cafa79f0b971b4c22882c6a65f14ea8fb23afe2c81f8bbfd377bbde4332cb1dbdc873e6a32a2cc6e3933592eb5724a6ce471
   languageName: node
   linkType: hard
 
@@ -7534,7 +7534,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/parcel-transformer-s2-icon@workspace:packages/dev/parcel-transformer-s2-icon"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53"
     "@parcel/plugin": "npm:^2.0.0"
     "@svgr/core": "npm:^6.2.0"
     "@svgr/plugin-jsx": "npm:^6.2.0"
@@ -7651,7 +7651,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2"
   dependencies:
-    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.48"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53"
     "@parcel/macros": "npm:2.12.1-canary.3165"
     "@react-aria/collections": "npm:3.0.0-alpha.5"
     "@react-aria/i18n": "npm:^3.12.3"