@spectrum-web-components/styles 0.39.3 → 0.40.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 (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 +177 -173
  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 +161 -164
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.3",
3
+ "version": "0.40.0",
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.3"
107
+ "@spectrum-web-components/base": "^0.40.0"
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": "d7840b3a9b99db4de62c44e3fb91b69dec7319af"
121
+ "gitHead": "24d5569a839da94892ecfd125428779587ffb1f5"
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
  }