@proximus/lavender-styling 2.0.0-alpha.1 → 2.0.0-alpha.100

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 (10) hide show
  1. package/dist/css/proximus/themes-tokens.css +214 -190
  2. package/dist/css/proximus-ebu/themes-tokens.css +212 -188
  3. package/dist/css/scarlet/themes-tokens.css +218 -194
  4. package/dist/js/proximus/themesTokens.d.ts +126 -2
  5. package/dist/js/proximus/themesTokens.js +300 -176
  6. package/dist/js/proximus-ebu/themesTokens.d.ts +126 -2
  7. package/dist/js/proximus-ebu/themesTokens.js +300 -176
  8. package/dist/js/scarlet/themesTokens.d.ts +124 -0
  9. package/dist/js/scarlet/themesTokens.js +304 -180
  10. package/package.json +3 -2
package/dist/css/scarlet/themes-tokens.css CHANGED
@@ -15,6 +15,8 @@
15
15
  --px-color-background-data-magenta: #FF418C;
16
16
  --px-color-background-data-blue: #016BC1;
17
17
  --px-color-background-data-turquoise: #66D2CC;
18
+ --px-color-background-footer-sitemap-default: rgba(230, 31, 19, 0.80);
19
+ --px-color-background-footer-sitemap-inverted: #ffffff;
18
20
  --px-color-background-gradient-purple-top-red: 180deg, #5C2D91 66%, #EE2E5D 100%;
19
21
  --px-color-background-gradient-purple-top-magenta: 180deg, #5C2D91 66%, #FF418C 100%;
20
22
  --px-color-background-gradient-purple-top-orange: 180deg, #5C2D91 66%, #F39200 100%;
@@ -87,9 +89,9 @@
87
89
  --px-color-background-state-hover-default: rgba(0, 0, 0, 0.12);
88
90
  --px-color-background-state-hover-inverted: rgba(255, 255, 255, 0.16);
89
91
  --px-color-background-state-hover-bordered-default: #ffffff;
90
- --px-color-background-state-hover-bordered-inverted: #464646;
92
+ --px-color-background-state-hover-bordered-inverted: rgba(0, 0, 0, 0.12);
91
93
  --px-color-background-state-active-default: rgba(230, 31, 19, 0.80);
92
- --px-color-background-state-active-inverted: rgba(255, 255, 255, 0.80);
94
+ --px-color-background-state-active-inverted: #ffffff;
93
95
  --px-color-background-state-disabled-default: rgba(0, 0, 0, 0.04);
94
96
  --px-color-background-state-disabled-inverted: rgba(255, 255, 255, 0.08);
95
97
  --px-color-background-surface-light: #ffffff;
@@ -105,7 +107,7 @@
105
107
  --px-color-border-focus-offset-inverted: #252525;
106
108
  --px-color-border-main-default: rgba(0, 0, 0, 0.12);
107
109
  --px-color-border-main-inverted: rgba(255, 255, 255, 0.12);
108
- --px-color-border-brand-default: #E61F13;
110
+ --px-color-border-brand-default: #c6c6c6;
109
111
  --px-color-border-brand-inverted: #ffffff;
110
112
  --px-color-border-none-default: rgba(255, 255, 255, 0.00);
111
113
  --px-color-border-none-inverted: rgba(0, 0, 0, 0.00);
@@ -121,10 +123,12 @@
121
123
  --px-color-border-purpose-unlimited-inverted: #0088F5;
122
124
  --px-color-border-state-hover-default: #E61F13;
123
125
  --px-color-border-state-hover-inverted: #ffffff;
124
- --px-color-border-state-active-default: rgba(230, 31, 19, 0.80);
125
- --px-color-border-state-active-inverted: rgba(255, 255, 255, 0.80);
126
- --px-color-icon-brand-default: #E61F13;
126
+ --px-color-border-state-active-default: #E61F13;
127
+ --px-color-border-state-active-inverted: #ffffff;
128
+ --px-color-icon-brand-default: #464646;
127
129
  --px-color-icon-brand-inverted: #ffffff;
130
+ --px-color-icon-accent-default: #E61F13;
131
+ --px-color-icon-accent-inverted: #ffffff;
128
132
  --px-color-icon-neutral-default: #252525;
129
133
  --px-color-icon-neutral-inverted: #ffffff;
130
134
  --px-color-icon-dimmed-default: rgba(0, 0, 0, 0.56);
@@ -139,13 +143,13 @@
139
143
  --px-color-icon-purpose-unlimited-inverted: #0088F5;
140
144
  --px-color-icon-purpose-promo-default: #464646;
141
145
  --px-color-icon-purpose-promo-inverted: #DE2A56;
142
- --px-color-icon-state-hover-default: rgba(230, 31, 19, 0.80);
146
+ --px-color-icon-state-hover-default: #E61F13;
143
147
  --px-color-icon-state-hover-inverted: rgba(255, 255, 255, 0.80);
