@ebay/skin 19.1.0 → 19.1.2

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
 
@@ -2246,6 +2249,9 @@ span.combobox{
2246
2249
  top:calc(100% + 4px);
2247
2250
  width:auto;
2248
2251
  }
2252
+ .combobox__listbox--fixed{
2253
+ position:fixed;
2254
+ }
2249
2255
 
2250
2256
  .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
2251
2257
  left:unset;
@@ -7339,6 +7345,9 @@ div.listbox-button__listbox--set-position{
7339
7345
  top:calc(100% + 4px);
7340
7346
  width:auto;
7341
7347
  }
7348
+ div.listbox-button__listbox--fixed{
7349
+ position:fixed;
7350
+ }
7342
7351
  [dir=rtl] div.listbox-button__listbox{
7343
7352
  left:unset;
7344
7353
  right:0;
@@ -7674,6 +7683,9 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
7674
7683
  top:calc(100% + 4px);
7675
7684
  width:auto;
7676
7685
  }
7686
+ .fake-menu-button__menu--fixed,.menu-button__menu--fixed{
7687
+ position:fixed;
7688
+ }
7677
7689
  [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
7678
7690
  left:unset;
7679
7691
  right:0;
@@ -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
 
@@ -2445,6 +2448,9 @@ span.combobox{
2445
2448
  top:calc(100% + 4px);
2446
2449
  width:auto;
2447
2450
  }
2451
+ .combobox__listbox--fixed{
2452
+ position:fixed;
2453
+ }
2448
2454
 
2449
2455
  .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
2450
2456
  left:unset;
@@ -7538,6 +7544,9 @@ div.listbox-button__listbox--set-position{
7538
7544
  top:calc(100% + 4px);
7539
7545
  width:auto;
7540
7546
  }
7547
+ div.listbox-button__listbox--fixed{
7548
+ position:fixed;
7549
+ }
7541
7550
  [dir=rtl] div.listbox-button__listbox{
7542
7551
  left:unset;
7543
7552
  right:0;
@@ -7873,6 +7882,9 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
7873
7882
  top:calc(100% + 4px);
7874
7883
  width:auto;
7875
7884
  }
7885
+ .fake-menu-button__menu--fixed,.menu-button__menu--fixed{
7886
+ position:fixed;
7887
+ }
7876
7888
  [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
7877
7889
  left:unset;
7878
7890
  right:0;
@@ -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
 
@@ -1823,6 +1824,9 @@ span.combobox{
1823
1824
  top:calc(100% + 4px);
1824
1825
  width:auto;
1825
1826
  }
1827
+ .combobox__listbox--fixed{
1828
+ position:fixed;
1829
+ }
1826
1830
 
1827
1831
  .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
1828
1832
  left:unset;
@@ -6916,6 +6920,9 @@ div.listbox-button__listbox--set-position{
6916
6920
  top:calc(100% + 4px);
6917
6921
  width:auto;
6918
6922
  }
6923
+ div.listbox-button__listbox--fixed{
6924
+ position:fixed;
6925
+ }
6919
6926
  [dir=rtl] div.listbox-button__listbox{
6920
6927
  left:unset;
6921
6928
  right:0;
@@ -7251,6 +7258,9 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
7251
7258
  top:calc(100% + 4px);
7252
7259
  width:auto;
7253
7260
  }
7261
+ .fake-menu-button__menu--fixed,.menu-button__menu--fixed{
7262
+ position:fixed;
7263
+ }
7254
7264
  [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
7255
7265
  left:unset;
7256
7266
  right:0;
@@ -50,6 +50,9 @@ span.combobox {
50
50
  top: calc(100% + 4px);
51
51
  width: auto;
52
52
  }
53
+ .combobox__listbox--fixed {
54
+ position: fixed;
55
+ }
53
56
 
54
57
  .combobox__listbox--reverse,
55
58
  [dir="rtl"] .combobox__listbox {
@@ -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
 
@@ -49,6 +49,9 @@ div.listbox-button__listbox--set-position {
49
49
  top: calc(100% + 4px);
50
50
  width: auto;
51
51
  }
52
+ div.listbox-button__listbox--fixed {
53
+ position: fixed;
54
+ }
52
55
  [dir="rtl"] div.listbox-button__listbox {
53
56
  left: unset;
54
57
  right: 0;
@@ -37,6 +37,10 @@
37
37
  top: calc(100% + 4px);
38
38
  width: auto;
39
39
  }
40
+ .fake-menu-button__menu--fixed,
41
+ .menu-button__menu--fixed {
42
+ position: fixed;
43
+ }
40
44
  [dir="rtl"] .fake-menu-button__menu,
41
45
  [dir="rtl"] .menu-button__menu {
42
46
  left: unset;
@@ -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.0",
4
+ "version": "19.1.2",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [