diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json index 4c8d8bf4490..70ee90d8576 100644 --- a/packages/@react-spectrum/s2/package.json +++ b/packages/@react-spectrum/s2/package.json @@ -94,7 +94,7 @@ "react-stately": "3.49.0" }, "devDependencies": { - "@adobe/spectrum-tokens": "14.0.0", + "@adobe/spectrum-tokens": "14.15.0", "@react-aria/test-utils": "^1.0.0-alpha.8", "@storybook/jest": "^0.2.3", "@testing-library/dom": "^10.1.0", diff --git a/packages/@react-spectrum/s2/style/tokens.ts b/packages/@react-spectrum/s2/style/tokens.ts index c1b9e76783c..8f04d400e25 100644 --- a/packages/@react-spectrum/s2/style/tokens.ts +++ b/packages/@react-spectrum/s2/style/tokens.ts @@ -76,15 +76,28 @@ export function weirdColorToken(name: TokenName): ColorRef { type ReplaceColor = S extends `${infer S}-color-${infer N}` ? `${S}-${N}` : S; +// Collects all tokens matching `${scale}-` and returns them sorted by that +// trailing number. Object key order in the tokens JSON is not guaranteed to be numeric +// (e.g. `blue-1000` may have been emitted before `blue-900`), so we can't rely on insertion order. +function sortedScaleTokens(scale: string): string[] { + let re = new RegExp(`^${scale}-(\\d+)$`); + let matches: [string, number][] = []; + for (let token in tokens) { + let m = re.exec(token); + if (m) { + matches.push([token, Number(m[1])]); + } + } + matches.sort((a, b) => a[1] - b[1]); + return matches.map(([token]) => token); +} + export function colorScale( scale: S ): Record>, ReturnType> { let res: any = {}; - let re = new RegExp(`^${scale}-\\d+$`); - for (let token in tokens) { - if (re.test(token)) { - res[token.replace('-color', '')] = colorToken(token as TokenName); - } + for (let token of sortedScaleTokens(scale)) { + res[token.replace('-color', '')] = colorToken(token as TokenName); } return res; } @@ -93,11 +106,8 @@ export function simpleColorScale( scale: S ): Record, string> { let res: any = {}; - let re = new RegExp(`^${scale}-\\d+$`); - for (let token in tokens) { - if (re.test(token)) { - res[token] = (tokens as any)[token].value; - } + for (let token of sortedScaleTokens(scale)) { + res[token] = (tokens as any)[token].value; } return res; } diff --git a/packages/dev/parcel-transformer-s2-icon/package.json b/packages/dev/parcel-transformer-s2-icon/package.json index 020764e4fa9..42f794f9e4a 100644 --- a/packages/dev/parcel-transformer-s2-icon/package.json +++ b/packages/dev/parcel-transformer-s2-icon/package.json @@ -11,7 +11,7 @@ "access": "public" }, "dependencies": { - "@adobe/spectrum-tokens": "14.0.0", + "@adobe/spectrum-tokens": "14.15.0", "@parcel/plugin": "^2.0.0", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", diff --git a/yarn.lock b/yarn.lock index 6330a4fde4f..1fd7ea20571 100644 --- a/yarn.lock +++ b/yarn.lock @@ -129,10 +129,10 @@ __metadata: languageName: unknown linkType: soft -"@adobe/spectrum-tokens@npm:14.0.0": - version: 14.0.0 - resolution: "@adobe/spectrum-tokens@npm:14.0.0" - checksum: 10c0/b94015d75786babf53144225fccfe3d989eb66e2ab5686e5e2feba73c49f83533e2ea0a7c4e9b0d47e5622d89bcad1b32cf39b61c2a6e3ae4690a20b79672b4c +"@adobe/spectrum-tokens@npm:14.15.0": + version: 14.15.0 + resolution: "@adobe/spectrum-tokens@npm:14.15.0" + checksum: 10c0/dc95e825a8d289208270d4132bb003e5cfabecb71d89912fffc15391ae6e4cf0c96d7fe1243a9dad48febf190f491b3c05def27da99f1465fa897472dc0ad10f languageName: node linkType: hard @@ -7964,7 +7964,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:14.0.0" + "@adobe/spectrum-tokens": "npm:14.15.0" "@parcel/plugin": "npm:^2.0.0" "@svgr/core": "npm:^8.1.0" "@svgr/plugin-jsx": "npm:^8.1.0" @@ -8111,7 +8111,7 @@ __metadata: version: 0.0.0-use.local resolution: "@react-spectrum/s2@workspace:packages/@react-spectrum/s2" dependencies: - "@adobe/spectrum-tokens": "npm:14.0.0" + "@adobe/spectrum-tokens": "npm:14.15.0" "@internationalized/date": "npm:^3.12.3" "@internationalized/number": "npm:^3.6.7" "@parcel/macros": "npm:^2.16.3"