144
- --px-color-icon-state-active-default: rgba(230, 31, 19, 0.80);
145
- --px-color-icon-state-active-inverted: rgba(255, 255, 255, 0.80);
148
+ --px-color-icon-state-active-default: #E61F13;
149
+ --px-color-icon-state-active-inverted: #ffffff;
146
150
  --px-color-icon-state-disabled-default: rgba(0, 0, 0, 0.12);
147
151
  --px-color-icon-state-disabled-inverted: rgba(255, 255, 255, 0.16);
148
- --px-color-text-brand-default: #E61F13;
152
+ --px-color-text-brand-default: #464646;
149
153
  --px-color-text-brand-inverted: #ffffff;
150
154
  --px-color-text-neutral-default: #464646;
151
155
  --px-color-text-neutral-inverted: #ffffff;
@@ -161,28 +165,28 @@
161
165
  --px-color-text-purpose-unlimited-inverted: #0088F5;
162
166
  --px-color-text-purpose-promo-default: #E61F13;
163
167
  --px-color-text-purpose-promo-inverted: #E61F13;
164
- --px-color-text-state-hover-default: rgba(230, 31, 19, 0.80);
168
+ --px-color-text-state-hover-default: #E61F13;
165
169
  --px-color-text-state-hover-inverted: rgba(255, 255, 255, 0.80);
166
- --px-color-text-state-active-default: rgba(230, 31, 19, 0.80);
167
- --px-color-text-state-active-inverted: rgba(255, 255, 255, 0.80);
170
+ --px-color-text-state-active-default: #E61F13;
171
+ --px-color-text-state-active-inverted: #ffffff;
168
172
  --px-color-text-state-disabled-default: rgba(0, 0, 0, 0.12);
169
173
  --px-color-text-state-disabled-inverted: rgba(255, 255, 255, 0.16);
170
174
  --px-font-family: DINNextW05, Verdana, Helvetica, sans-serif;
171
175
  --px-line-height-ratio-s: 1.3;
172
176
  --px-line-height-ratio-l: 1.5;
173
- --px-font-size-5xl: 2.5em;
174
- --px-font-size-4xl: 2.25em;
175
- --px-font-size-3xl: 2em;
176
- --px-font-size-2xl: 1.75em;
177
- --px-font-size-xl: 1.5em;
178
- --px-font-size-l: 1.25em;
179
- --px-font-size-m: 1.125em;
180
- --px-font-size-base: 1em;
181
- --px-font-size-s: 0.875em;
182
- --px-font-size-xs: 0.75em;
183
- --px-font-size-2xs: 0.625em;
184
- --px-font-weight-subtitle: 500;
185
- --px-font-weight-body: 500;
177
+ --px-font-size-5xl: 2.5rem;
178
+ --px-font-size-4xl: 2.25rem;
179
+ --px-font-size-3xl: 2rem;
180
+ --px-font-size-2xl: 1.75rem;
181
+ --px-font-size-xl: 1.5rem;
182
+ --px-font-size-l: 1.25rem;
183
+ --px-font-size-m: 1.125rem;
184
+ --px-font-size-base: 1rem;
185
+ --px-font-size-s: 0.875rem;
186
+ --px-font-size-xs: 0.75rem;
187
+ --px-font-size-2xs: 0.625rem;
188
+ --px-font-weight-subtitle: 400;
189
+ --px-font-weight-body: 400;
186
190
  --px-font-weight-title: 700;
187
191
  --px-font-weight-title-large: 700;
188
192
  --px-price-ratio-s: 50%;
@@ -194,28 +198,28 @@
194
198
  --px-radius-button-big: 9999px;
195
199
  --px-radius-patch-small: 8px;
196
200
  --px-radius-patch-big: 8px;
197
- --px-size-action-input-code-width: 2.8125em;
198
- --px-size-action-input-counter-width: 5em;
199
- --px-size-action-input-switch-width: 3.125em;
200
- --px-size-action-input-textarea-min-height: 6.25em;
201
- --px-size-assets-xs: 1.5em;
202
- --px-size-assets-s: 2em;
203
- --px-size-assets-m: 3em;
204
- --px-size-assets-l: 4em;
205
- --px-size-assets-xl: 5em;
206
- --px-size-border-none: 0em;
207
- --px-size-border-s: 0.0625em;
208
- --px-size-border-m: 0.125em;
209
- --px-size-border-l: 0.1875em;
210
- --px-size-icon-xs: 1em;
211
- --px-size-icon-s: 1.25em;
212
- --px-size-icon-m: 1.5em;
213
- --px-size-icon-l: 2em;
214
- --px-size-icon-xl: 3em;
215
- --px-utility-size-s: 0.125em;
216
- --px-utility-size-m: 0.5em;
201
+ --px-size-action-input-code-width: 2.8125rem;
202
+ --px-size-action-input-counter-width: 5rem;
203
+ --px-size-action-input-switch-width: 3.125rem;
204
+ --px-size-action-input-textarea-min-height: 6.25rem;
205
+ --px-size-assets-xs: 1.5rem;
206
+ --px-size-assets-s: 2rem;
207
+ --px-size-assets-m: 3rem;
208
+ --px-size-assets-l: 4rem;
209
+ --px-size-assets-xl: 5rem;
210
+ --px-size-border-none: 0rem;
211
+ --px-size-border-s: 0.0625rem;
212
+ --px-size-border-m: 0.125rem;
213
+ --px-size-border-l: 0.1875rem;
214
+ --px-size-icon-xs: 1rem;
215
+ --px-size-icon-s: 1.25rem;
216
+ --px-size-icon-m: 1.5rem;
217
+ --px-size-icon-l: 2rem;
218
+ --px-size-icon-xl: 3rem;
219
+ --px-utility-size-s: 0.125rem;
220
+ --px-utility-size-m: 0.5rem;
217
221
  --px-focus-l-mobile: 18px;
