@ebay/skin 19.16.0 → 19.17.1

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 (14) hide show
  1. package/dist/bundles/skin-default.css +57 -1
  2. package/dist/bundles/skin-full.css +58 -1
  3. package/dist/bundles/skin-headless.css +56 -1
  4. package/dist/global/global.css +1 -1
  5. package/dist/tokens/evo-dark-class.css +1 -0
  6. package/dist/tokens/evo-dark.css +1 -0
  7. package/dist/tokens/evo-light-class.css +1 -0
  8. package/dist/tokens/evo-light.css +1 -0
  9. package/dist/tokens/evo-live-dark-class.css +1 -0
  10. package/dist/tokens/evo-live-dark.css +1 -0
  11. package/dist/tokens/evo-live-light-class.css +1 -0
  12. package/dist/tokens/evo-live-light.css +1 -0
  13. package/dist/video/video.css +56 -0
  14. package/package.json +1 -1
package/dist/bundles/skin-default.css CHANGED
@@ -448,6 +448,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
448
448
  --color-border-accent:var(--color-blue-500);
449
449
  --color-border-attention:var(--color-red-600);
450
450
  --color-border-disabled:var(--color-neutral-400);
451
+ --color-border-inverse:var(--color-neutral-100);
451
452
  --color-border-medium:var(--color-neutral-500);
452
453
  --color-border-on-accent:var(--color-neutral-100);
453
454
  --color-border-on-attention:var(--color-neutral-100);
@@ -657,7 +658,7 @@ body{
657
658
  color:var(--color-foreground-primary);
658
659
  font-family:Market Sans,Arial,sans-serif;
659
660
  font-size:var(--font-size-body);
660
- line-height:var(--font-line-height-250);
661
+ line-height:var(--font-line-height-default);
661
662
  -webkit-text-size-adjust:100%;
662
663
  }
