@spectrum-web-components/styles 0.39.2 → 0.39.4

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 (18) hide show
  1. package/express/spectrum-core-global.css +0 -119
  2. package/package.json +4 -4
  3. package/spectrum-core-global.css +0 -115
  4. package/tokens/dark-vars.css +4 -0
  5. package/tokens/darkest-vars.css +4 -0
  6. package/tokens/express/custom-large-vars.css +4 -0
  7. package/tokens/express/custom-medium-vars.css +4 -0
  8. package/tokens/express/global-vars.css +39 -13
  9. package/tokens/global-vars.css +4 -0
  10. package/tokens/large-vars.css +51 -5
  11. package/tokens/light-vars.css +4 -0
  12. package/tokens/medium-vars.css +51 -5
  13. package/tokens/spectrum/custom-dark-vars.css +14 -0
  14. package/tokens/spectrum/custom-darkest-vars.css +14 -0
  15. package/tokens/spectrum/custom-large-vars.css +28 -0
  16. package/tokens/spectrum/custom-light-vars.css +14 -0
  17. package/tokens/spectrum/custom-medium-vars.css +28 -0
  18. package/tokens/spectrum/global-vars.css +35 -15
package/express/spectrum-core-global.css CHANGED
@@ -1518,75 +1518,6 @@
1518
1518
  --spectrum-alias-control-three-width-s: var(
1519
1519
  --spectrum-global-dimension-size-300
1520
1520
  );
1521
- --spectrum-alias-infieldbutton-icon-margin-y-s: var(
1522
- --spectrum-global-dimension-size-10
1523
- );
1524
- --spectrum-alias-infieldbutton-icon-margin-y-m: var(
1525
- --spectrum-global-dimension-size-40
1526
- );
1527
- --spectrum-alias-infieldbutton-icon-margin-y-l: var(
1528
- --spectrum-global-dimension-size-75
1529
- );
1530
- --spectrum-alias-infieldbutton-icon-margin-y-xl: var(
1531
- --spectrum-global-dimension-size-115
1532
- );
1533
- --spectrum-alias-infieldbutton-padding-s: var(
1534
- --spectrum-global-dimension-size-50
1535
- );
1536
- --spectrum-alias-infieldbutton-padding-m: var(
1537
- --spectrum-global-dimension-size-50
1538
- );
1539
- --spectrum-alias-infieldbutton-padding-l: var(
1540
- --spectrum-global-dimension-size-50
1541
- );
1542
- --spectrum-alias-infieldbutton-padding-xl: var(
1543
- --spectrum-global-dimension-size-50
1544
- );
1545
- --spectrum-alias-infieldbutton-border-radius: var(
1546
- --spectrum-global-dimension-size-40
1547
- );
1548
- --spectrum-alias-infieldbutton-border-radius-sided: var(
1549
- --spectrum-global-dimension-size-40
1550
- );
1551
- --spectrum-alias-infieldbutton-border-size: var(
1552
- --spectrum-global-dimension-static-size-0
1553
- );
1554
- --spectrum-alias-infieldbutton-fill-padding-s: var(
1555
- --spectrum-global-dimension-size-10
1556
- );
1557
- --spectrum-alias-infieldbutton-fill-padding-m: var(
1558
- --spectrum-global-dimension-size-40
1559
- );
1560
- --spectrum-alias-infieldbutton-fill-padding-l: var(
1561
- --spectrum-global-dimension-size-75
1562
- );
1563
- --spectrum-alias-infieldbutton-fill-padding-xl: var(
1564
- --spectrum-global-dimension-size-115
1565
- );
1566
- --spectrum-alias-infieldbutton-full-height-s: var(
1567
- --spectrum-global-dimension-size-200
1568
- );
1569
- --spectrum-alias-infieldbutton-full-height-m: var(
1570
- --spectrum-global-dimension-size-300
1571
- );
1572
- --spectrum-alias-infieldbutton-full-height-l: var(
1573
- --spectrum-global-dimension-size-400
1574
- );
1575
- --spectrum-alias-infieldbutton-full-height-xl: var(
1576
- --spectrum-global-dimension-size-500
1577
- );
1578
- --spectrum-alias-infieldbutton-half-height-s: var(
1579
- --spectrum-global-dimension-size-115
1580
- );
1581
- --spectrum-alias-infieldbutton-half-height-m: var(
1582
- --spectrum-global-dimension-size-130
1583
- );
1584
- --spectrum-alias-infieldbutton-half-height-l: var(
1585
- --spectrum-global-dimension-size-150
1586
- );
1587
- --spectrum-alias-infieldbutton-half-height-xl: var(
1588
- --spectrum-global-dimension-size-185
1589
- );
1590
1521
  --spectrum-alias-clearbutton-icon-margin-s: var(
1591
1522
  --spectrum-global-dimension-size-50
1592
1523
  );
