chore: Update spectrum tokens (#7736)

* chore: update spectrum tokens

* fix chromatic stories label ordering

* fix remaining stories

* fix flaky story

* update remaining instance of tokens

* Revert chromatic changes and mergeProps order

* fix lint

* stabilize colorswatchpicker again

Author: snowystinger

packages/@react-aria/utils/src/mergeProps.ts

@@ -23,7 +23,7 @@ type PropsArg = Props | null | undefined;
 // taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
 type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? NullToObject<V> : never;
 type NullToObject<T> = T extends (null | undefined) ? {} : T;
- 
+
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 
 /**
@@ -34,10 +34,10 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
  * @param args - Multiple sets of props to merge together.
  */
 export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersection<TupleTypes<T>> {
-  // Start with a base clone of the last argument. This is a lot faster than starting
+  // Start with a base clone of the first argument. This is a lot faster than starting
   // with an empty object and adding properties as we go.
-  let result: Props = {...args[args.length - 1]};
-  for (let i = args.length - 2; i >= 0; i--) {
+  let result: Props = {...args[0]};
+  for (let i = 1; i < args.length; i++) {
     let props = args[i];
     for (let key in props) {
       let a = result[key];
@@ -53,20 +53,20 @@ export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersectio
         key.charCodeAt(2) >= /* 'A' */ 65 &&
         key.charCodeAt(2) <= /* 'Z' */ 90
       ) {
-        result[key] = chain(b, a);
+        result[key] = chain(a, b);
 
         // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
       } else if (
         (key === 'className' || key === 'UNSAFE_className') &&
         typeof a === 'string' &&
         typeof b === 'string'
       ) {
-        result[key] = clsx(b, a);
+        result[key] = clsx(a, b);
       } else if (key === 'id' && a && b) {
-        result.id = mergeIds(b, a);
+        result.id = mergeIds(a, b);
         // Override others
-      } else if (a === undefined) {
-        result[key] = b;
+      } else {
+        result[key] = b !== undefined ? b : a;
       }
     }
   }

packages/@react-spectrum/s2/chromatic/ColorSwatchPicker.stories.tsx

@@ -10,9 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
+import {ColorSwatch} from '../src/ColorSwatch';
 import {ColorSwatchPicker} from '../src/ColorSwatchPicker';
-import {Example, ManySwatches} from '../stories/ColorSwatchPicker.stories';
+import {Example} from '../stories/ColorSwatchPicker.stories';
 import type {Meta} from '@storybook/react';
+import {style} from '../style' with {type: 'macro'};
+
 
 const meta: Meta<typeof ColorSwatchPicker> = {
   component: ColorSwatchPicker,
@@ -24,4 +27,39 @@ const meta: Meta<typeof ColorSwatchPicker> = {
 
 export default meta;
 
-export {Example, ManySwatches};
+export {Example};
+
+let colors = [
+  '#b3e5c2',
+  '#71fa78',
+  '#51a358',
+  '#0346d4',
+  '#6f975c',
+  '#d1239a',
+  '#70f72d',
+  '#36f556',
+  '#470a97',
+  '#1c0aa4',
+  '#3500c0',
+  '#dcd549',
+  '#bfb405',
+  '#710ac9',
+  '#342c8f',
+  '#858af4',
+  '#133c2b',
+  '#14dbac',
+  '#41696c',
+  '#f28686',
+  '#58f9a5',
+  '#ff8553',
+  '#7cf5c3',
+  '#bb6b41'
+];
+
+export const ManySwatches = (args: any) => (
+  <ColorSwatchPicker {...args} styles={style({maxWidth: 192})}>
+    {colors.map((color) => {
+      return <ColorSwatch key={color} color={color} />;
+    })}
+  </ColorSwatchPicker>
+);

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

@@ -120,7 +120,7 @@
     "postpack": "git checkout -- package.json"
   },
   "devDependencies": {
-    "@adobe/spectrum-tokens": "^13.0.0-beta.53",
+    "@adobe/spectrum-tokens": "^13.0.0-beta.56",
     "@parcel/macros": "^2.13.0",
     "@react-aria/test-utils": "1.0.0-alpha.3",
     "@testing-library/dom": "^10.1.0",

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

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

yarn.lock

@@ -145,10 +145,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@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
+"@adobe/spectrum-tokens@npm:^13.0.0-beta.56":
+  version: 13.0.0-beta.56
+  resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.56"
+  checksum: 10c0/473a7e3cfb9317862584045b31c16e67122512f310c490c8cb9e11c1d200bbd78f79885e970e16034b375c19f2a27da27397a4ba3ee0cec1a8424a34582a85ad
   languageName: node
   linkType: hard
 
@@ -7775,7 +7775,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.53"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.56"
     "@parcel/plugin": "npm:^2.0.0"
     "@svgr/core": "npm:^8.1.0"
     "@svgr/plugin-jsx": "npm:^8.1.0"
@@ -7894,7 +7894,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.53"
+    "@adobe/spectrum-tokens": "npm:^13.0.0-beta.56"
     "@parcel/macros": "npm:^2.13.0"
     "@react-aria/collections": "npm:3.0.0-alpha.7"
     "@react-aria/focus": "npm:^3.19.1"