663
664
  button{
@@ -12171,3 +12172,58 @@ button.tourtip__close svg.icon{
12171
12172
  .video-player .shaka-video-container{
12172
12173
  font-family:Market Sans,Arial,sans-serif;
12173
12174
  }
12175
+ .video-player--with-nav .shaka-controls-container{
12176
+ pointer-events:none;
12177
+ }
12178
+ .video-player--with-nav .shaka-controls-container .shaka-bottom-controls,.video-player--with-nav .shaka-controls-container .shaka-play-button-container{
12179
+ pointer-events:auto;
12180
+ }
12181
+ .video-player--compact{
12182
+ container-type:inline-size;
12183
+ width:100%;
12184
+ }
12185
+ .video-player--compact .shaka-controls-button-panel{
12186
+ background-color:initial;
12187
+ justify-content:flex-end;
12188
+ pointer-events:none;
12189
+ }
12190
+ .video-player--compact .shaka-controls-button-panel>:first-child{
12191
+ border-radius:16px;
12192
+ font-size:var(--font-size-medium);
12193
+ margin-right:auto;
12194
+ min-width:80px;
12195
+ padding:var(--spacing-200) var(--spacing-100);
12196
+ width:auto;
12197
+ }
12198
+ .video-player--compact .shaka-controls-button-panel button *{
12199
+ margin:0;
12200
+ }
12201
+ .video-player--compact .shaka-controls-button-panel button{
12202
+ align-items:center;
12203
+ background-color:rgba(0, 0, 0, .32);
12204
+ border-radius:50%;
12205
+ justify-content:center;
12206
+ margin:0 5px;
12207
+ }
12208
+ .video-player--compact .shaka-controls-button-panel button:enabled{
12209
+ display:inline-flex;
12210
+ pointer-events:auto;
12211
+ }
12212
+ .video-player--compact .shaka-scrim-container{
12213
+ background:none;
12214
+ }
12215
+ .video-player--compact .shaka-tooltip:hover:after{
12216
+ visibility:hidden;
12217
+ }
12218
+ @container (inline-size < 320px){
12219
+ .video-player--compact video{
12220
+ aspect-ratio:1;
12221
+ object-fit:cover;
12222
+ }
12223
+ .video-player--compact .shaka-controls-button-panel{
12224
+ height:48px;
12225
+ }
12226
+ .video-player--compact .shaka-remaining-time{
12227
+ display:none;
12228
+ }
12229
+ }
package/dist/bundles/skin-full.css CHANGED
@@ -448,6 +448,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
448
448
  --color-border-accent:var(--color-blue-500);
449
449
  --color-border-attention:var(--color-red-600);
450
450
  --color-border-disabled:var(--color-neutral-400);
451
+ --color-border-inverse:var(--color-neutral-100);
451
452
  --color-border-medium:var(--color-neutral-500);
452
453
  --color-border-on-accent:var(--color-neutral-100);
453
454
  --color-border-on-attention:var(--color-neutral-100);
@@ -667,6 +668,7 @@ https://github.com/eBay/evo-web/blob/master/LICENSE
667
668
  --color-border-accent:var(--color-blue-400);
668
669
  --color-border-attention:var(--color-red-400);
669
670
  --color-border-disabled:var(--color-neutral-700);
671
+ --color-border-inverse:var(--color-neutral-900);
670
672
  --color-border-medium:var(--color-neutral-600);
671
673
  --color-border-on-accent:var(--color-neutral-800);
672
674
  --color-border-on-attention:var(--color-neutral-800);
@@ -870,7 +872,7 @@ body{
870
872
  color:var(--color-foreground-primary);
871
873
  font-family:Market Sans,Arial,sans-serif;
872
874
  font-size:var(--font-size-body);
873
- line-height:var(--font-line-height-250);
875
+ line-height:var(--font-line-height-default);
874
876
  -webkit-text-size-adjust:100%;
875
877
  }
876
878
  button{
@@ -12384,3 +12386,58 @@ button.tourtip__close svg.icon{
12384
12386
  .video-player .shaka-video-container{
12385
12387
  font-family:Market Sans,Arial,sans-serif;
12386
12388
  }
12389
+ .video-player--with-nav .shaka-controls-container{
12390
+ pointer-events:none;
12391
+ }
12392
+ .video-player--with-nav .shaka-controls-container .shaka-bottom-controls,.video-player--with-nav .shaka-controls-container .shaka-play-button-container{
12393
+ pointer-events:auto;
12394
+ }
12395
+ .video-player--compact{
12396
+ container-type:inline-size;
12397
+ width:100%;
12398
+ }
12399
+ .video-player--compact .shaka-controls-button-panel{
12400
+ background-color:initial;
12401
+ justify-content:flex-end;
12402
+ pointer-events:none;
12403
+ }
12404
+ .video-player--compact .shaka-controls-button-panel>:first-child{
12405
+ border-radius:16px;
12406
+ font-size:var(--font-size-medium);
12407
+ margin-right:auto;
12408
+ min-width:80px;
12409
+ padding:var(--spacing-200) var(--spacing-100);
12410
+ width:auto;
12411
+ }
12412
+ .video-player--compact .shaka-controls-button-panel button *{
12413
+ margin:0;
12414
+ }
12415
+ .video-player--compact .shaka-controls-button-panel button{
12416
+ align-items:center;
12417
+ background-color:rgba(0, 0, 0, .32);
12418
+ border-radius:50%;
12419
+ justify-content:center;
12420
+ margin:0 5px;
12421
+ }
12422
+ .video-player--compact .shaka-controls-button-panel button:enabled{
12423
+ display:inline-flex;
12424
+ pointer-events:auto;
12425
+ }
12426
+ .video-player--compact .shaka-scrim-container{
12427
+ background:none;
12428
+ }
12429
+ .video-player--compact .shaka-tooltip:hover:after{
12430
+ visibility:hidden;
12431
+ }
12432
+ @container (inline-size < 320px){
12433
+ .video-player--compact video{
12434
+ aspect-ratio:1;
12435
+ object-fit:cover;
12436
+ }
12437
+ .video-player--compact .shaka-controls-button-panel{
12438
+ height:48px;
12439
+ }
12440
+ .video-player--compact .shaka-remaining-time{
12441
+ display:none;
12442
+ }
12443
+ }
package/dist/bundles/skin-headless.css CHANGED
@@ -18,7 +18,7 @@ body{
18
18
  color:var(--color-foreground-primary);
19
19
  font-family:Market Sans,Arial,sans-serif;
20
20
  font-size:var(--font-size-body);
21
- line-height:var(--font-line-height-250);
21
+ line-height:var(--font-line-height-default);
22
22
  -webkit-text-size-adjust:100%;
23
23
  }
24
24
  button{
@@ -11532,3 +11532,58 @@ button.tourtip__close svg.icon{
11532
11532
  .video-player .shaka-video-container{
11533
11533
  font-family:Market Sans,Arial,sans-serif;
11534
11534
  }
11535
+ .video-player--with-nav .shaka-controls-container{
11536
+ pointer-events:none;
11537
+ }
11538
+ .video-player--with-nav .shaka-controls-container .shaka-bottom-controls,.video-player--with-nav .shaka-controls-container .shaka-play-button-container{
11539
+ pointer-events:auto;
11540
+ }
11541
+ .video-player--compact{
11542
+ container-type:inline-size;
11543
+ width:100%;
11544
+ }
11545
+ .video-player--compact .shaka-controls-button-panel{
11546
+ background-color:initial;
11547
+ justify-content:flex-end;
11548
+ pointer-events:none;
11549
+ }
11550
+ .video-player--compact .shaka-controls-button-panel>:first-child{
11551
+ border-radius:16px;
11552
+ font-size:var(--font-size-medium);
11553
+ margin-right:auto;
11554
+ min-width:80px;
11555
+ padding:var(--spacing-200) var(--spacing-100);
11556
+ width:auto;
11557
+ }
11558
+ .video-player--compact .shaka-controls-button-panel button *{
11559
+ margin:0;
11560
+ }
11561
+ .video-player--compact .shaka-controls-button-panel button{
11562
+ align-items:center;
11563
+ background-color:rgba(0, 0, 0, .32);
11564
+ border-radius:50%;
11565
+ justify-content:center;
11566
+ margin:0 5px;
11567
+ }
11568
+ .video-player--compact .shaka-controls-button-panel button:enabled{
11569
+ display:inline-flex;
11570
+ pointer-events:auto;
11571
+ }
11572
+ .video-player--compact .shaka-scrim-container{
11573
+ background:none;
11574
+ }
11575
+ .video-player--compact .shaka-tooltip:hover:after{
11576
+ visibility:hidden;
11577
+ }
11578
+ @container (inline-size < 320px){
11579
+ .video-player--compact video{
11580
+ aspect-ratio:1;
11581
+ object-fit:cover;
11582
+ }
11583
+ .video-player--compact .shaka-controls-button-panel{
11584
+ height:48px;
11585
+ }
11586
+ .video-player--compact .shaka-remaining-time{
11587
+ display:none;
11588
+ }
11589
+ }
package/dist/global/global.css CHANGED
@@ -6,7 +6,7 @@ body {
6
6
  Arial,
7
7
  sans-serif;
8
8
  font-size: var(--font-size-body);
9
- line-height: var(--font-line-height-250);
9
+ line-height: var(--font-line-height-default);
10
10
  -webkit-text-size-adjust: 100%;
11
11
  }
12
12
  button {
package/dist/tokens/evo-dark-class.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --color-border-accent: var(--color-blue-400);
28
28
  --color-border-attention: var(--color-red-400);
29
29
  --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-inverse: var(--color-neutral-900);
30
31
  --color-border-medium: var(--color-neutral-600);
31
32
  --color-border-on-accent: var(--color-neutral-800);
32
33
  --color-border-on-attention: var(--color-neutral-800);
package/dist/tokens/evo-dark.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --color-border-accent: var(--color-blue-400);
28
28
  --color-border-attention: var(--color-red-400);
29
29
  --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-inverse: var(--color-neutral-900);
30
31
  --color-border-medium: var(--color-neutral-600);
31
32
  --color-border-on-accent: var(--color-neutral-800);
32
33
  --color-border-on-attention: var(--color-neutral-800);
package/dist/tokens/evo-light-class.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --color-border-accent: var(--color-blue-500);
27
27
  --color-border-attention: var(--color-red-600);
28
28
  --color-border-disabled: var(--color-neutral-400);
29
+ --color-border-inverse: var(--color-neutral-100);
29
30
  --color-border-medium: var(--color-neutral-500);
30
31
  --color-border-on-accent: var(--color-neutral-100);
31
32
  --color-border-on-attention: var(--color-neutral-100);
package/dist/tokens/evo-light.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --color-border-accent: var(--color-blue-500);
27
27
  --color-border-attention: var(--color-red-600);
28
28
  --color-border-disabled: var(--color-neutral-400);
29
+ --color-border-inverse: var(--color-neutral-100);
29
30
  --color-border-medium: var(--color-neutral-500);
30
31
  --color-border-on-accent: var(--color-neutral-100);
31
32
  --color-border-on-attention: var(--color-neutral-100);
package/dist/tokens/evo-live-dark-class.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --color-border-accent: var(--color-kiwi-400);
27
27
  --color-border-attention: var(--color-red-400);
28
28
  --color-border-disabled: var(--color-neutral-700);
29
+ --color-border-inverse: var(--color-neutral-900);
29
30
  --color-border-medium: var(--color-neutral-600);
30
31
  --color-border-on-accent: var(--color-kiwi-800);
31
32
  --color-border-on-attention: var(--color-neutral-800);
package/dist/tokens/evo-live-dark.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --color-border-accent: var(--color-kiwi-400);
27
27
  --color-border-attention: var(--color-red-400);
28
28
  --color-border-disabled: var(--color-neutral-700);
29
+ --color-border-inverse: var(--color-neutral-900);
29
30
  --color-border-medium: var(--color-neutral-600);
30
31
  --color-border-on-accent: var(--color-kiwi-800);
31
32
  --color-border-on-attention: var(--color-neutral-800);
package/dist/tokens/evo-live-light-class.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --color-border-accent: var(--color-kiwi-400);
28
28
  --color-border-attention: var(--color-red-400);
29
29
  --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-inverse: var(--color-neutral-900);
30
31
  --color-border-medium: var(--color-neutral-600);
31
32
  --color-border-on-accent: var(--color-kiwi-800);
32
33
  --color-border-on-attention: var(--color-neutral-800);
package/dist/tokens/evo-live-light.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --color-border-accent: var(--color-kiwi-400);
28
28
  --color-border-attention: var(--color-red-400);
29
29
  --color-border-disabled: var(--color-neutral-700);
30
+ --color-border-inverse: var(--color-neutral-900);
30
31
  --color-border-medium: var(--color-neutral-600);
31
32
  --color-border-on-accent: var(--color-kiwi-800);
32
33
  --color-border-on-attention: var(--color-neutral-800);
package/dist/video/video.css CHANGED
@@ -87,3 +87,59 @@
87
87
  Arial,
88
88
  sans-serif;
89
89
  }
90
+ .video-player--with-nav .shaka-controls-container {
91
+ pointer-events: none;
92
+ }
93
+ .video-player--with-nav .shaka-controls-container .shaka-bottom-controls,
94
+ .video-player--with-nav .shaka-controls-container .shaka-play-button-container {
95
+ pointer-events: auto;
96
+ }
97
+ .video-player--compact {
98
+ container-type: inline-size;
99
+ width: 100%;
100
+ }
101
+ .video-player--compact .shaka-controls-button-panel {
102
+ background-color: initial;
103
+ justify-content: flex-end;
104
+ pointer-events: none;
105
+ }
106
+ .video-player--compact .shaka-controls-button-panel > :first-child {
107
+ border-radius: 16px;
108
+ font-size: var(--font-size-medium);
109
+ margin-right: auto;
110
+ min-width: 80px;
111
+ padding: var(--spacing-200) var(--spacing-100);
112
+ width: auto;
113
+ }
114
+ .video-player--compact .shaka-controls-button-panel button * {
115
+ margin: 0;
116
+ }
117
+ .video-player--compact .shaka-controls-button-panel button {
118
+ align-items: center;
119
+ background-color: rgba(0, 0, 0, 0.32);
120
+ border-radius: 50%;
121
+ justify-content: center;
122
+ margin: 0 5px;
123
+ }
124
+ .video-player--compact .shaka-controls-button-panel button:enabled {
125
+ display: inline-flex;
126
+ pointer-events: auto;
127
+ }
128
+ .video-player--compact .shaka-scrim-container {
129
+ background: none;
130
+ }
131
+ .video-player--compact .shaka-tooltip:hover:after {
132
+ visibility: hidden;
133
+ }
134
+ @container (inline-size < 320px) {
135
+ .video-player--compact video {
136
+ aspect-ratio: 1;
137
+ object-fit: cover;
138
+ }
139
+ .video-player--compact .shaka-controls-button-panel {
140
+ height: 48px;
141
+ }
142
+ .video-player--compact .shaka-remaining-time {
143
+ display: none;
144
+ }
145
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
- "version": "19.16.0",
3
+ "version": "19.17.1",
4
4
  "description": "Skin - CSS modules that represent the brand eBay",
5
5
  "keywords": [
6
6
  "eBay",