218
- --px-focus-l-tablet: 20px;
222
+ --px-focus-l-tablet: 18px;
219
223
  --px-focus-l-laptop: 20px;
220
224
  --px-focus-l-desktop: 20px;
221
225
  --px-focus-offset-mobile: 4px;
@@ -226,26 +230,26 @@
226
230
  --px-focus-outline-tablet: 3px;
227
231
  --px-focus-outline-laptop: 3px;
228
232
  --px-focus-outline-desktop: 3px;
229
- --px-image-xs-mobile: 1.75em;
230
- --px-image-xs-tablet: 1.75em;
231
- --px-image-xs-laptop: 1.75em;
232
- --px-image-xs-desktop: 1.75em;
233
- --px-image-s-mobile: 3em;
234
- --px-image-s-tablet: 3em;
235
- --px-image-s-laptop: 3em;
236
- --px-image-s-desktop: 3em;
237
- --px-image-m-mobile: 3.5em;
238
- --px-image-m-tablet: 3.5em;
239
- --px-image-m-laptop: 3.5em;
240
- --px-image-m-desktop: 3.5em;
241
- --px-image-l-mobile: 5em;
242
- --px-image-l-tablet: 5em;
243
- --px-image-l-laptop: 5em;
244
- --px-image-l-desktop: 5em;
245
- --px-image-xl-mobile: 8em;
246
- --px-image-xl-tablet: 8em;
247
- --px-image-xl-laptop: 8em;
248
- --px-image-xl-desktop: 8em;
233
+ --px-image-xs-mobile: 1.75rem;
234
+ --px-image-xs-tablet: 1.75rem;
235
+ --px-image-xs-laptop: 1.75rem;
236
+ --px-image-xs-desktop: 1.75rem;
237
+ --px-image-s-mobile: 3rem;
238
+ --px-image-s-tablet: 3rem;
239
+ --px-image-s-laptop: 3rem;
240
+ --px-image-s-desktop: 3rem;
241
+ --px-image-m-mobile: 3.5rem;
242
+ --px-image-m-tablet: 3.5rem;
243
+ --px-image-m-laptop: 3.5rem;
244
+ --px-image-m-desktop: 3.5rem;
245
+ --px-image-l-mobile: 5rem;
246
+ --px-image-l-tablet: 5rem;
247
+ --px-image-l-laptop: 5rem;
248
+ --px-image-l-desktop: 5rem;
249
+ --px-image-xl-mobile: 8rem;
250
+ --px-image-xl-tablet: 8rem;
251
+ --px-image-xl-laptop: 8rem;
252
+ --px-image-xl-desktop: 8rem;
249
253
  --px-padding-none-mobile: 0px;
250
254
  --px-padding-none-tablet: 0px;
251
255
  --px-padding-none-laptop: 0px;
@@ -271,67 +275,67 @@
271
275
  --px-padding-m-laptop: 24px;
272
276
  --px-padding-m-desktop: 24px;
273
277
  --px-padding-l-mobile: 24px;
274
- --px-padding-l-tablet: 40px;
278
+ --px-padding-l-tablet: 24px;
275
279
  --px-padding-l-laptop: 40px;
276
280
  --px-padding-l-desktop: 40px;
277
281
  --px-padding-xl-mobile: 40px;
278
- --px-padding-xl-tablet: 80px;
282
+ --px-padding-xl-tablet: 40px;
279
283
  --px-padding-xl-laptop: 80px;
280
284
  --px-padding-xl-desktop: 80px;