@@ -1933,51 +1864,6 @@
1933
1864
  --spectrum-alias-yellow-background-color-down: var(
1934
1865
  --spectrum-global-color-static-yellow-600
1935
1866
  );
1936
- --spectrum-alias-infieldbutton-background-color: transparent;
1937
- --spectrum-alias-infieldbutton-fill-border-color-default: transparent;
1938
- --spectrum-alias-infieldbutton-fill-border-color-hover: transparent;
1939
- --spectrum-alias-infieldbutton-fill-border-color-down: transparent;
1940
- --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent;
1941
- --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent;
1942
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(
1943
- --spectrum-global-color-gray-200
1944
- );
1945
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(
1946
- --spectrum-global-color-gray-300
1947
- );
1948
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(
1949
- --spectrum-global-color-gray-400
1950
- );
1951
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(
1952
- --spectrum-global-color-gray-300
1953
- );
1954
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(
1955
- --spectrum-alias-component-background-color-disabled
1956
- );
1957
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(
1958
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default
1959
- );
1960
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(
1961
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover
1962
- );
1963
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(
1964
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down
1965
- );
1966
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(
1967
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus
1968
- );
1969
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
1970
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
1971
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var(
1972
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover
1973
- );
1974
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var(
1975
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down
1976
- );
1977
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var(
1978
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus
1979
- );
1980
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
1981
1867
  --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
1982
1868
  --spectrum-alias-tabitem-text-color-default: var(
1983
1869
  --spectrum-global-color-gray-700
@@ -2345,11 +2231,6 @@
2345
2231
  --spectrum-alias-background-color-yellow: var(
2346
2232
  --spectrum-alias-background-color-yellow-default
2347
2233
  );
2348
- --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
2349
- --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
2350
- --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(
2351
- --spectrum-alias-component-background-color-disabled
2352
- );
2353
2234
  --spectrum-alias-tabitem-text-color: var(
2354
2235
  --spectrum-alias-tabitem-text-color-default
2355
2236
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.39.2",
3
+ "version": "0.39.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -104,12 +104,12 @@
104
104
  "lit-html"
105
105
  ],
106
106
  "dependencies": {
107
- "@spectrum-web-components/base": "^0.39.2"
107
+ "@spectrum-web-components/base": "^0.39.4"
108
108
  },
109
109
  "devDependencies": {
110
110
  "@spectrum-css/commons": "^8.0.0",
111
111
  "@spectrum-css/expressvars": "^3.0.9",
112
- "@spectrum-css/tokens": "^11.3.4",
112
+ "@spectrum-css/tokens": "^12.0.0",
113
113
  "@spectrum-css/typography": "^5.0.40",
114
114
  "@spectrum-css/vars": "^9.0.8"
115
115
  },
@@ -118,5 +118,5 @@
118
118
  "./**/*.css"
119
119
  ],
120
120
  "style": "all-medium-lightest.css",
121
- "gitHead": "23d7b50761ce6de28a82a7626632d3bbc88924fb"
121
+ "gitHead": "f745c90e8e9ea85ff10be025e058b14cc925ec9f"
122
122
  }
package/spectrum-core-global.css CHANGED
@@ -1482,65 +1482,6 @@
1482
1482
  --spectrum-alias-control-three-height-xl: var(
1483
1483
  --spectrum-global-dimension-size-225
1484
1484
  );
