@spectrum-web-components/styles 0.22.3-react.50 → 0.22.3-react.75

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 (19) hide show
  1. package/express/spectrum-core-global.css +0 -253
  2. package/express/spectrum-scale-large.css +0 -27
  3. package/express/spectrum-scale-medium.css +0 -31
  4. package/express/spectrum-theme-dark.css +0 -10
  5. package/express/spectrum-theme-light.css +0 -5
  6. package/package.json +6 -6
  7. package/spectrum-core-global.css +0 -268
  8. package/spectrum-scale-large.css +0 -27
  9. package/spectrum-scale-medium.css +0 -31
  10. package/tokens/express/global-vars.css +775 -5
  11. package/tokens/express/medium-vars.css +4 -0
  12. package/tokens/global-vars.css +213 -189
  13. package/tokens/large-vars.css +10 -4
  14. package/tokens/medium-vars.css +10 -4
  15. package/tokens/spectrum/custom-large-vars.css +10 -6
  16. package/tokens/spectrum/custom-medium-vars.css +10 -6
  17. package/tokens/spectrum/custom-vars.css +12 -18
  18. package/tokens/spectrum/global-vars.css +775 -5
  19. package/tokens/spectrum/medium-vars.css +4 -0
package/express/spectrum-core-global.css CHANGED
@@ -963,9 +963,6 @@ governing permissions and limitations under the License.
963
963
  --spectrum-alias-font-family-condensed: var(
964
964
  --spectrum-global-font-font-family-condensed
965
965
  );
966
- --spectrum-alias-button-text-line-height: var(
967
- --spectrum-global-font-line-height-small
968
- );
969
966
  --spectrum-alias-component-text-line-height: var(
970
967
  --spectrum-global-font-line-height-small
971
968
  );
@@ -1661,46 +1658,6 @@ governing permissions and limitations under the License.
1661
1658
  --spectrum-alias-clearbutton-border-radius: var(
1662
1659
  --spectrum-global-dimension-size-150
1663
1660
  );
1664
- --spectrum-alias-pickerbutton-icononly-padding-x-s: var(
1665
- --spectrum-global-dimension-size-40
1666
- );
1667
- --spectrum-alias-pickerbutton-icononly-padding-x-m: var(
1668
- --spectrum-global-dimension-size-75
1669
- );
1670
- --spectrum-alias-pickerbutton-icononly-padding-x-l: var(
1671
- --spectrum-global-dimension-size-115
1672
- );
1673
- --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(
1674
- --spectrum-global-dimension-size-150
1675
- );
1676
- --spectrum-alias-pickerbutton-icon-margin-y-s: var(
1677
- --spectrum-global-dimension-size-40
1678
- );
1679
- --spectrum-alias-pickerbutton-icon-margin-y-m: var(
1680
- --spectrum-global-dimension-size-75
1681
- );
1682
- --spectrum-alias-pickerbutton-icon-margin-y-l: var(
1683
- --spectrum-global-dimension-size-115
1684
- );
1685
- --spectrum-alias-pickerbutton-icon-margin-y-xl: var(
1686
- --spectrum-global-dimension-size-150
1687
- );
1688
- --spectrum-alias-pickerbutton-label-padding-y-s: 0;
1689
- --spectrum-alias-pickerbutton-label-padding-y-m: var(
1690
- --spectrum-global-dimension-size-40
1691
- );
1692
- --spectrum-alias-pickerbutton-label-padding-y-l: var(
1693
- --spectrum-global-dimension-size-65
1694
- );
1695
- --spectrum-alias-pickerbutton-label-padding-y-xl: var(
1696
- --spectrum-global-dimension-size-100
1697
- );
1698
- --spectrum-alias-pickerbutton-border-radius-rounded: var(
1699
- --spectrum-global-dimension-size-150
1700
- );
1701
- --spectrum-alias-pickerbutton-border-radius-rounded-sided: var(
1702
- --spectrum-global-dimension-size-150
1703
- );
1704
1661
  --spectrum-alias-search-border-radius: var(
1705
1662
  --spectrum-global-dimension-size-300
1706
1663
  );
