@ebay/skin 19.1.1 → 19.1.3

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.
@@ -188,6 +188,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
188
188
  --font-size-giant-2:var(--font-size-36);
189
189
  --font-size-giant-3:var(--font-size-46);
190
190
  --font-size-giant-4:var(--font-size-64);
191
+ --font-line-height-250:1.4286;
191
192
  --font-weight-regular:500;
192
193
  --font-weight-bold:700;
193
194
  --spacing-25:2px;
@@ -421,6 +422,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
421
422
  --motion-duration-long-1:667ms;
422
423
  --motion-duration-long-2:883ms;
423
424
  --motion-duration-long-3:1000ms;
425
+ --font-line-height-default:var(--font-line-height-250);
424
426
  }
425
427
  @font-face{
426
428
  font-display:swap;
@@ -443,6 +445,7 @@ body{
443
445
  color:var(--color-foreground-primary);
444
446
  font-family:Market Sans,Arial,sans-serif;
445
447
  font-size:var(--font-size-default);
448
+ line-height:var(--font-line-height-default);
446
449
  -webkit-text-size-adjust:100%;
447
450
  }
448
451
 
@@ -7884,7 +7887,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
7884
7887
  --page-grid-max-width:1584px;
7885
7888
  --page-grid-total-max-width:calc(var(--page-grid-max-width) + var(--page-grid-outside-margins)*2);
7886
7889
  }
7887
- @media screen and (min-width:512px){
7890
+ @media (min-width:512px){
7888
7891
  :root{
7889
7892
  --page-grid-number-cols:16;
7890
7893
  --page-grid-column-gaps:var(--spacing-200);
@@ -7892,7 +7895,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
7892
7895
  --page-grid-outside-margins:32px;
7893
7896
  }
7894
7897
  }
7895
- @media screen and (min-width:1280px){
7898
+ @media (min-width:1280px){
7896
7899
  :root{
7897
7900
  --page-grid-outside-margins:48px;
7898
7901
  }
@@ -188,6 +188,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
188
188
  --font-size-giant-2:var(--font-size-36);
189
189
  --font-size-giant-3:var(--font-size-46);
190
190
  --font-size-giant-4:var(--font-size-64);
191
+ --font-line-height-250:1.4286;
191
192
  --font-weight-regular:500;
192
193
  --font-weight-bold:700;
193
194
  --spacing-25:2px;
@@ -421,6 +422,7 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
421
422
  --motion-duration-long-1:667ms;
422
423
  --motion-duration-long-2:883ms;
423
424
  --motion-duration-long-3:1000ms;
425
+ --font-line-height-default:var(--font-line-height-250);
424
426
  }
425
427
 
426
428
  @media (prefers-color-scheme:dark){
@@ -642,6 +644,7 @@ body{
642
644
  color:var(--color-foreground-primary);
643
645
  font-family:Market Sans,Arial,sans-serif;
644
646
  font-size:var(--font-size-default);
647
+ line-height:var(--font-line-height-default);
645
648
  -webkit-text-size-adjust:100%;
646
649
  }
647
650
 
@@ -8083,7 +8086,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
8083
8086
  --page-grid-max-width:1584px;
8084
8087
  --page-grid-total-max-width:calc(var(--page-grid-max-width) + var(--page-grid-outside-margins)*2);
8085
8088
  }
8086
- @media screen and (min-width:512px){
8089
+ @media (min-width:512px){
8087
8090
  :root{
8088
8091
  --page-grid-number-cols:16;
8089
8092
  --page-grid-column-gaps:var(--spacing-200);
@@ -8091,7 +8094,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
8091
8094
  --page-grid-outside-margins:32px;
8092
8095
  }
8093
8096
  }
8094
- @media screen and (min-width:1280px){
8097
+ @media (min-width:1280px){
8095
8098
  :root{
8096
8099
  --page-grid-outside-margins:48px;
8097
8100
  }
@@ -20,6 +20,7 @@ body{
20
20
  color:var(--color-foreground-primary);
21
21
  font-family:Market Sans,Arial,sans-serif;
22
22
  font-size:var(--font-size-default);
23
+ line-height:var(--font-line-height-default);
23
24
  -webkit-text-size-adjust:100%;
24
25
  }
25
26
 
@@ -7461,7 +7462,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
7461
7462
  --page-grid-max-width:1584px;
7462
7463
  --page-grid-total-max-width:calc(var(--page-grid-max-width) + var(--page-grid-outside-margins)*2);
7463
7464
  }
7464
- @media screen and (min-width:512px){
7465
+ @media (min-width:512px){
7465
7466
  :root{
7466
7467
  --page-grid-number-cols:16;
7467
7468
  --page-grid-column-gaps:var(--spacing-200);
@@ -7469,7 +7470,7 @@ div.menu-button__item[role^=menuitem]:focus:not(:focus-visible){
7469
7470
  --page-grid-outside-margins:32px;
7470
7471
  }
7471
7472
  }
7472
- @media screen and (min-width:1280px){
7473
+ @media (min-width:1280px){
7473
7474
  :root{
7474
7475
  --page-grid-outside-margins:48px;
7475
7476
  }
@@ -6,6 +6,7 @@ body {
6
6
  Arial,
7
7
  sans-serif;
8
8
  font-size: var(--font-size-default);
9
+ line-height: var(--font-line-height-default);
9
10
  -webkit-text-size-adjust: 100%;
10
11
  }
11
12
 
@@ -9,7 +9,7 @@
9
9
  var(--page-grid-max-width) + var(--page-grid-outside-margins) * 2
10
10
  );
11
11
  }
12
- @media screen and (min-width: 512px) {
12
+ @media (min-width: 512px) {
13
13
  :root {
14
14
  --page-grid-number-cols: 16;
15
15
  --page-grid-column-gaps: var(--spacing-200);
@@ -17,7 +17,7 @@
17
17
  --page-grid-outside-margins: 32px;
18
18
  }
19
19
  }
20
- @media screen and (min-width: 1280px) {
20
+ @media (min-width: 1280px) {
21
21
  :root {
22
22
  --page-grid-outside-margins: 48px;
23
23
  }
@@ -181,6 +181,11 @@
181
181
  --font-size-giant-2: var(--font-size-36);
182
182
  --font-size-giant-3: var(--font-size-46);
183
183
  --font-size-giant-4: var(--font-size-64);
184
+ /*
185
+ Ratio of 20px (base line height) / 14px (body font)
186
+ This needs to be unitless for optimal scaling
187
+ */
188
+ --font-line-height-250: 1.4286;
184
189
  --font-weight-regular: 500;
185
190
  --font-weight-bold: 700;
186
191
  --spacing-25: 2px;
@@ -219,4 +219,6 @@
219
219
  --motion-duration-long-1: 667ms;
220
220
  --motion-duration-long-2: 883ms;
221
221
  --motion-duration-long-3: 1000ms;
222
+ /* Typography */
223
+ --font-line-height-default: var(--font-line-height-250);
222
224
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
3
  "description": "Skin - CSS modules that represent the brand eBay",
4
- "version": "19.1.1",
4
+ "version": "19.1.3",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [