@mjsz-vbr-elements/shared 2.9.0 → 2.9.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 (4) hide show
  1. package/dist/css/common.css +11 -3
  2. package/dist/css/games-timeline.css +5 -23
  3. package/dist/css/variables.css +10 -2
  4. package/package.json +1 -1
package/dist/css/common.css CHANGED
@@ -70,8 +70,12 @@ ul {
70
70
  --vbr-widget-live-game-color: #8bc34a;
71
71
  --vbr-widget-neutral-color: #ffc107;
72
72
 
73
+ --vbr-widget-typography-text-xxs-size: 0.6875rem; /* 11px */
74
+ --vbr-widget-typography-text-xxs-lineheight: 1rem; /* 16px */
73
75
  --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
74
76
  --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
77
+ --vbr-widget-typography-text-xsm-size: 0.8125rem; /* 13px */
78
+ --vbr-widget-typography-text-xsm-lineheight: 1.375rem; /* 22px */
75
79
  --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
76
80
  --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
77
81
  --vbr-widget-typography-text-base-size: 1rem; /* 16px */
@@ -166,10 +170,10 @@ ul {
166
170
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
167
171
  --vbr-widget-badge-font-size: 0.625rem;
168
172
  --vbr-widget-badge-large-font-size: 0.6875rem;
169
- --vbr-widget-badge-extra-large-font-size: 0.8125rem;
173
+ --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-text-xsm-size);
170
174
 
171
175
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
172
- --vbr-widget-tab-btn-font-size: var();
176
+ --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-text-base-size);
173
177
  --vbr-widget-tab-btn-font-weight: 500;
174
178
  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
175
179
  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -258,15 +262,19 @@ ul {
258
262
 
259
263
  --vbr-widget-sticky-top-offset: 0;
260
264
 
265
+ --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-text-xxs-size);
261
266
  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
262
267
  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
268
+ --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-text-xsm-size);
263
269
  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
270
+ --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-text-xs-size);
264
271
  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
265
272
  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
266
273
  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
267
274
  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
268
275
  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
269
276
  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
277
+ --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-text-xs-size);
270
278
  }
271
279
 
272
280
  html,
@@ -436,5 +444,5 @@ a:hover {
436
444
 
437
445
  .is-badge.is-extra-large {
438
446
  font-size: var(--vbr-widget-badge-extra-large-font-size);
439
- padding: 0.21875rem 0.45rem;
447
+ padding: 0.21875rem 0.4196rem;
440
448
  }
package/dist/css/games-timeline.css CHANGED
@@ -15,18 +15,6 @@
15
15
  scroll-snap-type: x mandatory;
16
16
  -ms-overflow-style: none;
17
17
  scrollbar-width: none;
18
-
19
- /* background: canvas;
20
- --cover: canvas;
21
- --mixed: color-mix(in lch, canvasText, canvas 75%);
22
- --shadow: light-dark(var(--mixed), black);
23
- --size: 4px;
24
- background:
25
- linear-gradient(-270deg, var(--cover) 0, #0000) 0 0 / calc(var(--size) * 2)
26
- no-repeat local,
27
- linear-gradient(-270deg, var(--shadow) 0, #0000) 0 0 / var(--size)
28
- no-repeat scroll,
29
- canvas; */
30
18
  }
31
19
 