@@ -1719,9 +1676,6 @@ governing permissions and limitations under the License.
1719
1676
  --spectrum-alias-input-border-size: var(
1720
1677
  --spectrum-global-dimension-static-size-25
1721
1678
  );
1722
- --spectrum-alias-avatar-border-size: var(
1723
- --spectrum-global-dimension-static-size-25
1724
- );
1725
1679
  --spectrum-alias-search-padding-left-s: var(
1726
1680
  --spectrum-global-dimension-size-125
1727
1681
  );
@@ -1897,12 +1851,6 @@ governing permissions and limitations under the License.
1897
1851
  --spectrum-alias-ui-icon-asterisk-size-100: var(
1898
1852
  --spectrum-global-dimension-size-100
1899
1853
  );
1900
- --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200);
1901
- --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225);
1902
- --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275);
1903
- --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325);
1904
- --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400);
1905
- --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500);
1906
1854
  --spectrum-alias-component-text-color-selected-default: var(
1907
1855
  --spectrum-global-color-gray-50
1908
1856
  );
@@ -2032,48 +1980,6 @@ governing permissions and limitations under the License.
2032
1980
  --spectrum-alias-toggle-border-color-key-focus: var(
2033
1981
  --spectrum-global-color-gray-900
2034
1982
  );
2035
- --spectrum-alias-avatar-border-color-disabled: var(
2036
- --spectrum-alias-background-color-transparent
2037
- );
2038
- --spectrum-alias-avatar-border-color-selected-default: var(
2039
- --spectrum-global-color-gray-900
2040
- );
2041
- --spectrum-alias-avatar-border-color-selected-hover: var(
2042
- --spectrum-alias-component-background-color-selected-hover
2043
- );
2044
- --spectrum-alias-avatar-border-color-selected-down: var(
2045
- --spectrum-alias-component-background-color-selected-hover
2046
- );
2047
- --spectrum-alias-avatar-border-color-selected-key-focus: var(
2048
- --spectrum-global-color-gray-900
2049
- );
2050
- --spectrum-alias-button-primary-background-color-default: var(
2051
- --spectrum-alias-button-primary-border-color-default
2052
- );
2053
- --spectrum-alias-button-primary-text-color-default: var(
2054
- --spectrum-alias-button-primary-text-color-hover
2055
- );
2056
- --spectrum-alias-button-primary-icon-color-default: var(
2057
- --spectrum-alias-button-primary-text-color-default
2058
- );
2059
- --spectrum-alias-button-secondary-background-color-default: var(
2060
- --spectrum-alias-button-secondary-border-color-default
2061
- );
2062
- --spectrum-alias-button-secondary-text-color-default: var(
2063
- --spectrum-alias-button-secondary-text-color-hover
2064
- );
2065
- --spectrum-alias-button-secondary-icon-color-default: var(
2066
- --spectrum-alias-button-secondary-text-color-default
2067
- );
2068
- --spectrum-alias-button-negative-background-color-default: var(
2069
- --spectrum-alias-button-negative-border-color-default
2070
- );
2071
- --spectrum-alias-button-negative-text-color-default: var(
2072
- --spectrum-alias-button-negative-text-color-hover
2073
- );
2074
- --spectrum-alias-button-negative-icon-color-default: var(
2075
- --spectrum-alias-button-negative-text-color-default
2076
- );
2077
1983
  --spectrum-alias-input-border-color-default: var(
2078
1984
  --spectrum-alias-border-color
2079
1985
  );
@@ -2474,12 +2380,6 @@ governing permissions and limitations under the License.
2474
2380
  --spectrum-alias-component-border-color-emphasized-selected: var(
2475
2381
  --spectrum-alias-component-border-color-emphasized-selected-default
2476
2382
  );