281
- --px-platform-default-width-mobile: 23.4375em;
282
- --px-platform-default-width-tablet: 90em;
283
- --px-platform-default-width-laptop: 90em;
284
- --px-platform-default-width-desktop: 90em;
285
- --px-content-wrapper-min-width-mobile: 21.4375em;
286
- --px-content-wrapper-min-width-tablet: 73.75em;
287
- --px-content-wrapper-min-width-laptop: 73.75em;
288
- --px-content-wrapper-min-width-desktop: 73.75em;
289
- --px-content-wrapper-max-width-mobile: 62em;
290
- --px-content-wrapper-max-width-tablet: 73.75em;
291
- --px-content-wrapper-max-width-laptop: 73.75em;
292
- --px-content-wrapper-max-width-desktop: 73.75em;
293
- --px-price-size-decimal-s-mobile: 0.9375em;
294
- --px-price-size-decimal-s-tablet: 1em;
295
- --px-price-size-decimal-s-laptop: 1em;
296
- --px-price-size-decimal-s-desktop: 1em;
297
- --px-price-size-decimal-m-mobile: 0.8125em;
298
- --px-price-size-decimal-m-tablet: 1em;
299
- --px-price-size-decimal-m-laptop: 1em;
300
- --px-price-size-decimal-m-desktop: 1em;
301
- --px-price-size-decimal-l-mobile: 0.875em;
302
- --px-price-size-decimal-l-tablet: 1.125em;
303
- --px-price-size-decimal-l-laptop: 1.125em;
304
- --px-price-size-decimal-l-desktop: 1.125em;
305
- --px-price-size-sign-s-mobile: 0.875em;
306
- --px-price-size-sign-s-tablet: 1.125em;
307
- --px-price-size-sign-s-laptop: 1.125em;
308
- --px-price-size-sign-s-desktop: 1.125em;
309
- --px-price-size-sign-m-mobile: 1em;
310
- --px-price-size-sign-m-tablet: 1.3125em;
311
- --px-price-size-sign-m-laptop: 1.3125em;
312
- --px-price-size-sign-m-desktop: 1.3125em;
313
- --px-price-size-sign-l-mobile: 1.25em;
314
- --px-price-size-sign-l-tablet: 1.75em;
315
- --px-price-size-sign-l-laptop: 1.75em;
316
- --px-price-size-sign-l-desktop: 1.75em;
317
- --px-price-size-unit-s-mobile: 1.125em;
318
- --px-price-size-unit-s-tablet: 1.25em;
319
- --px-price-size-unit-s-laptop: 1.25em;
320
- --px-price-size-unit-s-desktop: 1.25em;
321
- --px-price-size-unit-m-mobile: 1.25em;
322
- --px-price-size-unit-m-tablet: 1.5em;
323
- --px-price-size-unit-m-laptop: 1.5em;
324
- --px-price-size-unit-m-desktop: 1.5em;
325
- --px-price-size-unit-l-mobile: 1.75em;
326
- --px-price-size-unit-l-tablet: 2em;
327
- --px-price-size-unit-l-laptop: 2em;
328
- --px-price-size-unit-l-desktop: 2em;
285
+ --px-platform-default-width-mobile: 23.4375rem;
286
+ --px-platform-default-width-tablet: 23.4375rem;
287
+ --px-platform-default-width-laptop: 90rem;
288
+ --px-platform-default-width-desktop: 90rem;
289
+ --px-content-wrapper-min-width-mobile: 21.4375rem;
290
+ --px-content-wrapper-min-width-tablet: 21.4375rem;
291
+ --px-content-wrapper-min-width-laptop: 73.75rem;
292
+ --px-content-wrapper-min-width-desktop: 73.75rem;
293
+ --px-content-wrapper-max-width-mobile: 62rem;
294
+ --px-content-wrapper-max-width-tablet: 62rem;
295
+ --px-content-wrapper-max-width-laptop: 73.75rem;
296
+ --px-content-wrapper-max-width-desktop: 73.75rem;
297
+ --px-price-size-decimal-s-mobile: 0.9375rem;
298
+ --px-price-size-decimal-s-tablet: 0.9375rem;
299
+ --px-price-size-decimal-s-laptop: 1rem;
300
+ --px-price-size-decimal-s-desktop: 1rem;
301
+ --px-price-size-decimal-m-mobile: 0.8125rem;
302
+ --px-price-size-decimal-m-tablet: 0.8125rem;
303
+ --px-price-size-decimal-m-laptop: 1rem;
304
+ --px-price-size-decimal-m-desktop: 1rem;
305
+ --px-price-size-decimal-l-mobile: 0.875rem;
306
+ --px-price-size-decimal-l-tablet: 0.875rem;
307
+ --px-price-size-decimal-l-laptop: 1.125rem;
308
+ --px-price-size-decimal-l-desktop: 1.125rem;
309
+ --px-price-size-sign-s-mobile: 0.875rem;
310
+ --px-price-size-sign-s-tablet: 0.875rem;
311
+ --px-price-size-sign-s-laptop: 1.125rem;
312
+ --px-price-size-sign-s-desktop: 1.125rem;
313
+ --px-price-size-sign-m-mobile: 1rem;
314
+ --px-price-size-sign-m-tablet: 1rem;
315
+ --px-price-size-sign-m-laptop: 1.3125rem;
316
+ --px-price-size-sign-m-desktop: 1.3125rem;
317
+ --px-price-size-sign-l-mobile: 1.25rem;
318
+ --px-price-size-sign-l-tablet: 1.25rem;
319
+ --px-price-size-sign-l-laptop: 1.75rem;
320
+ --px-price-size-sign-l-desktop: 1.75rem;
321
+ --px-price-size-unit-s-mobile: 1rem;
322
+ --px-price-size-unit-s-tablet: 1rem;
323
+ --px-price-size-unit-s-laptop: 1.25rem;
324
+ --px-price-size-unit-s-desktop: 1.25rem;
325
+ --px-price-size-unit-m-mobile: 1.25rem;
326
+ --px-price-size-unit-m-tablet: 1.25rem;
327
+ --px-price-size-unit-m-laptop: 1.75rem;
328
+ --px-price-size-unit-m-desktop: 1.75rem;
329
+ --px-price-size-unit-l-mobile: 1.5rem;
330
+ --px-price-size-unit-l-tablet: 1.5rem;
331
+ --px-price-size-unit-l-laptop: 2rem;
332
+ --px-price-size-unit-l-desktop: 2rem;
329
333
  --px-spacing-heading-to-subtitle-mobile: 8px;
