@ebay/skin 19.21.2 → 19.22.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 (14) hide show
  1. package/dist/infotip/infotip.css +2 -3
  2. package/dist/skeleton/skeleton.css +4 -4
  3. package/dist/tokens/evo-dark-class.css +4 -0
  4. package/dist/tokens/evo-dark.css +4 -0
  5. package/dist/tokens/evo-light-class.css +4 -0
  6. package/dist/tokens/evo-light.css +4 -0
  7. package/dist/tokens/evo-live-dark-class.css +4 -0
  8. package/dist/tokens/evo-live-dark.css +4 -0
  9. package/dist/tokens/evo-live-light-class.css +4 -0
  10. package/dist/tokens/evo-live-light.css +4 -0
  11. package/dist/tooltip/tooltip.css +2 -3
  12. package/dist/tourtip/tourtip.css +2 -3
  13. package/dist/video/video.css +20 -69
  14. package/package.json +3 -3
package/dist/infotip/infotip.css CHANGED
@@ -12,11 +12,11 @@ span.infotip {
12
12
  display: none;
13
13
  font-size: 14px;
14
14
  left: 0;
15
- min-width: 280px;
15
+ max-width: min(344px, 80vw);
16
16
  position: absolute;
17
17
  top: 0;
18
18
  transform: scaleX(1);
19
- width: fit-content;
19
+ width: max-content;
20
20
  }
21
21
  .infotip__mask,
22
22
  .infotip__overlay {
@@ -143,6 +143,5 @@ button.infotip__close {
143
143
  @media (min-width: 512px) {
144
144
  .infotip__overlay {
145
145
  max-width: 400px;
146
- width: max-content;
147
146
  }
148
147
  }
package/dist/skeleton/skeleton.css CHANGED
@@ -137,18 +137,18 @@ div.skeleton__textbox:not(:last-child) {
137
137
  @media (prefers-reduced-motion: no-preference) {
138
138
  @keyframes on-primary {
139
139
  0% {
140
- background-color: var(--color-loading-first);
140
+ background-color: var(--color-loading-on-primary-state-1);
141
141
  }
142
142
  to {
143
- background-color: var(--color-loading-second);
143
+ background-color: var(--color-loading-on-primary-state-2);
144
144
  }
145
145
  }
146
146
  @keyframes on-secondary {
147
147
  0% {
148
- background-color: var(--color-loading-on-secondary-first);
148
+ background-color: var(--color-loading-on-secondary-state-1);
149
149
  }
150
150
  to {
151
- background-color: var(--color-loading-on-secondary-second);
151
+ background-color: var(--color-loading-on-secondary-state-2);
152
152
  }
153
153
  }
154
154
  .skeleton__avatar,
package/dist/tokens/evo-dark-class.css CHANGED
@@ -125,6 +125,10 @@
125
125
  );
126
126
  --color-loading-fill-on-secondary: #353535;
127
127
  --color-loading-fill: #2d2d2d;
128
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
129
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
131
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
128
132
  --color-scrim-background: rgba(0, 0, 0, 0.64);
129
133
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
130
134
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tokens/evo-dark.css CHANGED
@@ -125,6 +125,10 @@
125
125
  );
126
126
  --color-loading-fill-on-secondary: #353535;
127
127
  --color-loading-fill: #2d2d2d;
128
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
129
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
131
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
128
132
  --color-scrim-background: rgba(0, 0, 0, 0.64);
129
133
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
130
134
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tokens/evo-light-class.css CHANGED
@@ -124,6 +124,10 @@
124
124
  );
125
125
  --color-loading-fill-on-secondary: #e4e4e4;
126
126
  --color-loading-fill: #ededed;
127
+ --color-loading-on-primary-state-1: var(--color-neutral-200);
128
+ --color-loading-on-primary-state-2: var(--color-neutral-300);
129
+ --color-loading-on-secondary-state-1: var(--color-neutral-300);
130
+ --color-loading-on-secondary-state-2: var(--color-neutral-400);
127
131
  --color-scrim-background: rgba(0, 0, 0, 0.3);
128
132
  --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
129
133
  --color-state-layer-focus: rgba(0, 0, 0, 0.04);
package/dist/tokens/evo-light.css CHANGED
@@ -124,6 +124,10 @@
124
124
  );