2477
- --spectrum-alias-avatar-border-color: var(
2478
- --spectrum-alias-avatar-border-color-default
2479
- );
2480
- --spectrum-alias-avatar-border-color-selected: var(
2481
- --spectrum-alias-avatar-border-color-selected-default
2482
- );
2483
2383
  --spectrum-alias-toggle-background-color: var(
2484
2384
  --spectrum-alias-toggle-background-color-default
2485
2385
  );
@@ -2495,159 +2395,6 @@ governing permissions and limitations under the License.
2495
2395
  --spectrum-alias-toggle-icon-color-emphasized-selected: var(
2496
2396
  --spectrum-global-color-gray-75
2497
2397
  );
2498
- --spectrum-alias-button-primary-background-color-hover: var(
2499
- --spectrum-global-color-gray-800
2500
- );
2501
- --spectrum-alias-button-primary-background-color-down: var(
2502
- --spectrum-global-color-gray-900
2503
- );
2504
- --spectrum-alias-button-primary-background-color-key-focus: var(
2505
- --spectrum-global-color-gray-800
2506
- );
2507
- --spectrum-alias-button-primary-background-color: var(
2508
- --spectrum-alias-button-primary-background-color-default
2509
- );
2510
- --spectrum-alias-button-primary-border-color-default: var(
2511
- --spectrum-global-color-gray-800
2512
- );
2513
- --spectrum-alias-button-primary-border-color-hover: var(
2514
- --spectrum-alias-button-primary-background-color-hover
2515
- );
2516
- --spectrum-alias-button-primary-border-color-down: var(
2517
- --spectrum-alias-button-primary-background-color-down
2518
- );
2519
- --spectrum-alias-button-primary-border-color-key-focus: var(
2520
- --spectrum-alias-button-primary-background-color-key-focus
2521
- );
2522
- --spectrum-alias-button-primary-border-color: var(
2523
- --spectrum-alias-button-primary-border-color-default
2524
- );
2525
- --spectrum-alias-button-primary-text-color-hover: var(
2526
- --spectrum-global-color-gray-50
2527
- );
2528
- --spectrum-alias-button-primary-text-color-down: var(
2529
- --spectrum-global-color-gray-50
2530
- );
2531
- --spectrum-alias-button-primary-text-color-key-focus: var(
2532
- --spectrum-global-color-gray-50
2533
- );
2534
- --spectrum-alias-button-primary-text-color: var(
2535
- --spectrum-alias-button-primary-text-color-default
2536
- );
2537
- --spectrum-alias-button-primary-icon-color-hover: var(
2538
- --spectrum-alias-button-primary-text-color-hover
2539
- );
2540
- --spectrum-alias-button-primary-icon-color-down: var(
2541
- --spectrum-alias-button-primary-text-color-down
2542
- );
2543
- --spectrum-alias-button-primary-icon-color-key-focus: var(
2544
- --spectrum-alias-button-primary-text-color-key-focus
2545
- );
2546
- --spectrum-alias-button-primary-icon-color: var(
2547
- --spectrum-alias-button-primary-icon-color-default
2548
- );
2549
- --spectrum-alias-button-secondary-background-color-hover: var(
2550
- --spectrum-global-color-gray-700
2551
- );
2552
- --spectrum-alias-button-secondary-background-color-down: var(
2553
- --spectrum-global-color-gray-800
2554
- );
2555
- --spectrum-alias-button-secondary-background-color-key-focus: var(
2556
- --spectrum-global-color-gray-700
2557
- );
2558
- --spectrum-alias-button-secondary-background-color: var(
2559
- --spectrum-alias-button-secondary-background-color-default
2560
- );
2561
- --spectrum-alias-button-secondary-border-color-default: var(
2562
- --spectrum-global-color-gray-700
2563
- );
2564
- --spectrum-alias-button-secondary-border-color-hover: var(
2565
- --spectrum-alias-button-secondary-background-color-hover
2566
- );
2567
- --spectrum-alias-button-secondary-border-color-down: var(
2568
- --spectrum-alias-button-secondary-background-color-down
2569
- );
2570
- --spectrum-alias-button-secondary-border-color-key-focus: var(
2571
- --spectrum-alias-button-secondary-background-color-key-focus
2572
- );
2573
- --spectrum-alias-button-secondary-border-color: var(
2574
- --spectrum-alias-button-secondary-border-color-default
2575
- );
2576
- --spectrum-alias-button-secondary-text-color-hover: var(
2577
- --spectrum-global-color-gray-50
2578
- );
2579
- --spectrum-alias-button-secondary-text-color-down: var(
2580
- --spectrum-global-color-gray-50
2581
- );
2582
- --spectrum-alias-button-secondary-text-color-key-focus: var(
2583
- --spectrum-global-color-gray-50
2584
- );
2585
- --spectrum-alias-button-secondary-text-color: var(
2586
- --spectrum-alias-button-secondary-text-color-default
2587
- );
2588
- --spectrum-alias-button-secondary-icon-color-hover: var(
2589
- --spectrum-alias-button-secondary-text-color-hover
2590
- );
2591
- --spectrum-alias-button-secondary-icon-color-down: var(
2592
- --spectrum-alias-button-secondary-text-color-down
2593
- );
2594
- --spectrum-alias-button-secondary-icon-color-key-focus: var(
2595
- --spectrum-alias-button-secondary-text-color-key-focus
2596
- );
2597
- --spectrum-alias-button-secondary-icon-color: var(
2598
- --spectrum-alias-button-secondary-icon-color-default
2599
- );
2600
- --spectrum-alias-button-negative-background-color-hover: var(
2601
- --spectrum-semantic-negative-text-color-small
2602
- );
2603
- --spectrum-alias-button-negative-background-color-down: var(
2604
- --spectrum-global-color-red-700
2605
- );
2606
- --spectrum-alias-button-negative-background-color-key-focus: var(
2607
- --spectrum-semantic-negative-text-color-small
2608
- );
2609
- --spectrum-alias-button-negative-background-color: var(
2610
- --spectrum-alias-button-negative-background-color-default
2611
- );
2612
- --spectrum-alias-button-negative-border-color-default: var(
2613
- --spectrum-semantic-negative-text-color-small
2614
- );
2615
- --spectrum-alias-button-negative-border-color-hover: var(
2616
- --spectrum-semantic-negative-text-color-small
2617
- );
2618
- --spectrum-alias-button-negative-border-color-down: var(
2619
- --spectrum-global-color-red-700
2620
- );
2621
- --spectrum-alias-button-negative-border-color-key-focus: var(
2622
- --spectrum-semantic-negative-text-color-small
2623
- );
2624
- --spectrum-alias-button-negative-border-color: var(
2625
- --spectrum-alias-button-negative-border-color-default
2626
- );
2627
- --spectrum-alias-button-negative-text-color-hover: var(
2628
- --spectrum-global-color-gray-50
2629
- );
2630
- --spectrum-alias-button-negative-text-color-down: var(
2631
- --spectrum-global-color-gray-50
2632
- );
2633
- --spectrum-alias-button-negative-text-color-key-focus: var(
2634
- --spectrum-global-color-gray-50
2635
- );
2636
- --spectrum-alias-button-negative-text-color: var(
2637
- --spectrum-alias-button-negative-text-color-default
2638
- );
2639
- --spectrum-alias-button-negative-icon-color-hover: var(
2640
- --spectrum-alias-button-negative-text-color-hover
2641
- );
2642
- --spectrum-alias-button-negative-icon-color-down: var(
2643
- --spectrum-alias-button-negative-text-color-down
2644
- );
2645
- --spectrum-alias-button-negative-icon-color-key-focus: var(
2646
- --spectrum-alias-button-negative-text-color-key-focus
2647
- );
2648
- --spectrum-alias-button-negative-icon-color: var(
2649
- --spectrum-alias-button-negative-icon-color-default
2650
- );
2651
2398
  --spectrum-alias-input-border-color-disabled: var(
2652
2399
  --spectrum-alias-border-color-transparent
2653
2400
  );