330
- --px-spacing-heading-to-subtitle-tablet: 16px;
334
+ --px-spacing-heading-to-subtitle-tablet: 8px;
331
335
  --px-spacing-heading-to-subtitle-laptop: 16px;
332
336
  --px-spacing-heading-to-subtitle-desktop: 16px;
333
337
  --px-spacing-heading-to-content-mobile: 16px;
334
- --px-spacing-heading-to-content-tablet: 24px;
338
+ --px-spacing-heading-to-content-tablet: 16px;
335
339
  --px-spacing-heading-to-content-laptop: 24px;
336
340
  --px-spacing-heading-to-content-desktop: 24px;
337
341
  --px-none-mobile: 0px;
@@ -355,87 +359,107 @@
355
359
  --px-spacing-default-laptop: 24px;
356
360
  --px-spacing-default-desktop: 24px;
357
361
  --px-spacing-l-mobile: 24px;
358
- --px-spacing-l-tablet: 40px;
362
+ --px-spacing-l-tablet: 24px;
359
363
  --px-spacing-l-laptop: 40px;
360
364
  --px-spacing-l-desktop: 40px;
361
365
  --px-overlapped-mobile: -24px;
362
- --px-overlapped-tablet: -40px;
366
+ --px-overlapped-tablet: -24px;
363
367
  --px-overlapped-laptop: -40px;
364
368
  --px-overlapped-desktop: -40px;
369
+ --px-spacing-top-patch-mobile: 14px;
370
+ --px-spacing-top-patch-tablet: 14px;
371
+ --px-spacing-top-patch-laptop: 14px;
372
+ --px-spacing-top-patch-desktop: 14px;
373
+ --px-spacing-top-neighbor-patch-mobile: 0px;
374
+ --px-spacing-top-neighbor-patch-tablet: 0px;
375
+ --px-spacing-top-neighbor-patch-laptop: 14px;
376
+ --px-spacing-top-neighbor-patch-desktop: 14px;
377
+ --px-spacing-top-ribbon-mobile: 40px;
378
+ --px-spacing-top-ribbon-tablet: 40px;
379
+ --px-spacing-top-ribbon-laptop: 40px;
380
+ --px-spacing-top-ribbon-desktop: 40px;
381
+ --px-spacing-top-neighbor-ribbon-mobile: 0px;
382
+ --px-spacing-top-neighbor-ribbon-tablet: 0px;
383
+ --px-spacing-top-neighbor-ribbon-laptop: 40px;
384
+ --px-spacing-top-neighbor-ribbon-desktop: 40px;
385
+ --px-spacing-top-patch-and-neighbor-ribbon-mobile: 14px;
386
+ --px-spacing-top-patch-and-neighbor-ribbon-tablet: 14px;
387
+ --px-spacing-top-patch-and-neighbor-ribbon-laptop: 40px;
388
+ --px-spacing-top-patch-and-neighbor-ribbon-desktop: 40px;
365
389
  --px-spacing-page-layout-between-sections-mobile: 40px;
366
- --px-spacing-page-layout-between-sections-tablet: 80px;
390
+ --px-spacing-page-layout-between-sections-tablet: 40px;
367
391
  --px-spacing-page-layout-between-sections-laptop: 80px;
368
392
  --px-spacing-page-layout-between-sections-desktop: 80px;