1485
- --spectrum-alias-infieldbutton-icon-margin-y-s: var(
1486
- --spectrum-global-dimension-size-50
1487
- );
1488
- --spectrum-alias-infieldbutton-icon-margin-y-m: var(
1489
- --spectrum-global-dimension-size-85
1490
- );
1491
- --spectrum-alias-infieldbutton-icon-margin-y-l: var(
1492
- --spectrum-global-dimension-size-125
1493
- );
1494
- --spectrum-alias-infieldbutton-icon-margin-y-xl: var(
1495
- --spectrum-global-dimension-size-160
1496
- );
1497
- --spectrum-alias-infieldbutton-border-radius: var(
1498
- --spectrum-global-dimension-size-50
1499
- );
1500
- --spectrum-alias-infieldbutton-border-radius-sided: 0;
1501
- --spectrum-alias-infieldbutton-border-size: var(
1502
- --spectrum-global-dimension-static-size-10
1503
- );
1504
- --spectrum-alias-infieldbutton-fill-padding-s: var(
1505
- --spectrum-global-dimension-size-50
1506
- );
1507
- --spectrum-alias-infieldbutton-fill-padding-m: var(
1508
- --spectrum-global-dimension-size-85
1509
- );
1510
- --spectrum-alias-infieldbutton-fill-padding-l: var(
1511
- --spectrum-global-dimension-size-125
1512
- );
1513
- --spectrum-alias-infieldbutton-fill-padding-xl: var(
1514
- --spectrum-global-dimension-size-160
1515
- );
1516
- --spectrum-alias-infieldbutton-padding-s: 0;
1517
- --spectrum-alias-infieldbutton-padding-m: 0;
1518
- --spectrum-alias-infieldbutton-padding-l: 0;
1519
- --spectrum-alias-infieldbutton-padding-xl: 0;
1520
- --spectrum-alias-infieldbutton-full-height-s: var(
1521
- --spectrum-global-dimension-size-300
1522
- );
1523
- --spectrum-alias-infieldbutton-full-height-m: var(
1524
- --spectrum-global-dimension-size-400
1525
- );
1526
- --spectrum-alias-infieldbutton-full-height-l: var(
1527
- --spectrum-global-dimension-size-500
1528
- );
1529
- --spectrum-alias-infieldbutton-full-height-xl: var(
1530
- --spectrum-global-dimension-size-600
1531
- );
1532
- --spectrum-alias-infieldbutton-half-height-s: var(
1533
- --spectrum-global-dimension-size-150
1534
- );
1535
- --spectrum-alias-infieldbutton-half-height-m: var(
1536
- --spectrum-global-dimension-size-200
1537
- );
1538
- --spectrum-alias-infieldbutton-half-height-l: var(
1539
- --spectrum-global-dimension-size-250
1540
- );
1541
- --spectrum-alias-infieldbutton-half-height-xl: var(
1542
- --spectrum-global-dimension-size-300
1543
- );
1544
1485
  --spectrum-alias-clearbutton-icon-margin-s: var(
1545
1486
  --spectrum-global-dimension-size-100
1546
1487
  );
@@ -2187,62 +2128,6 @@
2187
2128
  --spectrum-alias-background-color-yellow: var(
2188
2129
  --spectrum-alias-background-color-yellow-default
2189
2130
  );
2190
- --spectrum-alias-infieldbutton-background-color: var(
2191
- --spectrum-global-color-gray-200
2192
- );
2193
- --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent;
2194
- --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent;
2195
- --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(
2196
- --spectrum-alias-component-background-color-disabled
2197
- );
2198
- --spectrum-alias-infieldbutton-fill-border-color-default: var(
2199
- --spectrum-alias-input-border-color-default
2200
- );
2201
- --spectrum-alias-infieldbutton-fill-border-color-hover: var(
2202
- --spectrum-alias-input-border-color-hover
2203
- );
2204
- --spectrum-alias-infieldbutton-fill-border-color-down: var(
2205
- --spectrum-alias-input-border-color-down
2206
- );
2207
- --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(
2208
- --spectrum-alias-input-border-color-mouse-focus
2209
- );
2210
- --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(
2211
- --spectrum-alias-input-border-color-key-focus
2212
- );
2213
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent;
2214
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent;
2215
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent;
2216
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent;
2217
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent;
2218
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(
2219
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default
2220
- );
2221
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(
2222
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover
2223
- );
2224
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(
2225
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down
2226
- );
2227
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(
2228
- --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus
2229
- );
2230
- --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent;
2231
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(
2232
- --spectrum-alias-component-background-color-default
2233
- );
2234
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(
2235
- --spectrum-alias-component-background-color-hover
2236
- );
2237
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(
2238
- --spectrum-alias-component-background-color-down
2239
- );
2240
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(
2241
- --spectrum-alias-component-background-color-key-focus
2242
- );
2243
- --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(
2244
- --spectrum-alias-component-background-color-disabled
2245
- );
2246
2131
  --spectrum-alias-tabitem-text-color-default: var(
2247
2132
  --spectrum-alias-label-text-color
2248
2133
  );
package/tokens/dark-vars.css CHANGED
@@ -492,4 +492,8 @@
492
492
  --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
493
493
  --spectrum-magenta-1400-rgb: 255, 252, 253;
494
494
  --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
495
+ --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
496
+ --spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
497
+ --spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
498
+ --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
495
499
  }
