@spectrum-web-components/styles 1.3.1-beta.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/tokens/express/system-theme-bridge.css +24 -26
  3. package/tokens/spectrum/system-theme-bridge.css +20 -22
  4. package/tokens-v2/system-theme-bridge.css +48 -70
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.3.1-beta.0",
3
+ "version": "1.4.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -115,7 +115,7 @@
115
115
  "lit-html"
116
116
  ],
117
117
  "dependencies": {
118
- "@spectrum-web-components/base": "1.3.1-beta.0",
118
+ "@spectrum-web-components/base": "1.4.0",
119
119
  "lit": "^2.5.0 || ^3.1.3"
120
120
  },
121
121
  "devDependencies": {
package/tokens/express/system-theme-bridge.css CHANGED
@@ -347,6 +347,9 @@
347
347
  --system-action-button-static-black-border-color-hover: transparent;
348
348
  --system-action-button-static-black-border-color-down: transparent;
349
349
  --system-action-button-static-black-border-color-focus: transparent;
350
+ --system-action-button-static-black-border-color-disabled: var(
351
+ --spectrum-disabled-static-black-border-color
352
+ );
350
353
  --system-action-button-static-black-background-color-disabled: transparent;
351
354
  --system-action-button-static-black-background-color-selected-disabled: var(
352
355
  --spectrum-disabled-static-black-background-color
@@ -354,24 +357,24 @@
354
357
  --system-action-button-static-black-background-color-default: var(
355
358
  --spectrum-transparent-black-200
356
359
  );
357
- --system-action-button-static-black-quiet-background-color-default: var(
358
- --spectrum-transparent-black-200
359
- );
360
360
  --system-action-button-static-black-background-color-hover: var(
361
361
  --spectrum-transparent-black-300
362
362
  );
363
- --system-action-button-static-black-quiet-background-color-hover: var(
364
- --spectrum-transparent-black-300
365
- );
366
363
  --system-action-button-static-black-background-color-down: var(
367
364
  --spectrum-transparent-black-400
368
365
  );
369
- --system-action-button-static-black-quiet-background-color-down: var(
370
- --spectrum-transparent-black-400
371
- );
372
366
  --system-action-button-static-black-background-color-focus: var(
373
367
  --spectrum-transparent-black-300
374
368
  );
369
+ --system-action-button-static-black-quiet-background-color-default: var(
370
+ --spectrum-transparent-black-200
371
+ );
372
+ --system-action-button-static-black-quiet-background-color-hover: var(
373
+ --spectrum-transparent-black-300
374
+ );
375
+ --system-action-button-static-black-quiet-background-color-down: var(
376
+ --spectrum-transparent-black-400
377
+ );
375
378
  --system-action-button-static-black-quiet-background-color-focus: var(
376
379
  --spectrum-transparent-black-300
377
380
  );
@@ -380,6 +383,9 @@
380
383
  --system-action-button-static-white-border-color-hover: transparent;
381
384
  --system-action-button-static-white-border-color-down: transparent;
382
385
  --system-action-button-static-white-border-color-focus: transparent;
386
+ --system-action-button-static-white-border-color-disabled: var(
387
+ --spectrum-disabled-static-white-border-color
388
+ );
383
389
  --system-action-button-static-white-background-color-disabled: transparent;
384
390
  --system-action-button-static-white-background-color-selected-disabled: var(
385
391
  --spectrum-disabled-static-white-background-color
@@ -387,24 +393,24 @@
387
393
  --system-action-button-static-white-background-color-default: var(
388
394
  --spectrum-transparent-white-200
389
395
  );
390
- --system-action-button-static-white-quiet-background-color-default: var(
391
- --spectrum-transparent-white-200
392
- );
393
396
  --system-action-button-static-white-background-color-hover: var(
394
397
  --spectrum-transparent-white-300
395
398
  );
396
- --system-action-button-static-white-quiet-background-color-hover: var(
397
- --spectrum-transparent-white-300
398
- );
399
399
  --system-action-button-static-white-background-color-down: var(
400
400
  --spectrum-transparent-white-400
401
401
  );
402
- --system-action-button-static-white-quiet-background-color-down: var(
403
- --spectrum-transparent-white-400
404
- );
405
402
  --system-action-button-static-white-background-color-focus: var(
406
403
  --spectrum-transparent-white-300
407
404
  );
405
+ --system-action-button-static-white-quiet-background-color-default: var(
406
+ --spectrum-transparent-white-200
407
+ );
408
+ --system-action-button-static-white-quiet-background-color-hover: var(
409
+ --spectrum-transparent-white-300
410
+ );
411
+ --system-action-button-static-white-quiet-background-color-down: var(
412
+ --spectrum-transparent-white-400
413
+ );
408
414
  --system-action-button-static-white-quiet-background-color-focus: var(
409
415
  --spectrum-transparent-white-300
410
416
  );
@@ -1595,14 +1601,6 @@
1595
1601
  --system-combobox-background-color-disabled: var(
1596
1602
  --spectrum-disabled-background-color
1597
1603
  );
1598
- --system-contextual-help-padding: var(--spectrum-spacing-400);
1599
- --system-contextual-help-content-spacing: var(--spectrum-spacing-100);
1600
- --system-contextual-help-link-spacing: var(--spectrum-spacing-300);
1601
- --system-contextual-help-heading-size: var(
1602
- --spectrum-contextual-help-title-size
1603
- );
1604
- --system-contextual-help-heading-color: var(--spectrum-heading-color);
1605
- --system-contextual-help-body-color: var(--spectrum-body-color);
1606
1604
  --system-dialog-fullscreen-header-text-size: 28px;
1607
1605
  --system-dialog-min-inline-size: 288px;
1608
1606
  --system-dialog-confirm-small-width: 400px;
package/tokens/spectrum/system-theme-bridge.css CHANGED
@@ -357,27 +357,30 @@
357
357
  --system-action-button-static-black-border-color-focus: var(
358
358
  --spectrum-transparent-black-500
359
359
  );
360
+ --system-action-button-static-black-border-color-disabled: var(
361
+ --spectrum-disabled-static-black-border-color
362
+ );
360
363
  --system-action-button-static-black-background-color-disabled: transparent;
361
364
  --system-action-button-static-black-background-color-selected-disabled: var(
362
365
  --spectrum-disabled-static-black-background-color
363
366
  );
364
367
  --system-action-button-static-black-background-color-default: transparent;
365
- --system-action-button-static-black-quiet-background-color-default: transparent;
366
368
  --system-action-button-static-black-background-color-hover: var(
367
369
  --spectrum-transparent-black-300
368
370
  );
369
- --system-action-button-static-black-quiet-background-color-hover: var(
370
- --spectrum-transparent-black-300
371
- );
372
371
  --system-action-button-static-black-background-color-down: var(
373
372
  --spectrum-transparent-black-400
374
373
  );
375
- --system-action-button-static-black-quiet-background-color-down: var(
376
- --spectrum-transparent-black-400
377
- );
378
374
  --system-action-button-static-black-background-color-focus: var(
379
375
  --spectrum-transparent-black-300
380
376
  );
377
+ --system-action-button-static-black-quiet-background-color-default: transparent;
378
+ --system-action-button-static-black-quiet-background-color-hover: var(
379
+ --spectrum-transparent-black-300
380
+ );
381
+ --system-action-button-static-black-quiet-background-color-down: var(
382
+ --spectrum-transparent-black-400
383
+ );
381
384
  --system-action-button-static-black-quiet-background-color-focus: var(
382
385
  --spectrum-transparent-black-300
383
386
  );
@@ -394,27 +397,30 @@
394
397
  --system-action-button-static-white-border-color-focus: var(
395
398
  --spectrum-transparent-white-500
396
399
  );
400
+ --system-action-button-static-white-border-color-disabled: var(
401
+ --spectrum-disabled-static-white-border-color
402
+ );
397
403
  --system-action-button-static-white-background-color-disabled: transparent;
398
404
  --system-action-button-static-white-background-color-selected-disabled: var(
399
405
  --spectrum-disabled-static-white-background-color
400
406
  );
401
407
  --system-action-button-static-white-background-color-default: transparent;
402
- --system-action-button-static-white-quiet-background-color-default: transparent;
403
408
  --system-action-button-static-white-background-color-hover: var(
404
409
  --spectrum-transparent-white-300
405
410
  );
406
- --system-action-button-static-white-quiet-background-color-hover: var(
407
- --spectrum-transparent-white-300
408
- );
409
411
  --system-action-button-static-white-background-color-down: var(
410
412
  --spectrum-transparent-white-400
411
413
  );
412
- --system-action-button-static-white-quiet-background-color-down: var(
413
- --spectrum-transparent-white-400
414
- );
415
414
  --system-action-button-static-white-background-color-focus: var(
416
415
  --spectrum-transparent-white-300
417
416
  );
417
+ --system-action-button-static-white-quiet-background-color-default: transparent;
418
+ --system-action-button-static-white-quiet-background-color-hover: var(
419
+ --spectrum-transparent-white-300
420
+ );
421
+ --system-action-button-static-white-quiet-background-color-down: var(
422
+ --spectrum-transparent-white-400
423
+ );
418
424
  --system-action-button-static-white-quiet-background-color-focus: var(
419
425
  --spectrum-transparent-white-300
420
426
  );
@@ -1601,14 +1607,6 @@
1601
1607
  --system-combobox-background-color-disabled: var(
1602
1608
  --spectrum-disabled-background-color
1603
1609
  );
1604
- --system-contextual-help-padding: var(--spectrum-spacing-400);
1605
- --system-contextual-help-content-spacing: var(--spectrum-spacing-100);
1606
- --system-contextual-help-link-spacing: var(--spectrum-spacing-300);
1607
- --system-contextual-help-heading-size: var(
1608
- --spectrum-contextual-help-title-size
1609
- );
1610
- --system-contextual-help-heading-color: var(--spectrum-heading-color);
1611
- --system-contextual-help-body-color: var(--spectrum-body-color);
1612
1610
  --system-dialog-fullscreen-header-text-size: 28px;
1613
1611
  --system-dialog-min-inline-size: 288px;
1614
1612
  --system-dialog-confirm-small-width: 400px;
package/tokens-v2/system-theme-bridge.css CHANGED
@@ -291,10 +291,10 @@
291
291
  --system-action-bar-shadow-vertical: var(--spectrum-drop-shadow-y);
292
292
  --system-action-bar-shadow-blur: var(--spectrum-drop-shadow-blur);
293
293
  --system-action-bar-shadow-color: var(--spectrum-drop-shadow-color);
294
- --system-action-button-background-color-default: var(--spectrum-gray-50);
295
- --system-action-button-background-color-hover: var(--spectrum-gray-100);
294
+ --system-action-button-background-color-default: var(--spectrum-gray-100);
295
+ --system-action-button-background-color-hover: var(--spectrum-gray-200);
296
296
  --system-action-button-background-color-down: var(--spectrum-gray-200);
297
- --system-action-button-background-color-focus: var(--spectrum-gray-100);
297
+ --system-action-button-background-color-focus: var(--spectrum-gray-200);
298
298
  --system-action-button-background-color-disabled: var(
299
299
  --spectrum-disabled-background-color
300
300
  );
@@ -310,13 +310,11 @@
310
310
  --system-action-button-background-color-selected-focus: var(
311
311
  --spectrum-neutral-background-color-selected-key-focus
312
312
  );
313
- --system-action-button-border-color-default: var(--spectrum-gray-400);
314
- --system-action-button-border-color-hover: var(--spectrum-gray-500);
315
- --system-action-button-border-color-down: var(--spectrum-gray-600);
316
- --system-action-button-border-color-focus: var(--spectrum-gray-500);
317
- --system-action-button-border-color-disabled: var(
318
- --spectrum-disabled-border-color
319
- );
313
+ --system-action-button-border-color-default: transparent;
314
+ --system-action-button-border-color-hover: transparent;
315
+ --system-action-button-border-color-down: transparent;
316
+ --system-action-button-border-color-focus: transparent;
317
+ --system-action-button-border-color-disabled: transparent;
320
318
  --system-action-button-content-color-selected: var(--spectrum-gray-50);
321
319
  --system-action-button-size-m-border-radius: var(
322
320
  --spectrum-corner-radius-medium-size-medium
@@ -335,97 +333,85 @@
335
333
  );
336
334
  --system-action-button-quiet-background-color-default: transparent;
337
335
  --system-action-button-quiet-background-color-hover: var(
338
- --spectrum-gray-100
336
+ --spectrum-gray-200
339
337
  );
340
338
  --system-action-button-quiet-background-color-down: var(
341
339
  --spectrum-gray-200
342
340
  );
343
341
  --system-action-button-quiet-background-color-focus: var(
344
- --spectrum-gray-100
342
+ --spectrum-gray-200
345
343
  );
346
344
  --system-action-button-quiet-background-color-disabled: transparent;
347
345
  --system-action-button-quiet-background-color-selected-disabled: var(
348
346
  --spectrum-disabled-background-color
349
347
  );
350
- --system-action-button-static-black-border-color-default: var(
351
- --spectrum-transparent-black-500
352
- );
353
- --system-action-button-static-black-border-color-hover: var(
354
- --spectrum-transparent-black-600
355
- );
356
- --system-action-button-static-black-border-color-down: var(
357
- --spectrum-transparent-black-700
358
- );
359
- --system-action-button-static-black-border-color-focus: var(
360
- --spectrum-transparent-black-600
361
- );
348
+ --system-action-button-static-black-border-color-default: transparent;
349
+ --system-action-button-static-black-border-color-hover: transparent;
350
+ --system-action-button-static-black-border-color-down: transparent;
351
+ --system-action-button-static-black-border-color-focus: transparent;
352
+ --system-action-button-static-black-border-color-disabled: transparent;
362
353
  --system-action-button-static-black-background-color-disabled: var(
363
354
  --spectrum-disabled-static-black-background-color
364
355
  );
365
356
  --system-action-button-static-black-background-color-selected-disabled: var(
366
357
  --spectrum-disabled-static-black-background-color
367
358
  );
368
- --system-action-button-static-black-background-color-default: transparent;
369
- --system-action-button-static-black-quiet-background-color-default: transparent;
370
- --system-action-button-static-black-background-color-hover: var(
371
- --spectrum-transparent-black-400
359
+ --system-action-button-static-black-background-color-default: var(
360
+ --spectrum-transparent-black-100
372
361
  );
373
- --system-action-button-static-black-quiet-background-color-hover: var(
374
- --spectrum-transparent-black-400
362
+ --system-action-button-static-black-background-color-hover: var(
363
+ --spectrum-transparent-black-200
375
364
  );
376
365
  --system-action-button-static-black-background-color-down: var(
377
- --spectrum-transparent-black-500
378
- );
379
- --system-action-button-static-black-quiet-background-color-down: var(
380
- --spectrum-transparent-black-500
366
+ --spectrum-transparent-black-200
381
367
  );
382
368
  --system-action-button-static-black-background-color-focus: var(
383
- --spectrum-transparent-black-400
384
- );
385
- --system-action-button-static-black-quiet-background-color-focus: var(
386
- --spectrum-transparent-black-400
369
+ --spectrum-transparent-black-200
387
370
  );
388
- --system-action-button-static-black-background-color-disabled: transparent;
389
- --system-action-button-static-black-quiet-background-color-disabled: transparent;
390
- --system-action-button-static-white-border-color-default: var(
391
- --spectrum-transparent-white-500
392
- );
393
- --system-action-button-static-white-border-color-hover: var(
394
- --spectrum-transparent-white-600
371
+ --system-action-button-static-black-quiet-background-color-default: transparent;
372
+ --system-action-button-static-black-quiet-background-color-hover: var(
373
+ --spectrum-transparent-black-200
395
374
  );
396
- --system-action-button-static-white-border-color-down: var(
397
- --spectrum-transparent-white-700
375
+ --system-action-button-static-black-quiet-background-color-down: var(
376
+ --spectrum-transparent-black-200
398
377
  );
399
- --system-action-button-static-white-border-color-focus: var(
400
- --spectrum-transparent-white-600
378
+ --system-action-button-static-black-quiet-background-color-focus: var(
379
+ --spectrum-transparent-black-200
401
380
  );
381
+ --system-action-button-static-black-quiet-background-color-disabled: transparent;
382
+ --system-action-button-static-white-border-color-default: transparent;
383
+ --system-action-button-static-white-border-color-hover: transparent;
384
+ --system-action-button-static-white-border-color-down: transparent;
385
+ --system-action-button-static-white-border-color-focus: transparent;
386
+ --system-action-button-static-white-border-color-disabled: transparent;
402
387
  --system-action-button-static-white-background-color-disabled: var(
403
388
  --spectrum-disabled-static-white-background-color
404
389
  );
405
390
  --system-action-button-static-white-background-color-selected-disabled: var(
406
391
  --spectrum-disabled-static-white-background-color
407
392
  );
408
- --system-action-button-static-white-background-color-default: transparent;
409
- --system-action-button-static-white-quiet-background-color-default: transparent;
410
- --system-action-button-static-white-background-color-hover: var(
411
- --spectrum-transparent-white-400
393
+ --system-action-button-static-white-background-color-default: var(
394
+ --spectrum-transparent-white-100
412
395
  );
413
- --system-action-button-static-white-quiet-background-color-hover: var(
414
- --spectrum-transparent-white-400
396
+ --system-action-button-static-white-background-color-hover: var(
397
+ --spectrum-transparent-white-200
415
398
  );
416
399
  --system-action-button-static-white-background-color-down: var(
417
- --spectrum-transparent-white-500
418
- );
419
- --system-action-button-static-white-quiet-background-color-down: var(
420
- --spectrum-transparent-white-500
400
+ --spectrum-transparent-white-200
421
401
  );
422
402
  --system-action-button-static-white-background-color-focus: var(
423
- --spectrum-transparent-white-400
403
+ --spectrum-transparent-white-200
404
+ );
405
+ --system-action-button-static-white-quiet-background-color-default: transparent;
406
+ --system-action-button-static-white-quiet-background-color-hover: var(
407
+ --spectrum-transparent-white-200
408
+ );
409
+ --system-action-button-static-white-quiet-background-color-down: var(
410
+ --spectrum-transparent-white-200
424
411
  );
425
412
  --system-action-button-static-white-quiet-background-color-focus: var(
426
- --spectrum-transparent-white-400
413
+ --spectrum-transparent-white-200
427
414
  );
428
- --system-action-button-static-white-background-color-disabled: transparent;
429
415
  --system-action-button-static-white-quiet-background-color-disabled: transparent;
430
416
  --system-action-group-gap-size-compact: 0;
431
417
  --system-action-group-horizontal-spacing-compact: -1px;
@@ -1595,14 +1581,6 @@
1595
1581
  --system-combobox-border-color-focus-hover: var(--spectrum-gray-900);
1596
1582
  --system-combobox-border-color-key-focus: var(--spectrum-gray-800);
1597
1583
  --system-combobox-background-color-disabled: var(--spectrum-gray-25);
1598
- --system-contextual-help-padding: var(--spectrum-spacing-400);
1599
- --system-contextual-help-content-spacing: var(--spectrum-spacing-100);
1600
- --system-contextual-help-link-spacing: var(--spectrum-spacing-300);
1601
- --system-contextual-help-heading-size: var(
1602
- --spectrum-contextual-help-title-size
1603
- );
1604
- --system-contextual-help-heading-color: var(--spectrum-heading-color);
1605
- --system-contextual-help-body-color: var(--spectrum-body-color);
1606
1584
  --system-dialog-fullscreen-header-text-size: 28px;
1607
1585
  --system-dialog-min-inline-size: 288px;
1608
1586
  --system-dialog-confirm-small-width: 400px;