369
- --px-text-size-body-l-mobile: 1em;
370
- --px-text-size-body-l-tablet: 1.125em;
371
- --px-text-size-body-l-laptop: 1.125em;
372
- --px-text-size-body-l-desktop: 1.125em;
373
- --px-text-size-body-m-mobile: 0.875em;
374
- --px-text-size-body-m-tablet: 1em;
375
- --px-text-size-body-m-laptop: 1em;
376
- --px-text-size-body-m-desktop: 1em;
377
- --px-text-size-body-s-mobile: 0.75em;
378
- --px-text-size-body-s-tablet: 0.875em;
379
- --px-text-size-body-s-laptop: 0.875em;
380
- --px-text-size-body-s-desktop: 0.875em;
381
- --px-text-size-body-xs-mobile: 0.625em;
382
- --px-text-size-body-xs-tablet: 0.75em;
383
- --px-text-size-body-xs-laptop: 0.75em;
384
- --px-text-size-body-xs-desktop: 0.75em;
385
- --px-text-size-heading-5xl-mobile: 2.25em;
386
- --px-text-size-heading-5xl-tablet: 2.5em;
387
- --px-text-size-heading-5xl-laptop: 2.5em;
388
- --px-text-size-heading-5xl-desktop: 2.5em;
389
- --px-text-size-heading-4xl-mobile: 2em;
390
- --px-text-size-heading-4xl-tablet: 2.25em;
391
- --px-text-size-heading-4xl-laptop: 2.25em;
392
- --px-text-size-heading-4xl-desktop: 2.25em;
393
- --px-text-size-heading-3xl-mobile: 1.75em;
394
- --px-text-size-heading-3xl-tablet: 2em;
395
- --px-text-size-heading-3xl-laptop: 2em;
396
- --px-text-size-heading-3xl-desktop: 2em;
397
- --px-text-size-heading-2xl-mobile: 1.5em;
398
- --px-text-size-heading-2xl-tablet: 1.75em;
399
- --px-text-size-heading-2xl-laptop: 1.75em;
400
- --px-text-size-heading-2xl-desktop: 1.75em;
401
- --px-text-size-heading-xl-mobile: 1.25em;
402
- --px-text-size-heading-xl-tablet: 1.5em;
403
- --px-text-size-heading-xl-laptop: 1.5em;
404
- --px-text-size-heading-xl-desktop: 1.5em;
405
- --px-text-size-heading-l-mobile: 1.125em;
406
- --px-text-size-heading-l-tablet: 1.25em;
407
- --px-text-size-heading-l-laptop: 1.25em;
408
- --px-text-size-heading-l-desktop: 1.25em;
409
- --px-text-size-heading-m-mobile: 1em;
410
- --px-text-size-heading-m-tablet: 1.125em;
411
- --px-text-size-heading-m-laptop: 1.125em;
412
- --px-text-size-heading-m-desktop: 1.125em;
413
- --px-text-size-heading-s-mobile: 0.875em;
414
- --px-text-size-heading-s-tablet: 1em;
415
- --px-text-size-heading-s-laptop: 1em;
416
- --px-text-size-heading-s-desktop: 1em;
417
- --px-text-size-label-l-mobile: 1em;
418
- --px-text-size-label-l-tablet: 1.125em;
419
- --px-text-size-label-l-laptop: 1.125em;
420
- --px-text-size-label-l-desktop: 1.125em;
421
- --px-text-size-label-m-mobile: 0.875em;
422
- --px-text-size-label-m-tablet: 1em;
423
- --px-text-size-label-m-laptop: 1em;
424
- --px-text-size-label-m-desktop: 1em;
425
- --px-text-size-label-s-mobile: 0.75em;
426
- --px-text-size-label-s-tablet: 0.875em;
427
- --px-text-size-label-s-laptop: 0.875em;
428
- --px-text-size-label-s-desktop: 0.875em;
429
- --px-text-size-label-xs-mobile: 0.625em;
430
- --px-text-size-label-xs-tablet: 0.75em;
431
- --px-text-size-label-xs-laptop: 0.75em;
432
- --px-text-size-label-xs-desktop: 0.75em;
433
- --px-text-size-link-m-mobile: 0.875em;
434
- --px-text-size-link-m-tablet: 1em;
435
- --px-text-size-link-m-laptop: 1em;
436
- --px-text-size-link-m-desktop: 1em;
437
- --px-text-size-link-s-mobile: 0.75em;
438
- --px-text-size-link-s-tablet: 0.875em;
439
- --px-text-size-link-s-laptop: 0.875em;
440
- --px-text-size-link-s-desktop: 0.875em;
393
+ --px-text-size-body-l-mobile: 1rem;
394
+ --px-text-size-body-l-tablet: 1rem;
395
+ --px-text-size-body-l-laptop: 1.125rem;
396
+ --px-text-size-body-l-desktop: 1.125rem;
397
+ --px-text-size-body-m-mobile: 0.875rem;
398
+ --px-text-size-body-m-tablet: 0.875rem;
399
+ --px-text-size-body-m-laptop: 1rem;
400
+ --px-text-size-body-m-desktop: 1rem;
401
+ --px-text-size-body-s-mobile: 0.75rem;
402
+ --px-text-size-body-s-tablet: 0.75rem;
403
+ --px-text-size-body-s-laptop: 0.875rem;
404
+ --px-text-size-body-s-desktop: 0.875rem;
405
+ --px-text-size-body-xs-mobile: 0.625rem;
406
+ --px-text-size-body-xs-tablet: 0.625rem;
407
+ --px-text-size-body-xs-laptop: 0.75rem;
408
+ --px-text-size-body-xs-desktop: 0.75rem;
409
+ --px-text-size-heading-5xl-mobile: 2.25rem;
410
+ --px-text-size-heading-5xl-tablet: 2.25rem;
411
+ --px-text-size-heading-5xl-laptop: 2.5rem;
412
+ --px-text-size-heading-5xl-desktop: 2.5rem;
413
+ --px-text-size-heading-4xl-mobile: 2rem;
414
+ --px-text-size-heading-4xl-tablet: 2rem;
415
+ --px-text-size-heading-4xl-laptop: 2.25rem;
416
+ --px-text-size-heading-4xl-desktop: 2.25rem;
417
+ --px-text-size-heading-3xl-mobile: 1.75rem;
418
+ --px-text-size-heading-3xl-tablet: 1.75rem;
419
+ --px-text-size-heading-3xl-laptop: 2rem;
420
+ --px-text-size-heading-3xl-desktop: 2rem;
421
+ --px-text-size-heading-2xl-mobile: 1.5rem;
422
+ --px-text-size-heading-2xl-tablet: 1.5rem;
423
+ --px-text-size-heading-2xl-laptop: 1.75rem;
424
+ --px-text-size-heading-2xl-desktop: 1.75rem;
425
+ --px-text-size-heading-xl-mobile: 1.25rem;
426
+ --px-text-size-heading-xl-tablet: 1.25rem;
427
+ --px-text-size-heading-xl-laptop: 1.5rem;
428
+ --px-text-size-heading-xl-desktop: 1.5rem;
429
+ --px-text-size-heading-l-mobile: 1.125rem;
430
+ --px-text-size-heading-l-tablet: 1.125rem;
431
+ --px-text-size-heading-l-laptop: 1.25rem;
432
+ --px-text-size-heading-l-desktop: 1.25rem;
433
+ --px-text-size-heading-m-mobile: 1rem;
434
+ --px-text-size-heading-m-tablet: 1rem;
435
+ --px-text-size-heading-m-laptop: 1.125rem;
436
+ --px-text-size-heading-m-desktop: 1.125rem;
437
+ --px-text-size-heading-s-mobile: 0.875rem;
438
+ --px-text-size-heading-s-tablet: 0.875rem;
439
+ --px-text-size-heading-s-laptop: 1rem;
440
+ --px-text-size-heading-s-desktop: 1rem;
441
+ --px-text-size-label-l-mobile: 1rem;
442
+ --px-text-size-label-l-tablet: 1rem;
443
+ --px-text-size-label-l-laptop: 1.125rem;
444
+ --px-text-size-label-l-desktop: 1.125rem;
445
+ --px-text-size-label-m-mobile: 0.875rem;
446
+ --px-text-size-label-m-tablet: 0.875rem;
447
+ --px-text-size-label-m-laptop: 1rem;
448
+ --px-text-size-label-m-desktop: 1rem;
449
+ --px-text-size-label-s-mobile: 0.75rem;
450
+ --px-text-size-label-s-tablet: 0.75rem;
451
+ --px-text-size-label-s-laptop: 0.875rem;
452
+ --px-text-size-label-s-desktop: 0.875rem;
453
+ --px-text-size-label-xs-mobile: 0.625rem;
454
+ --px-text-size-label-xs-tablet: 0.625rem;
455
+ --px-text-size-label-xs-laptop: 0.75rem;
456
+ --px-text-size-label-xs-desktop: 0.75rem;
457
+ --px-text-size-link-m-mobile: 0.875rem;
458
+ --px-text-size-link-m-tablet: 0.875rem;
459
+ --px-text-size-link-m-laptop: 1rem;
460
+ --px-text-size-link-m-desktop: 1rem;
461
+ --px-text-size-link-s-mobile: 0.75rem;
462
+ --px-text-size-link-s-tablet: 0.75rem;
463
+ --px-text-size-link-s-laptop: 0.875rem;
464
+ --px-text-size-link-s-desktop: 0.875rem;
441
465
  }