package/tokens/darkest-vars.css CHANGED
@@ -492,4 +492,8 @@
492
492
  --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
493
493
  --spectrum-magenta-1400-rgb: 255, 236, 243;
494
494
  --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
495
+ --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800);
496
+ --spectrum-icon-color-green-primary-default: var(--spectrum-green-800);
497
+ --spectrum-icon-color-red-primary-default: var(--spectrum-red-700);
498
+ --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000);
495
499
  }
package/tokens/express/custom-large-vars.css CHANGED
@@ -2,4 +2,8 @@
2
2
  :root {
3
3
  --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0';
4
4
  --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0';
5
+
6
+ --spectrum-dialog-confirm-border-radius: 8px;
7
+
8
+ --spectrum-dial-border-radius: 15px;
5
9
  }
package/tokens/express/custom-medium-vars.css CHANGED
@@ -2,4 +2,8 @@
2
2
  :root {
3
3
  --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0';
4
4
  --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0';
5
+
6
+ --spectrum-dialog-confirm-border-radius: 6px;
7
+
8
+ --spectrum-dial-border-radius: 12px;
5
9
  }
package/tokens/express/global-vars.css CHANGED
@@ -1024,6 +1024,36 @@
1024
1024
  );
1025
1025
  }
1026
1026
 
1027
+ :host,
1028
+ :root {
1029
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-width: 0;
1030
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-color: transparent;
1031
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var(
1032
+ --spectrum-corner-radius-75
1033
+ );
1034
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: var(
1035
+ --spectrum-corner-radius-75
1036
+ );
1037
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var(
1038
+ --spectrum-corner-radius-75
1039
+ );
1040
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var(
1041
+ --spectrum-corner-radius-75
1042
+ );
1043
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var(
1044
+ --spectrum-gray-200
1045
+ );
1046
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var(
1047
+ --spectrum-gray-300
1048
+ );
1049
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var(
1050
+ --spectrum-gray-400
1051
+ );
1052
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var(
1053
+ --spectrum-gray-300
1054
+ );
1055
+ }
1056
+
1027
1057
  :host,