125
125
  --color-loading-fill-on-secondary: #e4e4e4;
126
126
  --color-loading-fill: #ededed;
127
+ --color-loading-on-primary-state-1: var(--color-neutral-200);
128
+ --color-loading-on-primary-state-2: var(--color-neutral-300);
129
+ --color-loading-on-secondary-state-1: var(--color-neutral-300);
130
+ --color-loading-on-secondary-state-2: var(--color-neutral-400);
127
131
  --color-scrim-background: rgba(0, 0, 0, 0.3);
128
132
  --color-state-layer-focus-on-strong: rgba(255, 255, 255, 0.12);
129
133
  --color-state-layer-focus: rgba(0, 0, 0, 0.04);
package/dist/tokens/evo-live-dark-class.css CHANGED
@@ -124,6 +124,10 @@
124
124
  );
125
125
  --color-loading-fill-on-secondary: #353535;
126
126
  --color-loading-fill: #2d2d2d;
127
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
128
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
129
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
127
131
  --color-scrim-background: rgba(0, 0, 0, 0.64);
128
132
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
129
133
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tokens/evo-live-dark.css CHANGED
@@ -124,6 +124,10 @@
124
124
  );
125
125
  --color-loading-fill-on-secondary: #353535;
126
126
  --color-loading-fill: #2d2d2d;
127
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
128
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
129
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
127
131
  --color-scrim-background: rgba(0, 0, 0, 0.64);
128
132
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
129
133
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tokens/evo-live-light-class.css CHANGED
@@ -125,6 +125,10 @@
125
125
  );
126
126
  --color-loading-fill-on-secondary: #353535;
127
127
  --color-loading-fill: #2d2d2d;
128
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
129
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
131
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
128
132
  --color-scrim-background: rgba(0, 0, 0, 0.64);
129
133
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
130
134
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tokens/evo-live-light.css CHANGED
@@ -125,6 +125,10 @@
125
125
  );
126
126
  --color-loading-fill-on-secondary: #353535;
127
127
  --color-loading-fill: #2d2d2d;
128
+ --color-loading-on-primary-state-1: var(--color-neutral-800);
129
+ --color-loading-on-primary-state-2: var(--color-neutral-700);
130
+ --color-loading-on-secondary-state-1: var(--color-neutral-700);
131
+ --color-loading-on-secondary-state-2: var(--color-neutral-600);
128
132
  --color-scrim-background: rgba(0, 0, 0, 0.64);
129
133
  --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
130
134
  --color-state-layer-focus: rgba(255, 255, 255, 0.08);
package/dist/tooltip/tooltip.css CHANGED
@@ -12,11 +12,11 @@ span.tooltip {
12
12
  display: none;
13
13
  font-size: 14px;
14
14
  left: 0;
15
- min-width: 280px;
15
+ max-width: min(344px, 80vw);
16
16
  position: absolute;
17
17
  top: 0;
18
18
  transform: scaleX(1);
19
- width: fit-content;
19
+ width: max-content;
20
20
  }
21
21
  .tooltip__mask,
