Skip to content

Commit f6843c6

Browse files
chore(deps): update dependency @adobe/spectrum-tokens to ^13.12.0 (spectrum-two) (#4067)
* feat(tokens): support for composite formats * chore: update compare tool to use next tag instead of latest * chore: allow spectrum-two VRT runs --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: castastrophe <[email protected]>
1 parent caf5e3e commit f6843c6

19 files changed

+3397
-721
lines changed

.changeset/few-tigers-say.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
"@spectrum-css/tokens": minor
3+
---
4+
5+
Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1) -> [13.12.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.12.0).
6+
7+
### Newly deprecated
8+
9+
- `--spectrum-card-minimum-width`: This token has been deprecated, use `--spectrum-card-minimum-width-default` instead.
10+
- `--spectrum-tree-view-item-to-item`: This token has been deprecated, use `--spectrum-tree-view-item-to-item-default` instead.
11+
12+
### Newly added
13+
14+
| Token name | Token value |
15+
| ------------------------------------------------ | -------------------------------------- |
16+
| `--spectrum-component-xs-regular-font-family` | `--spectrum-sans-serif-font-family` |
17+
| `--spectrum-component-xs-regular-font-size` | `--spectrum-font-size-50` |
18+
| `--spectrum-component-xs-regular-font-weight` | `--spectrum-regular-font-weight` |
19+
| `--spectrum-component-xs-regular-letter-spacing` | `--spectrum-letter-spacing` |
20+
| `--spectrum-component-xs-regular-line-height` | `--spectrum-line-height-font-size-50` |
21+
| `--spectrum-component-xs-medium-font-family` | `--spectrum-sans-serif-font-family` |
22+
| `--spectrum-component-xs-medium-font-size` | `--spectrum-font-size-50` |
23+
| `--spectrum-component-xs-medium-font-weight` | `--spectrum-medium-font-weight` |
24+
| `--spectrum-component-xs-medium-letter-spacing` | `--spectrum-letter-spacing` |
25+
| `--spectrum-component-xs-medium-line-height` | `--spectrum-line-height-font-size-50` |
26+
| `--spectrum-component-xs-bold-font-family` | `--spectrum-sans-serif-font-family` |
27+
| `--spectrum-component-xs-bold-font-size` | `--spectrum-font-size-50` |
28+
| `--spectrum-component-xs-bold-font-weight` | `--spectrum-bold-font-weight` |
29+
| `--spectrum-component-xs-bold-letter-spacing` | `--spectrum-letter-spacing` |
30+
| `--spectrum-component-xs-bold-line-height` | `--spectrum-line-height-font-size-50` |
31+
| `--spectrum-component-s-regular-font-family` | `--spectrum-sans-serif-font-family` |
32+
| `--spectrum-component-s-regular-font-size` | `--spectrum-font-size-75` |
33+
| `--spectrum-component-s-regular-font-weight` | `--spectrum-regular-font-weight` |
34+
| `--spectrum-component-s-regular-letter-spacing` | `--spectrum-letter-spacing` |
35+
| `--spectrum-component-s-regular-line-height` | `--spectrum-line-height-font-size-75` |
36+
| `--spectrum-component-s-medium-font-family` | `--spectrum-sans-serif-font-family` |
37+
| `--spectrum-component-s-medium-font-size` | `--spectrum-font-size-75` |
38+
| `--spectrum-component-s-medium-font-weight` | `--spectrum-medium-font-weight` |
39+
| `--spectrum-component-s-medium-letter-spacing` | `--spectrum-letter-spacing` |
40+
| `--spectrum-component-s-medium-line-height` | `--spectrum-line-height-font-size-75` |
41+
| `--spectrum-component-s-bold-font-family` | `--spectrum-sans-serif-font-family` |
42+
| `--spectrum-component-s-bold-font-size` | `--spectrum-font-size-75` |
43+
| `--spectrum-component-s-bold-font-weight` | `--spectrum-bold-font-weight` |
44+
| `--spectrum-component-s-bold-letter-spacing` | `--spectrum-letter-spacing` |
45+
| `--spectrum-component-s-bold-line-height` | `--spectrum-line-height-font-size-75` |
46+
| `--spectrum-component-m-regular-font-family` | `--spectrum-sans-serif-font-family` |
47+
| `--spectrum-component-m-regular-font-size` | `--spectrum-font-size-100` |
48+
| `--spectrum-component-m-regular-font-weight` | `--spectrum-regular-font-weight` |
49+
| `--spectrum-component-m-regular-letter-spacing` | `--spectrum-letter-spacing` |
50+
| `--spectrum-component-m-regular-line-height` | `--spectrum-line-height-font-size-100` |
51+
| `--spectrum-component-m-medium-font-family` | `--spectrum-sans-serif-font-family` |
52+
| `--spectrum-component-m-medium-font-size` | `--spectrum-font-size-100` |
53+
| `--spectrum-component-m-medium-font-weight` | `--spectrum-medium-font-weight` |
54+
| `--spectrum-component-m-medium-letter-spacing` | `--spectrum-letter-spacing` |
55+
| `--spectrum-component-m-medium-line-height` | `--spectrum-line-height-font-size-100` |
56+
| `--spectrum-component-m-bold-font-family` | `--spectrum-sans-serif-font-family` |
57+
| `--spectrum-component-m-bold-font-size` | `--spectrum-font-size-100` |
58+
| `--spectrum-component-m-bold-font-weight` | `--spectrum-bold-font-weight` |
59+
| `--spectrum-component-m-bold-letter-spacing` | `--spectrum-letter-spacing` |
60+
| `--spectrum-component-m-bold-line-height` | `--spectrum-line-height-font-size-100` |
61+
| `--spectrum-component-l-regular-font-family` | `--spectrum-sans-serif-font-family` |
62+
| `--spectrum-component-l-regular-font-size` | `--spectrum-font-size-200` |
63+
| `--spectrum-component-l-regular-font-weight` | `--spectrum-regular-font-weight` |
64+
| `--spectrum-component-l-regular-letter-spacing` | `--spectrum-letter-spacing` |
65+
| `--spectrum-component-l-regular-line-height` | `--spectrum-line-height-font-size-200` |
66+
| `--spectrum-component-l-medium-font-family` | `--spectrum-sans-serif-font-family` |
67+
| `--spectrum-component-l-medium-font-size` | `--spectrum-font-size-200` |
68+
| `--spectrum-component-l-medium-font-weight` | `--spectrum-medium-font-weight` |
69+
| `--spectrum-component-l-medium-letter-spacing` | `--spectrum-letter-spacing` |
70+
| `--spectrum-component-l-medium-line-height` | `--spectrum-line-height-font-size-200` |
71+
| `--spectrum-component-l-bold-font-family` | `--spectrum-sans-serif-font-family` |
72+
| `--spectrum-component-l-bold-font-size` | `--spectrum-font-size-200` |
73+
| `--spectrum-component-l-bold-font-weight` | `--spectrum-bold-font-weight` |
74+
| `--spectrum-component-l-bold-letter-spacing` | `--spectrum-letter-spacing` |
75+
| `--spectrum-component-l-bold-line-height` | `--spectrum-line-height-font-size-200` |
76+
| `--spectrum-component-xl-regular-font-family` | `--spectrum-sans-serif-font-family` |
77+
| `--spectrum-component-xl-regular-font-size` | `--spectrum-font-size-300` |
78+
| `--spectrum-component-xl-regular-font-weight` | `--spectrum-regular-font-weight` |
79+
| `--spectrum-component-xl-regular-letter-spacing` | `--spectrum-letter-spacing` |
80+
| `--spectrum-component-xl-regular-line-height` | `--spectrum-line-height-font-size-300` |
81+
| `--spectrum-component-xl-medium-font-family` | `--spectrum-sans-serif-font-family` |
82+
| `--spectrum-component-xl-medium-font-size` | `--spectrum-font-size-300` |
83+
| `--spectrum-component-xl-medium-font-weight` | `--spectrum-medium-font-weight` |
84+
| `--spectrum-component-xl-medium-letter-spacing` | `--spectrum-letter-spacing` |
85+
| `--spectrum-component-xl-medium-line-height` | `--spectrum-line-height-font-size-300` |
86+
| `--spectrum-component-xl-bold-font-family` | `--spectrum-sans-serif-font-family` |
87+
| `--spectrum-component-xl-bold-font-size` | `--spectrum-font-size-300` |
88+
| `--spectrum-component-xl-bold-font-weight` | `--spectrum-bold-font-weight` |
89+
| `--spectrum-component-xl-bold-letter-spacing` | `--spectrum-letter-spacing` |
90+
| `--spectrum-component-xl-bold-line-height` | `--spectrum-line-height-font-size-300` |
91+
| `--spectrum-component-padding-vertical-50` | `3px` (desktop) and `5px` (mobile) |
92+
| `--spectrum-component-padding-vertical-75` | `4px` (desktop) and `5px` (mobile) |
93+
| `--spectrum-component-padding-vertical-100` | `7px` (desktop) and `9px` (mobile) |
94+
| `--spectrum-component-padding-vertical-200` | `10px` (desktop) and `13px` (mobile) |
95+
| `--spectrum-component-padding-vertical-300` | `13px` (desktop) and `17px` (mobile) |
96+
| `--spectrum-card-minimum-width-default` | `100px` |
97+
| `--spectrum-tree-view-item-to-item-default` | `-1px` |
98+
99+
### Updated
100+
101+
- `--spectrum-sans-serif-font-family`: `Adobe Clean` -> `Adobe Clean Spectrum VF`
102+
- `--spectrum-accordion-top-to-text-compact-medium`: `5px` -> `8px`
103+
- `--spectrum-accordion-top-to-text-spacious-medium`: `16px` -> `13px` (desktop) and `19px` -> `15px` (mobile)
104+
- `--spectrum-accordion-focus-indicator-gap`: `0px` -> `2px`
105+
- `--spectrum-accordion-top-to-text-medium`: `12px` -> `9px` (desktop) and `16px` -> `10px` (mobile)