package/express/spectrum-scale-large.css CHANGED
@@ -271,18 +271,6 @@ governing permissions and limitations under the License.
271
271
  --spectrum-alias-ui-icon-asterisk-size-300: var(
272
272
  --spectrum-global-dimension-static-size-150
273
273
  );
274
- --spectrum-alias-avatar-size-100: 26px;
275
- --spectrum-alias-avatar-size-400: 36px;
276
- --spectrum-alias-avatar-size-600: 46px;
277
- --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
278
- --spectrum-global-dimension-static-size-85
279
- );
280
- --spectrum-button-m-primary-fill-texticon-padding-left: 17px;
281
- --spectrum-button-l-primary-fill-textonly-text-padding-top: var(
282
- --spectrum-global-dimension-static-size-150
283
- );
284
- --spectrum-button-xl-primary-fill-texticon-padding-left: 27px;
285
- --spectrum-button-m-primary-outline-texticon-padding-left: 17px;
286
274
  --spectrum-dialog-confirm-title-text-size: var(
287
275
  --spectrum-alias-heading-xs-text-size
288
276
  );
@@ -298,19 +286,4 @@ governing permissions and limitations under the License.
298
286
  --spectrum-listitem-m-textthumbnail-padding-left: var(
299
287
  --spectrum-global-dimension-static-size-150
300
288
  );