22
22
  .tooltip__overlay {
@@ -143,6 +143,5 @@ button.tooltip__close {
143
143
  @media (min-width: 512px) {
144
144
  .tooltip__overlay {
145
145
  max-width: 400px;
146
- width: max-content;
147
146
  }
148
147
  }
package/dist/tourtip/tourtip.css CHANGED
@@ -12,11 +12,11 @@ span.tourtip {
12
12
  display: none;
13
13
  font-size: 14px;
14
14
  left: 0;
15
- min-width: 280px;
15
+ max-width: min(344px, 80vw);
16
16
  position: absolute;
17
17
  top: 0;
18
18
  transform: scaleX(1);
19
- width: fit-content;
19
+ width: max-content;
20
20
  }
21
21
  .tourtip__mask,
22
22
  .tourtip__overlay {
@@ -185,6 +185,5 @@ span.tourtip__heading {
185
185
  @media (min-width: 512px) {
186
186
  .tourtip__overlay {
187
187
  max-width: 400px;
188
- width: max-content;
189
188
  }
190
189
  }
package/dist/video/video.css CHANGED
@@ -38,54 +38,18 @@
38
38
  margin-right: 10px;
39
39
  width: 24px;
40
40
  }
41
- .video-player .shaka-play-button {
42
- background: none;
43
- box-shadow: none;
44
- height: auto;
45
- padding: 0;
46
- width: auto;
47
- }
48
- .video-player .icon--video-play,
49
- .video-player .shaka-play-button svg {
50
- height: 48px;
51
- width: 48px;
52
- }
53
- .video-player .shaka-bottom-controls {
54
- box-sizing: border-box;
55
- margin-bottom: 3%;
56
- padding-bottom: 0;
57
- position: relative;
58
- width: 94%;
59
- }
60
- .video-player .shaka-controls-button-panel {
61
- background-color: rgba(0, 0, 0, 0.7);
62
- border-radius: 8px;
63
- bottom: 0;
64
- height: 40px;
65
- position: absolute;
66
- width: 100%;
67
- }
68
- .video-player .shaka-controls-button-panel :first-child {
69
- margin-left: 8px;
70
- }
71
- .video-player .shaka-controls-button-panel :last-child {
72
- margin-right: 8px;
73
- }
74
- .video-player--poster .shaka-scrim-container {
75
- visibility: hidden;
76
- }
77
41
  .video-player .shaka-range-container {
78
- box-sizing: border-box;
79
- margin: 0 188px 18px 76px;
80
- }
81
- .video-player #shaka-player-ui-time-container {
82
- display: none;
42
+ margin-bottom: -25px;
43
+ margin-left: 105px;
44
+ margin-right: 133px;
45
+ z-index: 3;
83
46
  }
84
- .video-player .shaka-video-container {
85
- font-family:
86
- Market Sans,
87
- Arial,
88
- sans-serif;
47
+ .video-player .shaka-controls-container .shaka-play-button-container {
48
+ align-items: center;
49
+ display: flex;
50
+ height: 100%;
51
+ justify-content: center;
52
+ width: 100%;
89
53
  }
90
54
  .video-player--with-nav .shaka-controls-container {
91
55
  pointer-events: none;
@@ -100,36 +64,23 @@
100
64
  }
101
65
  .video-player--compact .shaka-controls-button-panel {
102
66
  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;
67
+ margin-bottom: 10px;
116
68
  }
117
69
  .video-player--compact .shaka-controls-button-panel button {
118
- align-items: center;
119
70
  background-color: rgba(0, 0, 0, 0.32);
120
71
  border-radius: 50%;
121
- justify-content: center;
122
72
  margin: 0 5px;
123
73
  }
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;
74
+ .video-player--compact
75
+ .shaka-controls-button-panel
76
+ button.shaka-remaining-time {
77
+ border-radius: 16px;
78
+ font-size: var(--font-size-medium);
79
+ min-width: 80px;
80
+ padding: var(--spacing-200) var(--spacing-100);
130
81
  }
131
- .video-player--compact .shaka-tooltip:hover:after {
132
- visibility: hidden;
82
+ .video-player--with-nav.video-player--compact .shaka-big-buttons-container {
83
+ display: none;
133
84
  }
134
85
  @container (inline-size < 320px) {
135
86
  .video-player--compact video {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
- "version": "19.21.2",
3
+ "version": "19.22.0",
4
4
  "description": "Skin - CSS modules that represent the brand eBay",
5
5
  "keywords": [
6
6
  "eBay",
@@ -35,8 +35,8 @@
35
35
  ],
36
36
  "scripts": {
37
37
  "prebuild": "npm run clean",
38
- "build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
39
- "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
38
+ "build": "npm run lint:sass && npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
39
+ "build:css": "rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
40
40
  "build:icons": "tsx scripts genSVG && prettier ../../src/data/icons.json --write",
41
41
  "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
42
42
  "bundle": "sass src/sass:dist src/tokens:dist/tokens --no-source-map -I \"../../node_modules\"",