1028
1058
  :root {
1029
1059
  --system-spectrum-picker-background-color-default: var(--spectrum-gray-200);
@@ -1249,16 +1279,11 @@
1249
1279
  :host,
1250
1280
  :root {
1251
1281
  --system-spectrum-stepper-border-width: var(--spectrum-border-width-200);
1252
- --system-spectrum-stepper-button-border-width-reset: 0;
1253
- --system-spectrum-stepper-button-icon-nudge: calc(
1254
- -1 * var(--spectrum-stepper-button-border-radius-reset)
1255
- );
1256
- --system-spectrum-stepper-button-gap-reset: var(
1282
+ --system-spectrum-stepper-buttons-border-style: solid;
1283
+ --system-spectrum-stepper-buttons-border-width: var(
1257
1284
  --spectrum-border-width-200
1258
1285
  );
1259
- --system-spectrum-stepper-button-border-radius-reset: calc(
1260
- var(--spectrum-corner-radius-100) - var(--spectrum-border-width-200) * 2
1261
- );
1286
+ --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1262
1287
  --system-spectrum-stepper-border-color: var(--spectrum-gray-400);
1263
1288
  --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500);
1264
1289
  --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
@@ -1268,11 +1293,8 @@
1268
1293
  --system-spectrum-stepper-border-color-keyboard-focus: var(
1269
1294
  --spectrum-gray-900
1270
1295
  );
1271
- --system-spectrum-stepper-button-background-color-default: var(
1272
- --spectrum-gray-200
1273
- );
1274
- --system-spectrum-stepper-button-background-color-hover: var(
1275
- --spectrum-gray-300
1296
+ --system-spectrum-stepper-button-border-radius-reset: var(
1297
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding
1276
1298
  );
1277
1299
  --system-spectrum-stepper-button-background-color-focus: var(
1278
1300
  --spectrum-gray-400
@@ -1280,6 +1302,10 @@
1280
1302
  --system-spectrum-stepper-button-background-color-keyboard-focus: var(
1281
1303
  --spectrum-gray-300
1282
1304
  );
1305
+ --system-spectrum-stepper-disabled-buttons-background-color: var(
1306
+ --spectrum-disabled-background-color
1307
+ );
1308
+ --system-spectrum-stepper-disabled-buttons-border-width: 0;
1283
1309
  }
1284
1310
 
1285
1311
  :host,
package/tokens/global-vars.css CHANGED
@@ -238,6 +238,10 @@
238
238
  --spectrum-transparent-black-900: rgba(
239
239
  var(--spectrum-transparent-black-900-rgb)
240
240
  );
241
+ --spectrum-icon-color-inverse: var(--spectrum-gray-50);
242
+ --spectrum-icon-color-primary-default: var(
243
+ --spectrum-neutral-content-color-default
244
+ );
241
245
  --spectrum-radio-button-selection-indicator: 4px;
242
246
  --spectrum-field-label-to-component: 0px;
243
247
  --spectrum-help-text-to-component: 0px;
package/tokens/large-vars.css CHANGED
@@ -1,5 +1,56 @@
1
1
  :host,
2
2
  :root {
3
+ --spectrum-workflow-icon-size-50: 18px;
4
+ --spectrum-workflow-icon-size-75: 20px;
5
+ --spectrum-workflow-icon-size-100: 22px;
6
+ --spectrum-workflow-icon-size-200: 24px;
7
+ --spectrum-workflow-icon-size-300: 28px;
8
+ --spectrum-arrow-icon-size-75: 12px;
9
+ --spectrum-arrow-icon-size-100: 14px;
10
+ --spectrum-arrow-icon-size-200: 16px;
11
+ --spectrum-arrow-icon-size-300: 16px;
12
+ --spectrum-arrow-icon-size-400: 18px;
13
+ --spectrum-arrow-icon-size-500: 22px;
14
+ --spectrum-arrow-icon-size-600: 24px;
15
+ --spectrum-asterisk-icon-size-75: 8px;
16
+ --spectrum-asterisk-icon-size-100: 10px;
17
+ --spectrum-asterisk-icon-size-200: 12px;
18
+ --spectrum-asterisk-icon-size-300: 12px;
19
+ --spectrum-checkmark-icon-size-50: 12px;
20
+ --spectrum-checkmark-icon-size-75: 12px;
21
+ --spectrum-checkmark-icon-size-100: 14px;
22
+ --spectrum-checkmark-icon-size-200: 14px;
23
+ --spectrum-checkmark-icon-size-300: 16px;
24
+ --spectrum-checkmark-icon-size-400: 18px;
25
+ --spectrum-checkmark-icon-size-500: 20px;
26
+ --spectrum-checkmark-icon-size-600: 24px;
27
+ --spectrum-chevron-icon-size-50: 8px;
28
+ --spectrum-chevron-icon-size-75: 12px;
29
+ --spectrum-chevron-icon-size-100: 14px;
30
+ --spectrum-chevron-icon-size-200: 14px;
31
+ --spectrum-chevron-icon-size-300: 16px;
32
+ --spectrum-chevron-icon-size-400: 18px;
33
+ --spectrum-chevron-icon-size-500: 20px;
34
+ --spectrum-chevron-icon-size-600: 24px;
35
+ --spectrum-corner-triangle-icon-size-75: 6px;
36
+ --spectrum-corner-triangle-icon-size-100: 7px;
37
+ --spectrum-corner-triangle-icon-size-200: 8px;
38
+ --spectrum-corner-triangle-icon-size-300: 8px;
39
+ --spectrum-cross-icon-size-75: 10px;
40
+ --spectrum-cross-icon-size-100: 10px;
41
+ --spectrum-cross-icon-size-200: 12px;
42
+ --spectrum-cross-icon-size-300: 14px;
43
+ --spectrum-cross-icon-size-400: 16px;
44
+ --spectrum-cross-icon-size-500: 16px;
45
+ --spectrum-cross-icon-size-600: 18px;
46
+ --spectrum-dash-icon-size-50: 10px;
47
+ --spectrum-dash-icon-size-75: 10px;
48
+ --spectrum-dash-icon-size-100: 12px;
49
+ --spectrum-dash-icon-size-200: 14px;
50
+ --spectrum-dash-icon-size-300: 16px;
51
+ --spectrum-dash-icon-size-400: 18px;
52
+ --spectrum-dash-icon-size-500: 20px;
53
+ --spectrum-dash-icon-size-600: 22px;
3
54
  --spectrum-field-label-text-to-asterisk-small: 5px;
4
55
  --spectrum-field-label-text-to-asterisk-medium: 5px;
5
56
  --spectrum-field-label-text-to-asterisk-large: 6px;
@@ -314,11 +365,6 @@
314
365
  --spectrum-side-navigation-item-to-header: 20px;
315
366
  --spectrum-side-navigation-bottom-to-text: 10px;
316
367
  --spectrum-tray-top-to-content-area: 5px;
317
- --spectrum-workflow-icon-size-50: 18px;
318
- --spectrum-workflow-icon-size-75: 20px;
319
- --spectrum-workflow-icon-size-100: 22px;
320
- --spectrum-workflow-icon-size-200: 24px;
321
- --spectrum-workflow-icon-size-300: 28px;
322
368
  --spectrum-text-to-visual-50: 8px;
323
369
  --spectrum-text-to-visual-75: 9px;
324
370
  --spectrum-text-to-visual-100: 10px;
package/tokens/light-vars.css CHANGED
@@ -492,4 +492,8 @@
492
492
  --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb));
493
493
  --spectrum-magenta-1400-rgb: 60, 6, 29;
494
494
  --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb));
