@mjsz-vbr-elements/shared 2.16.0 → 2.18.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 (2) hide show
  1. package/dist/variables.css +230 -0
  2. package/package.json +5 -2
package/dist/variables.css ADDED
@@ -0,0 +1,230 @@
1
+ :root,
2
+ :host {
3
+ font-family: "Roboto Condensed", Avenir, Helvetica, Arial, sans-serif;
4
+ --vbr-widget-primary-color-0: #ffffff;
5
+ --vbr-widget-primary-color-50: #eceff1;
6
+ --vbr-widget-primary-color-100: #cfd8dc;
7
+ --vbr-widget-primary-color-200: #b0bec5;
8
+ --vbr-widget-primary-color-300: #90a4ae;
9
+ --vbr-widget-primary-color-400: #78909c;
10
+ --vbr-widget-primary-color-500: #607d8b;
11
+ --vbr-widget-primary-color-600: #546e7a;
12
+ --vbr-widget-primary-color-700: #455a64;
13
+ --vbr-widget-primary-color-800: #37474f;
14
+ --vbr-widget-primary-color-900: #263238;
15
+ --vbr-widget-secondary-color-100: #dcedc8;
16
+ --vbr-widget-secondary-color-200: #badb94;
17
+ --vbr-widget-secondary-color-300: #aed581;
18
+ --vbr-widget-secondary-color-400: #9ccc65;
19
+ --vbr-widget-secondary-color-500: #8bc34a;
20
+ --vbr-widget-secondary-color-700: #689f38;
21
+ --vbr-widget-secondary-color-800: #558b2f;
22
+ --vbr-widget-secondary-color-900: #33691e;
23
+ --vbr-widget-danger-color-50: #ffebee;
24
+ --vbr-widget-danger-color-100: #ffcdd2;
25
+ --vbr-widget-danger-color-200: #ef9a9a;
26
+ --vbr-widget-danger-color-300: #e57373;
27
+ --vbr-widget-danger-color-400: #ef5350;
28
+ --vbr-widget-danger-color-500: #f44336;
29
+ --vbr-widget-danger-color-700: #d32f2f;
30
+ --vbr-widget-danger-color-900: #b71c1c;
31
+ --vbr-widget-danger-color-a400: #ff1744;
32
+ --vbr-widget-live-game-color: #8bc34a;
33
+ --vbr-widget-neutral-color: #ffc107;
34
+ --vbr-widget-typography-font-size-50: 0.6275rem; /* 10px */
35
+ --vbr-widget-typography-font-size-100: 0.6875rem; /* 11px */
36
+ --vbr-widget-typography-font-size-200: 0.75rem; /* 12px */
37
+ --vbr-widget-typography-font-size-300: 0.8125rem; /* 13px */
38
+ --vbr-widget-typography-font-size-400: 0.875rem; /* 14px */
39
+ --vbr-widget-typography-font-size-500: 1rem; /* 16px */
40
+ --vbr-widget-typography-font-size-600: 1.125rem; /* 18px */
41
+ --vbr-widget-typography-font-size-700: 1.25rem; /* 20px */
42
+ --vbr-widget-typography-font-size-800: 1.5rem; /* 24px */
43
+ --vbr-widget-typography-font-size-900: 1.75rem; /* 28px */
44
+ --vbr-widget-typography-font-size-950: 2rem; /* 32px */
45
+ --vbr-widget-typography-font-lineheight-50: calc(var(--vbr-widget-typography-font-size-50) * 1.628);
46
+ --vbr-widget-typography-font-lineheight-100: calc(var(--vbr-widget-typography-font-size-100) * 1.628);
47
+ --vbr-widget-typography-font-lineheight-200: calc(var(--vbr-widget-typography-font-size-200) * 1.628);
48
+ --vbr-widget-typography-font-lineheight-300: calc(var(--vbr-widget-typography-font-size-300) * 1.628);
49
+ --vbr-widget-typography-font-lineheight-400: calc(var(--vbr-widget-typography-font-size-400) * 1.628);
50
+ --vbr-widget-typography-font-lineheight-500: calc(var(--vbr-widget-typography-font-size-500) * 1.628);
51
+ --vbr-widget-typography-font-lineheight-600: calc(var(--vbr-widget-typography-font-size-600) * 1.628);
52
+ --vbr-widget-typography-font-lineheight-700: calc(var(--vbr-widget-typography-font-size-700) * 1.628);
53
+ --vbr-widget-typography-font-lineheight-800: calc(var(--vbr-widget-typography-font-size-800) * 1.628);
54
+ --vbr-widget-typography-font-lineheight-900: calc(var(--vbr-widget-typography-font-size-900) * 1.628);
55
+ --vbr-widget-typography-font-lineheight-950: calc(var(--vbr-widget-typography-font-size-950) * 1.628);
56
+ --vbr-widget-typography-heading-weight: 500;
57
+ --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-font-size-800);
58
+ --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-font-size-700);
59
+ --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-font-size-600);
60
+ --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-font-size-500);
61
+ --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-font-size-400);
62
+ --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-font-size-200);
63
+ --vbr-widget-table-header-font-size: var(--vbr-widget-typography-font-size-200);
64
+ --vbr-widget-table-default-column-width: 30px;
65
+ --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
66
+ --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
67
+ --vbr-widget-table-neutral-color: var(--vbr-widget-primary-color-300);
68
+ --vbr-widget-table-header-bg-color: var(--vbr-widget-primary-color-800);
69
+ --vbr-widget-table-header-hover-bg-color: var(--vbr-widget-primary-color-700);
70
+ --vbr-widget-table-header-color: var(--vbr-widget-primary-color-200);
71
+ --vbr-widget-table-table-header-active-bg-color: var(--vbr-widget-primary-color-700);
72
+ --vbr-widget-table-header-active-color: var(--vbr-widget-primary-color-0);
73
+ --vbr-widget-table-hover-color: var(--vbr-widget-secondary-color-900);
74
+ --vbr-widget-table-hover-bg-color: var(--vbr-widget-secondary-color-100);
75
+ --vbr-widget-table-active-color: var(--vbr-widget-secondary-color-900);
76
+ --vbr-widget-table-active-bg-color: var(--vbr-widget-secondary-color-200);
77
+ --vbr-widget-table-active-even-bg-color: var(--vbr-widget-secondary-color-300);
78
+ --vbr-widget-table-active-hover-color: var(--vbr-widget-secondary-color-900);
79
+ --vbr-widget-table-active-hover-bg-color: var(--vbr-widget-secondary-color-400);
80
+ --vbr-widget-table-portrait-border-color: var(--vbr-widget-primary-color-100);
81
+ --vbr-widget-table-portrait-bg-color: var(--vbr-widget-primary-color-50);
82
+ --vbr-widget-table-cell-light-color: var(--vbr-widget-primary-color-400);
83
+ --vbr-widget-table-cell-dark-color: var(--vbr-widget-primary-color-900);
84
+ --vbr-widget-table-stripped-bg-color: #f8f9fa;
85
+ --vbr-widget-table-label-color: var(--vbr-widget-primary-color-500);
86
+ --vbr-widget-table-label-bg-color: var(--vbr-widget-primary-color-50);
87
+ --vbr-widget-table-cell-logo-size: 20px;
88
+ --vbr-widget-table-cell-portrait-size: 26px;
89
+ --vbr-widget-table-zero-color: var(--vbr-widget-primary-color-200);
90
+ --vbr-widget-paginator-color: var(--vbr-widget-primary-color-500);
91
+ --vbr-widget-paginator-bg-color: var(--vbr-widget-primary-color-0);
92
+ --vbr-widget-paginator-hover-color: var(--vbr-widget-primary-color-700);
93
+ --vbr-widget-paginator-hover-bg-color: var(--vbr-widget-primary-color-100);
94
+ --vbr-widget-paginator-border-color: var(--vbr-widget-primary-color-100);
95
+ --vbr-widget-paginator-active-color: var(--vbr-widget-primary-color-0);
96
+ --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
97
+ --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
98
+ --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-font-size-200);
99
+ --vbr-widget-tooltip-color: #ffffff;
100
+ --vbr-widget-tooltip-bg-color: #000000;
101
+ --vbr-widget-popover-trigger-hover-bg-color: var(--vbr-widget-secondary-color-200);
102
+ --vbr-widget-popover-trigger-focus-bg-color: var(--vbr-widget-secondary-color-300);
103
+ --vbr-widget-popover-bg-color: var(--vbr-widget-primary-color-0);
104
+ --vbr-widget-dropdown-item-color: var(--vbr-widget-primary-color-500);
105
+ --vbr-widget-dropdown-item-hover-color: var(--vbr-widget-primary-color-800);
106
+ --vbr-widget-dropdown-item-hover-bg-color: var(--vbr-widget-primary-color-50);
107
+ --vbr-widget-dropdown-item-selected-color: var(--vbr-widget-secondary-color-700);
108
+ --vbr-widget-dropdown-item-selected-hover-bg-color: var(--vbr-widget-secondary-color-100);
109
+ --vbr-widget-error-notice-bg-color: var(--vbr-widget-danger-color-50);
110
+ --vbr-widget-error-notice-border-color: var(--vbr-widget-danger-color-100);
111
+ --vbr-widget-error-notice-color: var(--vbr-widget-danger-color-700);
112
+ --vbr-widget-link-color: var(--vbr-widget-secondary-color-700);
113
+ --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
114
+ --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
115
+ --vbr-widget-base-input-font-size: var(--vbr-widget-typography-font-size-400);
116
+ --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
117
+ --vbr-widget-base-input-border-radius: 3px;
118
+ --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
119
+ --vbr-widget-form-label-font-size: var(--vbr-widget-typography-font-size-200);
120
+ --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
121
+ --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-font-size-400);
122
+ --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
123
+ --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
124
+ --vbr-widget-badge-font-size: var(--vbr-widget-typography-font-size-50);
125
+ --vbr-widget-badge-large-font-size: var(--vbr-widget-typography-font-size-100);
126
+ --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-font-size-300);
127
+ --vbr-widget-tab-btn-padding: 0.625rem 1rem;
128
+ --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-font-size-500);
129
+ --vbr-widget-tab-btn-font-weight: 500;
130
+ --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
131
+ --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
132
+ --vbr-widget-tab-btn-border-color: transparent;
133
+ --vbr-widget-tab-btn-border-style: solid;
134
+ --vbr-widget-tab-btn-border-width: 0 0 3px 0;
135
+ --vbr-widget-tab-btn-text-transform: uppercase;
136
+ --vbr-widget-tab-btn-hover-color: var(--vbr-widget-primary-color-500);
137
+ --vbr-widget-tab-btn-hover-bg-color: var(--vbr-widget-primary-color-0);
138
+ --vbr-widget-tab-btn-hover-border-color: transparent;
139
+ --vbr-widget-tab-btn-active-bg-color: var(--vbr-widget-primary-color-0);
140
+ --vbr-widget-tab-btn-active-color: var(--vbr-widget-primary-color-900);
141
+ --vbr-widget-tab-btn-active-border-color: var(--vbr-widget-secondary-color-500);
142
+ --vbr-widget-toggle-group-gap: 0.625rem;
143
+ --vbr-widget-toggle-group-btn-padding: 3px 10px;
144
+ --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-font-size-400);
145
+ --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
146
+ --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
147
+ --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
148
+ --vbr-widget-toggle-group-btn-radius: 4px;
149
+ --vbr-widget-progress-height: 10px;
150
+ --vbr-widget-progress-border-radius: 5px;
151
+ --vbr-widget-progress-bg-color: var(--vbr-widget-primary-color-50);
152
+ --vbr-widget-progress-bar-color: var(--vbr-widget-live-game-color);
153
+ --vbr-widget-progress-bar-stripe-color: rgba(255, 255, 255, 0.2);
154
+ --vbr-widget-progress-bar-stripe-angle: 45deg;
155
+ --vbr-widget-gamecenter-result-size: 6rem;
156
+ --vbr-widget-gamecenter-result-weight: 700;
157
+ --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
158
+ --vbr-widget-gamecenter-teamname-size: var(--vbr-widget-typography-font-size-700);
159
+ --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
160
+ --vbr-widget-gamecenter-teamname-weight: 700;
161
+ --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
162
+ --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-font-size-500);
163
+ --vbr-widget-gamecenter-title-weight: 700;
164
+ --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
165
+ --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-font-size-500);
166
+ --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
167
+ --vbr-widget-gamecenter-local-gamedate-size: var(--vbr-widget-typography-font-size-300);
168
+ --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
169
+ --vbr-widget-gamecenter-gamestatus-size: var(--vbr-widget-typography-font-size-400);
170
+ --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
171
+ --vbr-widget-gamecenter-periodresults-size: var(--vbr-widget-typography-font-size-700);
172
+ --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
173
+ --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
174
+ --vbr-widget-gamecenter-period-header-size: var(--vbr-widget-typography-font-size-300);
175
+ --vbr-widget-gamecenter-period-header-weight: 500;
176
+ --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
177
+ --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
178
+ --vbr-widget-gamecenter-stats-title-size: var(--vbr-widget-typography-font-size-300);
179
+ --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
180
+ --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-font-size-500);
181
+ --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
182
+ --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
183
+ --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
184
+ --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
185
+ --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-font-size-500);
186
+ --vbr-widget-gamecenter-events-evented-person-weight: 600;
187
+ --vbr-widget-gamecenter-events-assitst-list-size: var(--vbr-widget-typography-font-size-400);
188
+ --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-font-size-200);
189
+ --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-font-size-500);
190
+ --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-font-size-400);
191
+ --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-font-size-400);
192
+ --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
193
+ --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
194
+ --vbr-widget-gamecenter-card-secondary-color: var(--vbr-widget-primary-color-500);
195
+ --vbr-widget-gamecenter-card-tertiary-color: var(--vbr-widget-primary-color-300);
196
+ --vbr-widget-gamecenter-card-border-color: var(--vbr-widget-primary-color-100);
197
+ --vbr-widget-gamecenter-card-bg-color: var(--vbr-widget-primary-color-0);
198
+ --vbr-widget-gamecenter-card-event-goal-border-color: var(--vbr-widget-primary-color-700);
199
+ --vbr-widget-gamecenter-card-event-goal-bg-color: var(--vbr-widget-primary-color-700);
200
+ --vbr-widget-gamecenter-home-team-identifier-color: #2870ed;
201
+ --vbr-widget-gamecenter-away-team-identifier-color: #ff6129;
202
+ --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
203
+ --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
204
+ --vbr-widget-main-image-wrapper-horizontal-margin: 0;
205
+ --vbr-widget-sticky-top-offset: 0;
206
+ --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-font-size-100);
207
+ --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
208
+ --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
209
+ --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-font-size-300);
210
+ --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
211
+ --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-font-size-200);
212
+ --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
213
+ --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
214
+ --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
215
+ --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
216
+ --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
217
+ --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
218
+ --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-font-size-200);
219
+ --vbr-widget-standings-selector-title-size: var(--vbr-widget-typography-font-size-500);
220
+ --vbr-widget-standings-selector-title-color: var(--vbr-widget-primary-color-700);
221
+ --vbr-widget-standings-selector-title-transform: none;
222
+ --vbr-widget-standings-selector-title-padding: 0 0.625em 0.5625em;
223
+ --vbr-widget-standings-selector-title-bg-color: transparent;
224
+ --vbr-widget-standings-selector-section-title-bg: var(--vbr-widget-primary-color-50);
225
+ --vbr-widget-standings-selector-section-title-size: var(--vbr-widget-typography-font-size-400);
226
+ --vbr-widget-standings-selector-section-title-color: var(--vbr-widget-primary-color-700);
227
+ --vbr-widget-standings-selector-section-title-padding: 0.25em 0;
228
+ --vbr-widget-standings-selector-section-logo-size: 30px;
229
+ --vbr-widget-standings-selector-section-team-color: var(--vbr-widget-primary-color-900);
230
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mjsz-vbr-elements/shared",
3
3
  "type": "module",
4
- "version": "2.16.0",
4
+ "version": "2.18.0",
5
5
  "private": false,
6
6
  "author": "Ákos Stegner <akos.stegner@gmail.com>",
7
7
  "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
@@ -24,10 +24,13 @@
24
24
  "devDependencies": {
25
25
  "@vitejs/plugin-vue": "^5.2.1",
26
26
  "glob": "^11.0.1",
27
+ "sass": "^1.85.0",
27
28
  "vite": "^6.0.11",
28
29
  "vite-svg-loader": "^5.1.0"
29
30
  },
30
31
  "scripts": {
31
- "build": "vite build"
32
+ "build:variables": "sass --no-source-map ./assets/css/_variables.scss ./dist/variables.css",
33
+ "build:icons": "vite build",
34
+ "build": "pnpm run build:icons && pnpm run build:variables"
32
35
  }
33
36
  }