301
- --spectrum-picker-m-texticon-padding-left: var(
302
- --spectrum-global-dimension-static-size-150
303
- );
304
- --spectrum-progressbar-s-border-radius: var(
305
- --spectrum-global-dimension-static-size-40
306
- );
307
- --spectrum-progressbar-m-border-radius: var(
308
- --spectrum-global-dimension-static-size-50
309
- );
310
- --spectrum-progressbar-xl-border-radius: var(
311
- --spectrum-global-dimension-static-size-75
312
- );
313
- --spectrum-textfield-m-texticon-padding-left: var(
314
- --spectrum-global-dimension-static-size-150
315
- );
316
289
  }
package/express/spectrum-scale-medium.css CHANGED
@@ -275,22 +275,6 @@ governing permissions and limitations under the License.
275
275
  --spectrum-alias-ui-icon-asterisk-size-300: var(
276
276
  --spectrum-global-dimension-static-size-125
277
277
  );
278
- --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250);
279
- --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350);
280
- --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450);
281
- --spectrum-button-s-primary-fill-textonly-text-padding-bottom: var(
282
- --spectrum-global-dimension-static-size-65
283
- );
284
- --spectrum-button-m-primary-fill-texticon-padding-left: var(
285
- --spectrum-global-dimension-size-175
286
- );
287
- --spectrum-button-l-primary-fill-textonly-text-padding-top: var(
288
- --spectrum-global-dimension-size-115
289
- );
290
- --spectrum-button-xl-primary-fill-texticon-padding-left: 21px;
291
- --spectrum-button-m-primary-outline-texticon-padding-left: var(
292
- --spectrum-global-dimension-size-175
293
- );
294
278
  --spectrum-dialog-confirm-title-text-size: var(
295
279
  --spectrum-alias-heading-s-text-size
296
280
  );
@@ -306,19 +290,4 @@ governing permissions and limitations under the License.
306
290
  --spectrum-listitem-m-textthumbnail-padding-left: var(
307
291
  --spectrum-global-dimension-size-125
308
292
  );