.github/workflows/development.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ jobs:
199199
if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) }}
200200
uses: ./.github/workflows/vrt.yml
201201
with:
202-
skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
202+
skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
203203
secrets: inherit
204204

205205
# -------------------------------------------------------------

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"cleaner": "nx run-many --target clean --projects",
3030
"compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare",
3131
"component:build": "node --no-warnings ./tasks/component-builder.js",
32-
"component:compare": "node --no-warnings ./tasks/component-compare.js",
32+
"component:compare": "node --no-warnings ./tasks/component-compare.js --tag next",
3333
"component:report": "node --no-warnings ./tasks/component-reporter.js",
3434
"dev": "cross-env NODE_ENV=development nx run storybook:build:docs",
3535
"docs:report": "yarn report",

tasks/component-compare.js

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@ async function generateDiff({
145145
async function fetchPublishedComponent(packageName, {
146146
cacheLocation,
147147
outputLocation,
148+
baseTag = "latest",
148149
}) {
149150
const warnings = [];
150151
let tag;
@@ -157,10 +158,9 @@ async function fetchPublishedComponent(packageName, {
157158
warnings.push(err ?? `Failed to fetch ${packageName.yellow} from npm.\n`);
158159
})) ?? {};
159160

160-
// If the component exists on npm, fetch the latest release data
161-
// @todo what is the fallback if there isn't a latest tag?
162-
if (npmData["dist-tags"]?.latest) {
163-
tag = npmData["dist-tags"]?.latest;
161+
// If the component exists on npm, fetch the base release data
162+
if (npmData["dist-tags"]?.[baseTag]) {
163+
tag = npmData["dist-tags"]?.[baseTag];
164164
}
165165

166166
if (!tag) return;
@@ -206,12 +206,13 @@ async function processComponent(
206206
cwd,
207207
output = pathing.output,
208208
cacheLocation = pathing.cache,
209-
}
209+
tag,
210+
} = {}
210211
) {
211212
if (!component) return Promise.reject("No component specified.");
212213

213214
cleanAndMkdir(join(output, "diffs", component));
214-
cleanAndMkdir(join(pathing.latest, component));
215+
cleanAndMkdir(join(pathing.base, component));
215216

216217
const pkgPath = require.resolve(`@spectrum-css/${component}/package.json`) ?? join(cwd, component, "package.json");
217218
const pkg = pkgPath && existsSync(pkgPath)
@@ -248,25 +249,26 @@ async function processComponent(
248249
);
249250
}
250251

251-
let tag = "latest";
252+
let foundTag;
252253
if (pkg?.name) {
253254
const npmResults = await fetchPublishedComponent(pkg.name, {
254255
cacheLocation,
255-
outputLocation: join(pathing.latest, component),
256+
outputLocation: join(pathing.base, component),
257+
baseTag: tag,
256258
});
257259

258260
if (npmResults?.tag) {
259-
tag = npmResults.tag;
261+
foundTag = npmResults.tag;
260262
}
261263

262264
if (npmResults?.warnings?.length > 0) {
263265
warnings.push(...npmResults.warnings);
264266
}
265267

266-
if (existsSync(join(pathing.latest, component))) {
268+
if (existsSync(join(pathing.base, component))) {
267269
const files =
268270
(await fg("**/*.css", {
269-
cwd: join(pathing.latest, component),
271+
cwd: join(pathing.base, component),
270272
})) ?? [];
271273

272274
if (files.length > 0) found++;
@@ -292,7 +294,7 @@ async function processComponent(
292294
processFile(
293295
filename,
294296
join(cwd, component, "dist"),
295-
join(pathing.latest, component)
297+
join(pathing.base, component)
296298
)
297299
)
298300
).then((results) => {
@@ -304,7 +306,7 @@ async function processComponent(
304306
return {
305307
component,
306308
warnings,
307-
tag,
309+
tag: foundTag,
308310
pkg,
309311
fileMap,
310312
};
@@ -353,7 +355,7 @@ async function processFile(filename, localPath, comparePath) {
353355
async function main(
354356
components,
355357
output,
356-
{ skipCache = false } = {}
358+
{ skipCache = false, tag = "latest" } = {}
357359
) {
358360
if (!components || components.length === 0) {
359361
components = getAllComponentNames(false);
@@ -364,7 +366,7 @@ async function main(
364366

365367
pathing.output = output;
366368
pathing.cache = join(output, "packages");
367-
pathing.latest = join(output, "latest");
369+
pathing.base = join(output, "base");
368370

369371
/** Setup the folder structure */
370372
cleanAndMkdir(pathing.output);
@@ -373,7 +375,7 @@ async function main(
373375
// unless we want to re-fetch the tarballs
374376
cleanAndMkdir(pathing.cache, skipCache);
375377

376-
cleanAndMkdir(pathing.latest);
378+
cleanAndMkdir(pathing.base);
377379

378380
const promises = [];
379381
// Copy the bundled CSS to the output directory
@@ -391,14 +393,15 @@ async function main(
391393

392394
/**
393395
* Each component will report on it's file structure locally when compared
394-
* against it's latest tag on npm; then a console report will be logged and
396+
* against the base tag on npm; then a console report will be logged and
395397
* a visual diff generated for each file that has changed.
396398
*/
397399
const results = await Promise.all([
398400
...(components.map(async (component) => {
399401
return processComponent(component, {
400402
output: pathing.output,
401403
cacheLocation: pathing.cache,
404+
tag,
402405
}).catch((err) =>
403406
Promise.resolve({
404407
component,
@@ -435,7 +438,7 @@ async function main(
435438
for (const {
436439
component,
437440
warnings = [],
438-
tag,
441+
tag: foundTag,
439442
pkg = {},
440443
fileMap = new Map(),
441444
} of results) {
@@ -453,7 +456,7 @@ async function main(
453456

454457
componentData.set(component, {
455458
pkg,
456-
tag,
459+
tag: foundTag,
457460
files: fileMap,
458461
});
459462

@@ -471,7 +474,7 @@ async function main(
471474

472475
// Write a table of the file sizes to the console for easy comparison
473476
cliOutput.push(
474-
writeConsoleTable(["Filename", "Local", `Tag v${tag}`], { min: 15, max: maxColumnWidth + 5})
477+
writeConsoleTable(["Filename", "Local", `Tag v${foundTag}`], { min: 15, max: maxColumnWidth + 5})
475478
);
476479

477480
files.forEach(async (file) => {
@@ -552,9 +555,10 @@ let {
552555
_: components,
553556
output = join(dirs.root, ".diff-output"),
554557
cache = true,
558+
tag = "latest",
555559
// @todo allow to run against local main or published versions
556560
} = yargs(hideBin(process.argv)).argv;
557561

558-
main(components, output, { skipCache: !cache }).then((code) => {
562+
main(components, output, { skipCache: !cache, tag }).then((code) => {
559563
process.exit(code);
560564
});

tokens/CHANGELOG.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@
44

55
### Patch Changes
66

7-
- [#3969](https://github.com/adobe/spectrum-css/pull/3969) [`d952e0c`](https://github.com/adobe/spectrum-css/commit/d952e0c4d234f5e742432fe906965a52a50b228e) Thanks [@renovate](https://github.com/apps/renovate)! - Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) v13.10.0 -> [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1).
7+
- [#3969](https://github.com/adobe/spectrum-css/pull/3969) [`d952e0c`](https://github.com/adobe/spectrum-css/commit/d952e0c4d234f5e742432fe906965a52a50b228e) Thanks [@renovate](https://github.com/apps/renovate)!
88

9-
- [#517](https://github.com/adobe/spectrum-tokens/pull/517) [`8f8f8a6`](https://github.com/adobe/spectrum-tokens/commit/8f8f8a60b7adf5105ced4f914cf30928117ddc5e) Thanks [@larz0](https://github.com/larz0)!
9+
Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) v13.10.0 -> [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1).
1010

11-
#### Updated tokens
11+
- [#517](https://github.com/adobe/spectrum-tokens/pull/517) [`8f8f8a6`](https://github.com/adobe/spectrum-tokens/commit/8f8f8a60b7adf5105ced4f914cf30928117ddc5e) Thanks [@larz0](https://github.com/larz0)!
1212

13-
- `accordion-focus-indicator-gap`
14-
- value: `0px` -> `2px`
15-
- `accordion-top-to-text-medium`
16-
- desktop.value: `12px` -> `9px`
17-
- mobile.value: `16px` -> `10px`
13+
#### Updated tokens
14+
15+
- `accordion-focus-indicator-gap`
16+
- value: `0px` -> `2px`
17+
- `accordion-top-to-text-medium`
18+
- desktop.value: `12px` -> `9px`
19+
- mobile.value: `16px` -> `10px`
1820

1921
## 16.1.0-next.4
2022

@@ -3060,7 +3062,6 @@ New JSON format! The new `tokens/dist/json/tokens.json` asset provides a queryab
30603062
📝 [#3359](https://github.com/adobe/spectrum-css/pull/3359) [`c8194b0`](https://github.com/adobe/spectrum-css/commit/c8194b0a5b6e115d7db680f287eb8a2a9709906b) Thanks [@cdransf](https://github.com/cdransf)!
30613063

30623064
- This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
3063-
30643065
- Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`.
30653066
- In cases of duplicate properties, preserves the property that would be applied given current code structure.
30663067
- Updates misnamed tokens to use valid tokens (`table/index.css`).

tokens/custom/dark-vars.css

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,13 @@
1212
*/
1313

1414
/* This file contains overrides and additions to core tokens */
15-
1615
.spectrum--dark {
17-
/* stylelint-disable-next-line custom-property-pattern -- context identification */
18-
--color-scheme: dark;
19-
2016
/** COMPONENT-SPECIFIC OVERRIDES **/
2117
--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
2218
--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
2319
--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
2420
--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
2521
--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
26-
2722
--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
2823
--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
2924
--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
@@ -61,4 +56,6 @@
6156

6257
--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07);
6358
--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
59+
60+
color-scheme: dark;
6461
}

tokens/custom/global-vars.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@
1313

1414
/* This file contains overrides and additions to core tokens */
1515
.spectrum {
16-
--system: spectrum;
17-
1816
--spectrum-animation-duration-0: 0ms;
1917
--spectrum-animation-duration-100: 130ms;
2018
--spectrum-animation-duration-200: 160ms;

tokens/custom/large-vars.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@
1212
*/
1313

1414
/* This file contains overrides and additions to core tokens */
15-
1615
.spectrum--large {
17-
/* stylelint-disable-next-line custom-property-pattern -- context identification */
1816
--scale: large;
1917

2018
--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);

tokens/custom/light-vars.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@
1313

1414
/* This file contains overrides and additions to core tokens */
1515
.spectrum--light {
16-
/* stylelint-disable-next-line custom-property-pattern -- context identification */
17-
--color-scheme: light;
18-
1916
--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
2017
--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
2118
--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
@@ -59,4 +56,6 @@
5956

6057
--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06);
6158
--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
59+
60+
color-scheme: light;
6261
}

0 commit comments

Comments
 (0)