495
+ --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900);
496
+ --spectrum-icon-color-green-primary-default: var(--spectrum-green-900);
497
+ --spectrum-icon-color-red-primary-default: var(--spectrum-red-900);
498
+ --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400);
495
499
  }
package/tokens/medium-vars.css CHANGED
@@ -1,5 +1,56 @@
1
1
  :host,
2
2
  :root {
3
+ --spectrum-workflow-icon-size-50: 14px;
4
+ --spectrum-workflow-icon-size-75: 16px;
5
+ --spectrum-workflow-icon-size-100: 18px;
6
+ --spectrum-workflow-icon-size-200: 20px;
7
+ --spectrum-workflow-icon-size-300: 22px;
8
+ --spectrum-arrow-icon-size-75: 10px;
9
+ --spectrum-arrow-icon-size-100: 10px;
10
+ --spectrum-arrow-icon-size-200: 12px;
11
+ --spectrum-arrow-icon-size-300: 14px;
12
+ --spectrum-arrow-icon-size-400: 16px;
13
+ --spectrum-arrow-icon-size-500: 18px;
14
+ --spectrum-arrow-icon-size-600: 20px;
15
+ --spectrum-asterisk-icon-size-75: 8px;
16
+ --spectrum-asterisk-icon-size-100: 8px;
17
+ --spectrum-asterisk-icon-size-200: 10px;
18
+ --spectrum-asterisk-icon-size-300: 10px;
19
+ --spectrum-checkmark-icon-size-50: 10px;
20
+ --spectrum-checkmark-icon-size-75: 10px;
21
+ --spectrum-checkmark-icon-size-100: 10px;
22
+ --spectrum-checkmark-icon-size-200: 12px;
23
+ --spectrum-checkmark-icon-size-300: 14px;
24
+ --spectrum-checkmark-icon-size-400: 16px;
25
+ --spectrum-checkmark-icon-size-500: 16px;
26
+ --spectrum-checkmark-icon-size-600: 18px;
27
+ --spectrum-chevron-icon-size-50: 6px;
28
+ --spectrum-chevron-icon-size-75: 10px;
29
+ --spectrum-chevron-icon-size-100: 10px;
30
+ --spectrum-chevron-icon-size-200: 12px;
31
+ --spectrum-chevron-icon-size-300: 14px;
32
+ --spectrum-chevron-icon-size-400: 16px;
33
+ --spectrum-chevron-icon-size-500: 16px;
34
+ --spectrum-chevron-icon-size-600: 18px;
35
+ --spectrum-corner-triangle-icon-size-75: 5px;
36
+ --spectrum-corner-triangle-icon-size-100: 5px;
37
+ --spectrum-corner-triangle-icon-size-200: 6px;
38
+ --spectrum-corner-triangle-icon-size-300: 7px;
39
+ --spectrum-cross-icon-size-75: 8px;
40
+ --spectrum-cross-icon-size-100: 8px;
41
+ --spectrum-cross-icon-size-200: 10px;
42
+ --spectrum-cross-icon-size-300: 12px;
43
+ --spectrum-cross-icon-size-400: 12px;
44
+ --spectrum-cross-icon-size-500: 14px;
45
+ --spectrum-cross-icon-size-600: 16px;
46
+ --spectrum-dash-icon-size-50: 8px;
47
+ --spectrum-dash-icon-size-75: 8px;
48
+ --spectrum-dash-icon-size-100: 10px;
49
+ --spectrum-dash-icon-size-200: 12px;
50
+ --spectrum-dash-icon-size-300: 12px;
51
+ --spectrum-dash-icon-size-400: 14px;
52
+ --spectrum-dash-icon-size-500: 16px;
53
+ --spectrum-dash-icon-size-600: 18px;
3
54
  --spectrum-field-label-text-to-asterisk-small: 4px;
4
55
  --spectrum-field-label-text-to-asterisk-medium: 4px;
5
56
  --spectrum-field-label-text-to-asterisk-large: 5px;
@@ -314,11 +365,6 @@
314
365
  --spectrum-side-navigation-item-to-header: 16px;
315
366
  --spectrum-side-navigation-bottom-to-text: 8px;
316
367
  --spectrum-tray-top-to-content-area: 4px;
317
- --spectrum-workflow-icon-size-50: 14px;
318
- --spectrum-workflow-icon-size-75: 16px;
319
- --spectrum-workflow-icon-size-100: 18px;
320
- --spectrum-workflow-icon-size-200: 20px;
321
- --spectrum-workflow-icon-size-300: 22px;
322
368
  --spectrum-text-to-visual-50: 6px;
323
369
  --spectrum-text-to-visual-75: 7px;
324
370
  --spectrum-text-to-visual-100: 8px;
package/tokens/spectrum/custom-dark-vars.css CHANGED
@@ -68,4 +68,18 @@
68
68
  var(--spectrum-blue-800-rgb),
69
69
  0.15
70
70
  );