309
- --spectrum-picker-m-texticon-padding-left: var(
310
- --spectrum-global-dimension-size-125
311
- );
312
- --spectrum-progressbar-s-border-radius: var(
313
- --spectrum-global-dimension-static-size-25
314
- );
315
- --spectrum-progressbar-m-border-radius: var(
316
- --spectrum-global-dimension-static-size-40
317
- );
318
- --spectrum-progressbar-xl-border-radius: var(
319
- --spectrum-global-dimension-static-size-65
320
- );
321
- --spectrum-textfield-m-texticon-padding-left: var(
322
- --spectrum-global-dimension-size-125
323
- );
324
293
  }
package/express/spectrum-theme-dark.css CHANGED
@@ -270,16 +270,6 @@ governing permissions and limitations under the License.
270
270
  --spectrum-global-color-gray-900: rgb(
271
271
  var(--spectrum-global-color-gray-900-rgb)
272
272
  );
273
- --spectrum-alias-avatar-border-color-default: hsla(0, 0%, 100%, 0.1);
274
- --spectrum-alias-avatar-border-color-hover: hsla(0, 0%, 100%, 0.25);
275
- --spectrum-alias-avatar-border-color-down: hsla(0, 0%, 100%, 0.4);
276
- --spectrum-alias-avatar-border-color-key-focus: hsla(0, 0%, 100%, 0.25);
277
- --spectrum-alias-avatar-border-color-selected-disabled: hsla(
278
- 0,
279
- 0%,
280
- 100%,
281
- 0.1
282
- );
283
273
  --spectrum-alias-transparent-blue-background-color-default: rgba(
284
274
  124,
285
275
  129,
package/express/spectrum-theme-light.css CHANGED
@@ -270,11 +270,6 @@ governing permissions and limitations under the License.
270
270
  --spectrum-global-color-gray-900: rgb(
271
271
  var(--spectrum-global-color-gray-900-rgb)
272
272
  );
273
- --spectrum-alias-avatar-border-color-default: rgba(0, 0, 0, 0.1);
274
- --spectrum-alias-avatar-border-color-hover: rgba(0, 0, 0, 0.25);
275
- --spectrum-alias-avatar-border-color-down: rgba(0, 0, 0, 0.4);
276
- --spectrum-alias-avatar-border-color-key-focus: rgba(0, 0, 0, 0.25);
277
- --spectrum-alias-avatar-border-color-selected-disabled: rgba(0, 0, 0, 0.1);
278
273
  --spectrum-alias-transparent-blue-background-color-default: rgba(
279
274
  82,
280
275
  88,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.22.3-react.50+474992be7",
3
+ "version": "0.22.3-react.75+9897d0a1c",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -105,19 +105,19 @@
105
105
  "lit-html"
106
106
  ],
107
107
  "dependencies": {
108
- "@spectrum-web-components/base": "^0.7.5-react.50+474992be7"
108
+ "@spectrum-web-components/base": "^0.7.5-react.75+9897d0a1c"
109
109
  },
110
110
  "devDependencies": {
111
111
  "@spectrum-css/commons": "^4.0.2",
112
112
  "@spectrum-css/expressvars": "^2.0.3",
113
- "@spectrum-css/tokens": "^6.2.2",
114
- "@spectrum-css/typography": "^4.0.23",
115
- "@spectrum-css/vars": "^8.0.2"
113
+ "@spectrum-css/tokens": "^7.0.0",
114
+ "@spectrum-css/typography": "^4.0.26",
115
+ "@spectrum-css/vars": "^8.0.3"
116
116
  },
117
117
  "customElements": "custom-elements.json",
118
118
  "sideEffects": [
119
119
  "./**/*.css"
120
120
  ],
121
121
  "style": "all-medium-lightest.css",
122
- "gitHead": "474992be7513cad160eeeec0b522600243babc70"
122
+ "gitHead": "9897d0a1c48b8cee4e5a19c58acfdec2c1dc0623"
123
123
  }