package/dist/js/proximus/themesTokens.d.ts CHANGED
@@ -18,6 +18,8 @@ export const ColorBackgroundDataRed: string;
18
18
  export const ColorBackgroundDataMagenta: string;
19
19
  export const ColorBackgroundDataBlue: string;
20
20
  export const ColorBackgroundDataTurquoise: string;
21
+ export const ColorBackgroundFooterSitemapDefault: string;
22
+ export const ColorBackgroundFooterSitemapInverted: string;
21
23
  export const ColorBackgroundGradientPurpleTopRed: {
22
24
  color: string;
23
25
  position: number;
@@ -275,6 +277,8 @@ export const ColorBorderStateActiveDefault: string;
275
277
  export const ColorBorderStateActiveInverted: string;
276
278
  export const ColorIconBrandDefault: string;
277
279
  export const ColorIconBrandInverted: string;
280
+ export const ColorIconAccentDefault: string;
281
+ export const ColorIconAccentInverted: string;
278
282
  export const ColorIconNeutralDefault: string;
279
283
  export const ColorIconNeutralInverted: string;
280
284
  export const ColorIconDimmedDefault: string;
@@ -1454,6 +1458,126 @@ export const OverlappedDesktop: {
1454
1458
  decimal: number;
1455
1459
  scale: number;
1456
1460
  };
1461
+ export const SpacingTopPatchMobile: {
1462
+ original: string;
1463
+ number: number;
1464
+ decimal: number;
1465
+ scale: number;
1466
+ };
1467
+ export const SpacingTopPatchTablet: {
1468
+ original: string;
1469
+ number: number;
1470
+ decimal: number;
1471
+ scale: number;
1472
+ };
1473
+ export const SpacingTopPatchLaptop: {
1474
+ original: string;
1475
+ number: number;
1476
+ decimal: number;
1477
+ scale: number;
1478
+ };
1479
+ export const SpacingTopPatchDesktop: {
1480
+ original: string;
1481
+ number: number;
1482
+ decimal: number;
1483
+ scale: number;
1484
+ };
1485
+ export const SpacingTopNeighborPatchMobile: {
1486
+ original: number;
1487
+ number: number;
1488
+ decimal: number;
1489
+ scale: number;
1490
+ };
1491
+ export const SpacingTopNeighborPatchTablet: {
1492
+ original: number;
1493
+ number: number;
1494
+ decimal: number;
1495
+ scale: number;
1496
+ };
1497
+ export const SpacingTopNeighborPatchLaptop: {
1498
+ original: string;
1499
+ number: number;
1500
+ decimal: number;
1501
+ scale: number;
1502
+ };
1503
+ export const SpacingTopNeighborPatchDesktop: {
1504
+ original: string;
1505
+ number: number;
1506
+ decimal: number;
1507
+ scale: number;
1508
+ };
1509
+ export const SpacingTopRibbonMobile: {
1510
+ original: string;
1511
+ number: number;
1512
+ decimal: number;
1513
+ scale: number;
1514
+ };
1515
+ export const SpacingTopRibbonTablet: {
1516
+ original: string;
1517
+ number: number;
1518
+ decimal: number;
1519
+ scale: number;
1520
+ };
1521
+ export const SpacingTopRibbonLaptop: {
1522
+ original: string;
1523
+ number: number;
1524
+ decimal: number;
1525
+ scale: number;
1526
+ };
1527
+ export const SpacingTopRibbonDesktop: {
1528
+ original: string;
1529
+ number: number;
1530
+ decimal: number;
1531
+ scale: number;
1532
+ };
1533
+ export const SpacingTopNeighborRibbonMobile: {
1534
+ original: number;
1535
+ number: number;
1536
+ decimal: number;
1537
+ scale: number;
1538
+ };
1539
+ export const SpacingTopNeighborRibbonTablet: {
1540
+ original: number;
1541
+ number: number;
1542
+ decimal: number;
1543
+ scale: number;
1544
+ };
1545
+ export const SpacingTopNeighborRibbonLaptop: {
1546
+ original: string;
1547
+ number: number;
1548
+ decimal: number;
1549
+ scale: number;
1550
+ };
1551
+ export const SpacingTopNeighborRibbonDesktop: {
1552
+ original: string;
1553
+ number: number;
1554
+ decimal: number;
1555
+ scale: number;
1556
+ };
1557
+ export const SpacingTopPatchAndNeighborRibbonMobile: {
1558
+ original: string;
1559
+ number: number;
1560
+ decimal: number;
1561
+ scale: number;
1562
+ };
1563
+ export const SpacingTopPatchAndNeighborRibbonTablet: {
1564
+ original: string;
1565
+ number: number;
1566
+ decimal: number;
1567
+ scale: number;
1568
+ };
1569
+ export const SpacingTopPatchAndNeighborRibbonLaptop: {
1570
+ original: string;
1571
+ number: number;
1572
+ decimal: number;
1573
+ scale: number;
1574
+ };
1575
+ export const SpacingTopPatchAndNeighborRibbonDesktop: {
1576
+ original: string;
1577
+ number: number;
1578
+ decimal: number;
1579
+ scale: number;
1580
+ };
1457
1581
  export const SpacingPageLayoutBetweenSectionsMobile: {
1458
1582
  original: string;
1459
1583
  number: number;
@@ -1604,13 +1728,13 @@ export const TextSizeHeading4xlMobile: {
1604
1728
  decimal: number;
1605
1729
  scale: number;
1606
1730
  };
1607
- export const TextSizeHeading4xlLaptop: {
1731
+ export const TextSizeHeading4xlTablet: {
1608
1732
  original: string;
1609
1733
  number: number;
1610
1734
  decimal: number;
1611
1735
  scale: number;
1612
1736
  };
1613
- export const TextSizeHeading4xlTablet: {
1737
+ export const TextSizeHeading4xlLaptop: {
1614
1738
  original: string;
1615
1739
  number: number;
1616
1740
  decimal: number;