71
+
72
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
73
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
74
+ --spectrum-logic-button-and-background-color-hover: var(
75
+ --spectrum-blue-1000
76
+ );
77
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
78
+
79
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
80
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
81
+ --spectrum-logic-button-or-background-color-hover: var(
82
+ --spectrum-magenta-900
83
+ );
84
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
71
85
  }
package/tokens/spectrum/custom-darkest-vars.css CHANGED
@@ -69,4 +69,18 @@
69
69
  var(--spectrum-blue-800-rgb),
70
70
  0.2
71
71
  );
72
+
73
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
74
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
75
+ --spectrum-logic-button-and-background-color-hover: var(
76
+ --spectrum-blue-1000
77
+ );
78
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
79
+
80
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
81
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
82
+ --spectrum-logic-button-or-background-color-hover: var(
83
+ --spectrum-magenta-900
84
+ );
85
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
72
86
  }
package/tokens/spectrum/custom-large-vars.css CHANGED
@@ -76,4 +76,32 @@
76
76
  --spectrum-treeview-item-indentation-large: 25px;
77
77
  --spectrum-treeview-item-indentation-extra-large: 30px;
78
78
  --spectrum-treeview-indicator-inset-block-start: 6px;
79
+ --spectrum-dialog-confirm-entry-animation-distance: 25px;
80
+
81
+ --spectrum-dialog-confirm-hero-height: 160px;
82
+ --spectrum-dialog-confirm-border-radius: 5px;
83
+ --spectrum-dialog-confirm-title-text-size: 19px;
84
+ --spectrum-dialog-confirm-description-text-size: 15px;
85
+ --spectrum-dialog-confirm-padding-grid: 24px;
86
+
87
+ --spectrum-datepicker-initial-width: 160px;
88
+ --spectrum-datepicker-generic-padding: 15px;
89
+ --spectrum-datepicker-dash-line-height: 30px;
90
+ --spectrum-datepicker-width-quiet-first: 90px;
91
+ --spectrum-datepicker-width-quiet-second: 20px;
92
+ --spectrum-datepicker-datetime-width-first: 45px;
93
+ --spectrum-datepicker-invalid-icon-to-button: 10px;
94
+ --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
95
+ --spectrum-datepicker-input-datetime-width: 30px;
96
+
97
+ --spectrum-pagination-textfield-width: 60px;
98
+ --spectrum-pagination-item-inline-spacing: 6px;
99
+
100
+ --spectrum-dial-border-radius: 20px;
101
+ --spectrum-dial-handle-position: 10px;
102
+ --spectrum-dial-handle-block-margin: 20px;
103
+ --spectrum-dial-handle-inline-margin: 20px;
104
+ --spectrum-dial-controls-margin: 10px;
105
+ --spectrum-dial-label-gap-y: 6px;
106
+ --spectrum-dial-label-container-top-to-text: 5px;
79
107
  }
package/tokens/spectrum/custom-light-vars.css CHANGED
@@ -68,4 +68,18 @@
68
68
  var(--spectrum-blue-900-rgb),
69
69
  0.1
70
70
  );
71
+
72
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
73
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
74
+ --spectrum-logic-button-and-background-color-hover: var(
75
+ --spectrum-blue-1100
76
+ );
77
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
78
+
79
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
80
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
81
+ --spectrum-logic-button-or-background-color-hover: var(
82
+ --spectrum-magenta-1100
83
+ );
84
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
71
85
  }