32
20
  .mjsz-vbr-games-timeline > div::-webkit-scrollbar {
@@ -140,7 +128,7 @@
140
128
 
141
129
  .mjsz-vbr-games-timeline-game time {
142
130
  grid-area: gamedate;
143
- font-size: 0.6875rem;
131
+ font-size: var(--vbr-widget-games-timeline-game-date-size);
144
132
  font-weight: 700;
145
133
  color: var(--vbr-widget-games-timeline-game-date-color);
146
134
  }
@@ -161,7 +149,7 @@
161
149
 
162
150
  .mjsz-vbr-games-timeline-game :is(.is-home-team-name, .is-away-team-name) {
163
151
  justify-self: start;
164
- font-size: 0.8125rem;
152
+ font-size: var(--vbr-widget-games-timeline-game-team-size);
165
153
  font-weight: 700;
166
154
  color: var(--vbr-widget-games-timeline-game-team-color);
167
155
  overflow: hidden;
@@ -178,10 +166,6 @@
178
166
  grid-area: away-team;
179
167
  }
180
168
 
181
- .mjsz-vbr-games-timeline-game :is(.is-home-team-score, .is-away-team-score) {
182
- font-size: 0.8125rem;
183
- }
184
-
185
169
  .mjsz-vbr-games-timeline-game .is-home-team-score {
186
170
  grid-area: home-score;
187
171
  }
@@ -192,7 +176,7 @@
192
176
 
193
177
  .mjsz-vbr-games-timeline-game .is-status {
194
178
  grid-area: status;
195
- font-size: 0.75rem;
179
+ font-size: var(--vbr-widget-games-timeline-game-status-size);
196
180
  color: var(--vbr-widget-games-timeline-game-status-color);
197
181
  overflow: hidden;
198
182
  width: 100%;
@@ -214,7 +198,7 @@
214
198
  .mjsz-vbr-games-timeline-schedule-link button {
215
199
  display: flex;
216
200
  align-items: center;
217
- font-size: 0.75rem;
201
+ font-size: var(--vbr-widget-games-timeline-external-link-size);
218
202
  font-weight: 700;
219
203
  text-transform: uppercase;
220
204
  color: var(--vbr-widget-games-timeline-external-link-color);
@@ -231,9 +215,8 @@
231
215
  align-items: center;
232
216
  place-content: center;
233
217
  width: 100%;
234
- font-size: 0.875rem;
218
+ font-size: var(--vbr-widget-typography-text-sm-size);
235
219
  font-weight: 500;
236
- /* text-transform: uppercase; */
237
220
  color: var(--vbr-widget-error-notice-color);
238
221
  }
239
222
 
@@ -243,6 +226,5 @@
243
226
  }
244
227
 
245
228
  .mjsz-vbr-games-timeline-error-indicator button {
246
- /* text-transform: uppercase; */
247
229
  text-decoration: underline;
248
230
  }
package/dist/css/variables.css CHANGED
@@ -36,8 +36,12 @@
36
36
  --vbr-widget-live-game-color: #8bc34a;
37
37
  --vbr-widget-neutral-color: #ffc107;
38
38
 
39
+ --vbr-widget-typography-text-xxs-size: 0.6875rem; /* 11px */
40
+ --vbr-widget-typography-text-xxs-lineheight: 1rem; /* 16px */
39
41
  --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
40
42
  --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
43
+ --vbr-widget-typography-text-xsm-size: 0.8125rem; /* 13px */
44
+ --vbr-widget-typography-text-xsm-lineheight: 1.375rem; /* 22px */
41
45
  --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
42
46
  --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
43
47
  --vbr-widget-typography-text-base-size: 1rem; /* 16px */
@@ -132,10 +136,10 @@
132
136
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
133
137
  --vbr-widget-badge-font-size: 0.625rem;
134
138
  --vbr-widget-badge-large-font-size: 0.6875rem;
135
- --vbr-widget-badge-extra-large-font-size: 0.8125rem;
139
+ --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-text-xsm-size);
136
140
 
137
141
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
138
- --vbr-widget-tab-btn-font-size: var();
142
+ --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-text-base-size);
139
143
  --vbr-widget-tab-btn-font-weight: 500;
140
144
  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
141
145
  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -224,13 +228,17 @@
224
228
 
225
229
  --vbr-widget-sticky-top-offset: 0;
226
230
 
231
+ --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-text-xxs-size);
227
232
  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
228
233
  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
234
+ --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-text-xsm-size);
229
235
  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
236
+ --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-text-xs-size);
230
237
  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
231
238
  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
232
239
  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
233
240
  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
234
241
  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
235
242
  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
243
+ --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-text-xs-size);
236
244
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mjsz-vbr-elements/shared",
3
3
  "private": false,
4
- "version": "2.9.0",
4
+ "version": "2.9.1",
5
5
  "author": "Ákos Stegner <akos.stegner@gmail.com>",
6
6
  "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
7
7
  "type": "module",