package/tokens/spectrum/custom-medium-vars.css CHANGED
@@ -77,4 +77,32 @@
77
77
  --spectrum-spacing-400
78
78
  );
79
79
  --spectrum-treeview-indicator-inset-block-start: 5px;
80
+ --spectrum-dialog-confirm-entry-animation-distance: 20px;
81
+
82
+ --spectrum-dialog-confirm-hero-height: 128px;
83
+ --spectrum-dialog-confirm-border-radius: 4px;
84
+ --spectrum-dialog-confirm-title-text-size: 18px;
85
+ --spectrum-dialog-confirm-description-text-size: 14px;
86
+ --spectrum-dialog-confirm-padding-grid: 40px;
87
+
88
+ --spectrum-datepicker-initial-width: 128px;
89
+ --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
90
+ --spectrum-datepicker-dash-line-height: 24px;
91
+ --spectrum-datepicker-width-quiet-first: 72px;
92
+ --spectrum-datepicker-width-quiet-second: 16px;
93
+ --spectrum-datepicker-datetime-width-first: 36px;
94
+ --spectrum-datepicker-invalid-icon-to-button: 8px;
95
+ --spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
96
+ --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
97
+
98
+ --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
99
+ --spectrum-pagination-item-inline-spacing: 5px;
100
+
101
+ --spectrum-dial-border-radius: 16px;
102
+ --spectrum-dial-handle-position: 8px;
103
+ --spectrum-dial-handle-block-margin: 16px;
104
+ --spectrum-dial-handle-inline-margin: 16px;
105
+ --spectrum-dial-controls-margin: 8px;
106
+ --spectrum-dial-label-gap-y: 5px;
107
+ --spectrum-dial-label-container-top-to-text: 4px;
80
108
  }
package/tokens/spectrum/global-vars.css CHANGED
@@ -1037,6 +1037,36 @@
1037
1037
  );
1038
1038
  }
1039
1039
 
1040
+ :host,
1041
+ :root {
1042
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var(
1043
+ --spectrum-border-width-100
1044
+ );
1045
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit;
1046
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var(
1047
+ --spectrum-corner-radius-100
1048
+ );
1049
+ --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0;
1050
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var(
1051
+ --spectrum-infield-button-border-radius-reset
1052
+ );
1053
+ --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var(
1054
+ --spectrum-infield-button-border-radius-reset
1055
+ );
1056
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var(
1057
+ --spectrum-gray-75
1058
+ );
1059
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var(
1060
+ --spectrum-gray-200
1061
+ );
1062
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var(
1063
+ --spectrum-gray-300
1064
+ );
1065
+ --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var(
1066
+ --spectrum-gray-200
1067
+ );
1068
+ }
1069
+
1040
1070
  :host,
1041
1071
  :root {
1042
1072
  --system-spectrum-picker-background-color-default: var(--spectrum-gray-75);
@@ -1260,29 +1290,19 @@
1260
1290
  :host,
1261
1291
  :root {
1262
1292
  --system-spectrum-stepper-border-width: var(--spectrum-border-width-100);
1263
- --system-spectrum-stepper-button-border-width-reset: var(
1264
- --spectrum-border-width-100
1265
- );
1266
- --system-spectrum-stepper-button-icon-nudge: calc(
1267
- -1 * var(--spectrum-corner-radius-100) / 2
1268
- );
1269
- --system-spectrum-stepper-button-gap-reset: 0px;
1270
- --system-spectrum-stepper-button-border-radius-reset: 0px;
1293
+ --system-spectrum-stepper-buttons-border-style: none;
1294
+ --system-spectrum-stepper-buttons-border-width: 0;
1295
+ --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50);
1271
1296
  --system-spectrum-stepper-border-color: var(--spectrum-gray-500);
1272
1297
  --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
1273
1298
  --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
1274
1299
  --system-spectrum-stepper-border-color-focus-hover: var(
1275
- --spectrum-gray-900
1300
+ --spectrum-gray-800
1276
1301
  );
1277
1302
  --system-spectrum-stepper-border-color-keyboard-focus: var(
1278
1303
  --spectrum-gray-900
1279
1304
  );
1280
- --system-spectrum-stepper-button-background-color-default: var(
1281
- --spectrum-gray-75
1282
- );
1283
- --system-spectrum-stepper-button-background-color-hover: var(
1284
- --spectrum-gray-200
1285
- );
1305
+ --system-spectrum-stepper-button-border-radius-reset: 0px;
1286
1306
  --system-spectrum-stepper-button-background-color-focus: var(
1287
1307
  --spectrum-gray-300
1288
1308
  );