@entur/typography 2.0.2-beta.0 → 2.0.3

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 (3) hide show
  1. package/dist/beta/styles/components/heading.css +210 -136
  2. package/dist/beta/styles/components/text.css +242 -140
  3. package/package.json +4 -4
package/dist/beta/styles/components/heading.css CHANGED
@@ -141,6 +141,59 @@
141
141
  --basecolors-text-subduedalt: #b3b4bd;
142
142
  }
143
143
 
144
+ /* DO NOT CHANGE!*/
145
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
146
+ [data-color-mode=light],
147
+ :root {
148
+ --components-typography-basetext-contrast-text-accent: #ffffff;
149
+ --components-typography-basetext-standard-text-accent: #181c56;
150
+ --components-typography-blockquote-contrast-stroke: #8284ab;
151
+ --components-typography-blockquote-contrast-text-accent: #ffffff;
152
+ --components-typography-blockquote-contrast-text-subdued: #d9dae8;
153
+ --components-typography-blockquote-standard-stroke: #8284ab;
154
+ --components-typography-blockquote-standard-text-accent: #181c56;
155
+ --components-typography-blockquote-standard-text-subdued: #626493;
156
+ --components-typography-codetext-contrast-border: rgba(255, 255, 255, 0);
157
+ --components-typography-codetext-contrast-border-interactive: #aeb7e2;
158
+ --components-typography-codetext-contrast-fill: #f6f6f9;
159
+ --components-typography-codetext-contrast-text: #181c56;
160
+ --components-typography-codetext-standard-border: rgba(84, 86, 140, 0.4);
161
+ --components-typography-codetext-standard-border-interactive: #181c56;
162
+ --components-typography-codetext-standard-fill: #f6f6f9;
163
+ --components-typography-codetext-standard-text: #181c56;
164
+ --components-typography-label-contrast-text-accent: #d9dae8;
165
+ --components-typography-label-standard-text-accent: #626493;
166
+ --components-typography-list-contrast-border: #aeb7e2;
167
+ --components-typography-list-contrast-text-accent: #ffffff;
168
+ --components-typography-list-standard-border: #aeb7e2;
169
+ --components-typography-list-standard-text-accent: #181c56;
170
+ }
171
+
172
+ [data-color-mode=dark] {
173
+ --components-typography-basetext-contrast-text-accent: #e5e5e9;
174
+ --components-typography-basetext-standard-text-accent: #e5e5e9;
175
+ --components-typography-blockquote-contrast-stroke: #81828f;
176
+ --components-typography-blockquote-contrast-text-accent: #e5e5e9;
177
+ --components-typography-blockquote-contrast-text-subdued: #b3b4bd;
178
+ --components-typography-blockquote-standard-stroke: #81828f;
179
+ --components-typography-blockquote-standard-text-accent: #e5e5e9;
180
+ --components-typography-blockquote-standard-text-subdued: #b3b4bd;
181
+ --components-typography-codetext-contrast-border: rgba(255, 255, 255, 0);
182
+ --components-typography-codetext-contrast-border-interactive: #e5e5e9;
183
+ --components-typography-codetext-contrast-fill: #393a49;
184
+ --components-typography-codetext-contrast-text: #e5e5e9;
185
+ --components-typography-codetext-standard-border: rgba(255, 255, 255, 0);
186
+ --components-typography-codetext-standard-border-interactive: #e5e5e9;
187
+ --components-typography-codetext-standard-fill: #393a49;
188
+ --components-typography-codetext-standard-text: #e5e5e9;
189
+ --components-typography-label-contrast-text-accent: #e5e5e9;
190
+ --components-typography-label-standard-text-accent: #e5e5e9;
191
+ --components-typography-list-contrast-border: #aeb7e2;
192
+ --components-typography-list-contrast-text-accent: #e5e5e9;
193
+ --components-typography-list-standard-border: #aeb7e2;
194
+ --components-typography-list-standard-text-accent: #e5e5e9;
195
+ }
196
+
144
197
  /*
145
198
  * Typography Display Modes
146
199
  *
@@ -194,40 +247,40 @@
194
247
 
195
248
  :root,
196
249
  [view-mode=standard] {
197
- /* Standard - number */
198
- --font-line-height-body-xs: var(--size-7);
199
- --font-line-height-body-s: var(--size-8);
200
- --font-line-height-body-lg: var(--size-9);
201
- --font-line-height-body-m: var(--size-9);
202
- --font-line-height-body-xl: var(--size-10);
203
- --font-line-height-heading-s: var(--size-7);
204
- --font-line-height-heading-xs: var(--size-7);
205
- --font-line-height-heading-m: var(--size-8);
206
- --font-line-height-heading-lg: var(--size-9);
207
- --font-line-height-heading-xl: var(--size-10);
208
- --font-line-height-heading-2xl: var(--size-11);
209
- --font-paragraph-spacing-body-xs: var(--size-4);
210
- --font-paragraph-spacing-body-s: var(--size-5);
211
- --font-paragraph-spacing-body-m: var(--size-7);
212
- --font-paragraph-spacing-body-lg: var(--size-8);
213
- --font-paragraph-spacing-body-xl: var(--size-8);
214
- --font-paragraph-spacing-heading-s: var(--size-4);
215
- --font-paragraph-spacing-heading-xs: var(--size-4);
216
- --font-paragraph-spacing-heading-lg: var(--size-5);
217
- --font-paragraph-spacing-heading-m: var(--size-5);
218
- --font-paragraph-spacing-heading-2xl: var(--size-7);
219
- --font-paragraph-spacing-heading-xl: var(--size-7);
220
- --font-size-body-xs: var(--size-5);
221
- --font-size-body-s: var(--size-6);
222
- --font-size-body-lg: var(--size-7);
223
- --font-size-body-m: var(--size-7);
224
- --font-size-body-xl: var(--size-8);
225
- --font-size-heading-xs: var(--size-5);
226
- --font-size-heading-s: var(--size-6);
227
- --font-size-heading-m: var(--size-7);
228
- --font-size-heading-lg: var(--size-8);
229
- --font-size-heading-xl: var(--size-9);
230
- --font-size-heading-2xl: var(--size-10);
250
+ /* number */
251
+ --font-line-height-body-xs: var(--size-8);
252
+ --font-line-height-body-s: var(--size-9);
253
+ --font-line-height-body-lg: var(--size-10);
254
+ --font-line-height-body-m: var(--size-10);
255
+ --font-line-height-body-xl: var(--size-11);
256
+ --font-line-height-heading-s: var(--size-8);
257
+ --font-line-height-heading-xs: var(--size-8);
258
+ --font-line-height-heading-m: var(--size-9);
259
+ --font-line-height-heading-lg: var(--size-10);
260
+ --font-line-height-heading-xl: var(--size-11);
261
+ --font-line-height-heading-2xl: var(--size-12);
262
+ --font-paragraph-spacing-body-xs: var(--size-5);
263
+ --font-paragraph-spacing-body-s: var(--size-6);
264
+ --font-paragraph-spacing-body-m: var(--size-8);
265
+ --font-paragraph-spacing-body-lg: var(--size-9);
266
+ --font-paragraph-spacing-body-xl: var(--size-9);
267
+ --font-paragraph-spacing-heading-s: var(--size-5);
268
+ --font-paragraph-spacing-heading-xs: var(--size-5);
269
+ --font-paragraph-spacing-heading-lg: var(--size-6);
270
+ --font-paragraph-spacing-heading-m: var(--size-6);
271
+ --font-paragraph-spacing-heading-2xl: var(--size-8);
272
+ --font-paragraph-spacing-heading-xl: var(--size-8);
273
+ --font-size-body-xs: var(--size-6);
274
+ --font-size-body-s: var(--size-7);
275
+ --font-size-body-lg: var(--size-8);
276
+ --font-size-body-m: var(--size-8);
277
+ --font-size-body-xl: var(--size-9);
278
+ --font-size-heading-xs: var(--size-6);
279
+ --font-size-heading-s: var(--size-7);
280
+ --font-size-heading-m: var(--size-8);
281
+ --font-size-heading-lg: var(--size-9);
282
+ --font-size-heading-xl: var(--size-10);
283
+ --font-size-heading-2xl: var(--size-11);
231
284
  /* string */
232
285
  --font-family-nationale: Nationale;
233
286
  --font-weight-body: 500;
@@ -236,39 +289,39 @@
236
289
  @media screen and (min-width: 50rem) {
237
290
  :root,
238
291
  [view-mode=standard] {
239
- --font-line-height-body-xs: var(--size-7);
240
- --font-line-height-body-s: var(--size-8);
241
- --font-line-height-body-m: var(--size-9);
242
- --font-line-height-body-lg: var(--size-10);
243
- --font-line-height-body-xl: var(--size-11);
244
- --font-line-height-heading-xs: var(--size-7);
245
- --font-line-height-heading-s: var(--size-8);
246
- --font-line-height-heading-m: var(--size-9);
247
- --font-line-height-heading-lg: var(--size-10);
248
- --font-line-height-heading-xl: var(--size-12);
249
- --font-line-height-heading-2xl: var(--size-14);
250
- --font-paragraph-spacing-body-xs: var(--size-4);
251
- --font-paragraph-spacing-body-s: var(--size-5);
252
- --font-paragraph-spacing-body-m: var(--size-7);
253
- --font-paragraph-spacing-body-lg: var(--size-9);
254
- --font-paragraph-spacing-body-xl: var(--size-9);
255
- --font-paragraph-spacing-heading-xs: var(--size-4);
256
- --font-paragraph-spacing-heading-m: var(--size-5);
257
- --font-paragraph-spacing-heading-s: var(--size-5);
258
- --font-paragraph-spacing-heading-lg: var(--size-7);
259
- --font-paragraph-spacing-heading-xl: var(--size-8);
260
- --font-paragraph-spacing-heading-2xl: var(--size-9);
261
- --font-size-body-xs: var(--size-5);
262
- --font-size-body-s: var(--size-6);
263
- --font-size-body-m: var(--size-7);
264
- --font-size-body-lg: var(--size-8);
265
- --font-size-body-xl: var(--size-9);
266
- --font-size-heading-xs: var(--size-6);
267
- --font-size-heading-s: var(--size-7);
268
- --font-size-heading-m: var(--size-8);
269
- --font-size-heading-lg: var(--size-9);
270
- --font-size-heading-xl: var(--size-11);
271
- --font-size-heading-2xl: var(--size-13);
292
+ --font-line-height-body-xs: var(--size-8);
293
+ --font-line-height-body-s: var(--size-9);
294
+ --font-line-height-body-m: var(--size-10);
295
+ --font-line-height-body-lg: var(--size-11);
296
+ --font-line-height-body-xl: var(--size-12);
297
+ --font-line-height-heading-xs: var(--size-8);
298
+ --font-line-height-heading-s: var(--size-9);
299
+ --font-line-height-heading-m: var(--size-10);
300
+ --font-line-height-heading-lg: var(--size-11);
301
+ --font-line-height-heading-xl: var(--size-13);
302
+ --font-line-height-heading-2xl: var(--size-15);
303
+ --font-paragraph-spacing-body-xs: var(--size-5);
304
+ --font-paragraph-spacing-body-s: var(--size-6);
305
+ --font-paragraph-spacing-body-m: var(--size-8);
306
+ --font-paragraph-spacing-body-lg: var(--size-10);
307
+ --font-paragraph-spacing-body-xl: var(--size-10);
308
+ --font-paragraph-spacing-heading-xs: var(--size-5);
309
+ --font-paragraph-spacing-heading-m: var(--size-6);
310
+ --font-paragraph-spacing-heading-s: var(--size-6);
311
+ --font-paragraph-spacing-heading-lg: var(--size-8);
312
+ --font-paragraph-spacing-heading-xl: var(--size-9);
313
+ --font-paragraph-spacing-heading-2xl: var(--size-10);
314
+ --font-size-body-xs: var(--size-6);
315
+ --font-size-body-s: var(--size-7);
316
+ --font-size-body-m: var(--size-8);
317
+ --font-size-body-lg: var(--size-9);
318
+ --font-size-body-xl: var(--size-10);
319
+ --font-size-heading-xs: var(--size-7);
320
+ --font-size-heading-s: var(--size-8);
321
+ --font-size-heading-m: var(--size-9);
322
+ --font-size-heading-lg: var(--size-10);
323
+ --font-size-heading-xl: var(--size-12);
324
+ --font-size-heading-2xl: var(--size-14);
272
325
  /* string */
273
326
  --font-family-nationale: Nationale;
274
327
  --font-weight-body: 500;
@@ -277,40 +330,40 @@
277
330
  }
278
331
 
279
332
  [view-mode=compact] {
280
- /* Compact - number */
281
- --font-line-height-body-xs: var(--size-7);
282
- --font-line-height-body-s: var(--size-8);
283
- --font-line-height-body-lg: var(--size-9);
284
- --font-line-height-body-m: var(--size-9);
285
- --font-line-height-body-xl: var(--size-10);
286
- --font-line-height-heading-s: var(--size-7);
287
- --font-line-height-heading-xs: var(--size-7);
288
- --font-line-height-heading-m: var(--size-8);
289
- --font-line-height-heading-lg: var(--size-9);
290
- --font-line-height-heading-xl: var(--size-10);
291
- --font-line-height-heading-2xl: var(--size-11);
292
- --font-paragraph-spacing-body-xs: var(--size-4);
293
- --font-paragraph-spacing-body-s: var(--size-5);
294
- --font-paragraph-spacing-body-m: var(--size-7);
295
- --font-paragraph-spacing-body-lg: var(--size-8);
296
- --font-paragraph-spacing-body-xl: var(--size-8);
297
- --font-paragraph-spacing-heading-s: var(--size-4);
298
- --font-paragraph-spacing-heading-xs: var(--size-4);
299
- --font-paragraph-spacing-heading-lg: var(--size-5);
300
- --font-paragraph-spacing-heading-m: var(--size-5);
301
- --font-paragraph-spacing-heading-2xl: var(--size-7);
302
- --font-paragraph-spacing-heading-xl: var(--size-7);
303
- --font-size-body-xs: var(--size-5);
304
- --font-size-body-s: var(--size-6);
305
- --font-size-body-lg: var(--size-7);
306
- --font-size-body-m: var(--size-7);
307
- --font-size-body-xl: var(--size-8);
308
- --font-size-heading-xs: var(--size-5);
309
- --font-size-heading-s: var(--size-6);
310
- --font-size-heading-m: var(--size-7);
311
- --font-size-heading-lg: var(--size-8);
312
- --font-size-heading-xl: var(--size-9);
313
- --font-size-heading-2xl: var(--size-10);
333
+ /* number */
334
+ --font-line-height-body-xs: var(--size-8);
335
+ --font-line-height-body-s: var(--size-9);
336
+ --font-line-height-body-lg: var(--size-10);
337
+ --font-line-height-body-m: var(--size-10);
338
+ --font-line-height-body-xl: var(--size-11);
339
+ --font-line-height-heading-s: var(--size-8);
340
+ --font-line-height-heading-xs: var(--size-8);
341
+ --font-line-height-heading-m: var(--size-9);
342
+ --font-line-height-heading-lg: var(--size-10);
343
+ --font-line-height-heading-xl: var(--size-11);
344
+ --font-line-height-heading-2xl: var(--size-12);
345
+ --font-paragraph-spacing-body-xs: var(--size-5);
346
+ --font-paragraph-spacing-body-s: var(--size-6);
347
+ --font-paragraph-spacing-body-m: var(--size-8);
348
+ --font-paragraph-spacing-body-lg: var(--size-9);
349
+ --font-paragraph-spacing-body-xl: var(--size-9);
350
+ --font-paragraph-spacing-heading-s: var(--size-5);
351
+ --font-paragraph-spacing-heading-xs: var(--size-5);
352
+ --font-paragraph-spacing-heading-lg: var(--size-6);
353
+ --font-paragraph-spacing-heading-m: var(--size-6);
354
+ --font-paragraph-spacing-heading-2xl: var(--size-8);
355
+ --font-paragraph-spacing-heading-xl: var(--size-8);
356
+ --font-size-body-xs: var(--size-6);
357
+ --font-size-body-s: var(--size-7);
358
+ --font-size-body-lg: var(--size-8);
359
+ --font-size-body-m: var(--size-8);
360
+ --font-size-body-xl: var(--size-9);
361
+ --font-size-heading-xs: var(--size-6);
362
+ --font-size-heading-s: var(--size-7);
363
+ --font-size-heading-m: var(--size-8);
364
+ --font-size-heading-lg: var(--size-9);
365
+ --font-size-heading-xl: var(--size-10);
366
+ --font-size-heading-2xl: var(--size-11);
314
367
  /* string */
315
368
  --font-family-nationale: Nationale;
316
369
  --font-weight-body: 500;
@@ -318,40 +371,40 @@
318
371
  }
319
372
 
320
373
  [view-mode=display] {
321
- /* Display - number */
322
- --font-line-height-body-xs: var(--size-10);
323
- --font-line-height-body-s: var(--size-11);
324
- --font-line-height-body-m: var(--size-14);
325
- --font-line-height-body-lg: var(--size-17);
326
- --font-line-height-body-xl: var(--size-18);
327
- --font-line-height-heading-xs: var(--size-10);
328
- --font-line-height-heading-s: var(--size-12);
329
- --font-line-height-heading-m: var(--size-14);
330
- --font-line-height-heading-lg: var(--size-17);
331
- --font-line-height-heading-xl: var(--size-19);
332
- --font-line-height-heading-2xl: var(--size-20);
333
- --font-paragraph-spacing-body-xs: var(--size-8);
334
- --font-paragraph-spacing-body-s: var(--size-9);
335
- --font-paragraph-spacing-body-m: var(--size-11);
336
- --font-paragraph-spacing-body-lg: var(--size-13);
337
- --font-paragraph-spacing-body-xl: var(--size-15);
338
- --font-paragraph-spacing-heading-xs: var(--size-5);
339
- --font-paragraph-spacing-heading-s: var(--size-7);
340
- --font-paragraph-spacing-heading-m: var(--size-8);
341
- --font-paragraph-spacing-heading-lg: var(--size-9);
342
- --font-paragraph-spacing-heading-xl: var(--size-11);
343
- --font-paragraph-spacing-heading-2xl: var(--size-12);
344
- --font-size-body-xs: var(--size-8);
345
- --font-size-body-s: var(--size-9);
346
- --font-size-body-m: var(--size-11);
347
- --font-size-body-lg: var(--size-13);
348
- --font-size-body-xl: var(--size-15);
349
- --font-size-heading-xs: var(--size-9);
350
- --font-size-heading-s: var(--size-11);
351
- --font-size-heading-m: var(--size-13);
352
- --font-size-heading-lg: var(--size-15);
353
- --font-size-heading-xl: var(--size-18);
354
- --font-size-heading-2xl: var(--size-19);
374
+ /* number */
375
+ --font-line-height-body-xs: var(--size-11);
376
+ --font-line-height-body-s: var(--size-12);
377
+ --font-line-height-body-m: var(--size-15);
378
+ --font-line-height-body-lg: var(--size-18);
379
+ --font-line-height-body-xl: var(--size-19);
380
+ --font-line-height-heading-xs: var(--size-11);
381
+ --font-line-height-heading-s: var(--size-13);
382
+ --font-line-height-heading-m: var(--size-15);
383
+ --font-line-height-heading-lg: var(--size-18);
384
+ --font-line-height-heading-xl: var(--size-20);
385
+ --font-line-height-heading-2xl: var(--size-21);
386
+ --font-paragraph-spacing-body-xs: var(--size-9);
387
+ --font-paragraph-spacing-body-s: var(--size-10);
388
+ --font-paragraph-spacing-body-m: var(--size-12);
389
+ --font-paragraph-spacing-body-lg: var(--size-14);
390
+ --font-paragraph-spacing-body-xl: var(--size-16);
391
+ --font-paragraph-spacing-heading-xs: var(--size-6);
392
+ --font-paragraph-spacing-heading-s: var(--size-8);
393
+ --font-paragraph-spacing-heading-m: var(--size-9);
394
+ --font-paragraph-spacing-heading-lg: var(--size-10);
395
+ --font-paragraph-spacing-heading-xl: var(--size-12);
396
+ --font-paragraph-spacing-heading-2xl: var(--size-13);
397
+ --font-size-body-xs: var(--size-9);
398
+ --font-size-body-s: var(--size-10);
399
+ --font-size-body-m: var(--size-12);
400
+ --font-size-body-lg: var(--size-14);
401
+ --font-size-body-xl: var(--size-16);
402
+ --font-size-heading-xs: var(--size-10);
403
+ --font-size-heading-s: var(--size-12);
404
+ --font-size-heading-m: var(--size-14);
405
+ --font-size-heading-lg: var(--size-16);
406
+ --font-size-heading-xl: var(--size-19);
407
+ --font-size-heading-2xl: var(--size-20);
355
408
  /* string */
356
409
  --font-family-nationale: Nationale;
357
410
  --font-weight-body: 500;
@@ -359,11 +412,14 @@
359
412
  }
360
413
 
361
414
  .eds-heading {
362
- color: var(--primary-text-color);
415
+ color: var(--components-typography-basetext-standard-text-accent);
363
416
  font-weight: var(--font-weight-heading);
364
417
  -webkit-font-smoothing: antialiased;
365
418
  margin: 0;
366
419
  }
420
+ .eds-contrast .eds-heading {
421
+ color: var(--components-typography-basetext-contrast-text-accent);
422
+ }
367
423
  .eds-heading--2xl {
368
424
  font-size: var(--font-size-heading-2xl);
369
425
  line-height: var(--font-line-height-heading-2xl);
@@ -393,31 +449,49 @@
393
449
  line-height: var(--font-line-height-heading-2xl);
394
450
  margin-bottom: var(--font-paragraph-spacing-heading-lg);
395
451
  }
452
+ .eds-heading--title-1:not(:first-child) {
453
+ margin-top: var(--font-paragraph-spacing-heading-lg);
454
+ }
396
455
  .eds-heading--title-2 {
397
456
  font-size: var(--font-size-heading-xl);
398
457
  line-height: var(--font-line-height-heading-xl);
399
458
  margin-bottom: var(--font-paragraph-spacing-heading-xl);
400
459
  }
460
+ .eds-heading--title-2:not(:first-child) {
461
+ margin-top: var(--font-paragraph-spacing-heading-xl);
462
+ }
401
463
  .eds-heading--subtitle-1 {
402
464
  font-size: var(--font-size-heading-lg);
403
465
  line-height: var(--font-line-height-heading-lg);
404
466
  margin-bottom: var(--font-paragraph-spacing-heading-lg);
405
467
  }
468
+ .eds-heading--subtitle-1:not(:first-child) {
469
+ margin-top: var(--font-paragraph-spacing-heading-lg);
470
+ }
406
471
  .eds-heading--subtitle-2 {
407
472
  font-size: var(--font-size-heading-m);
408
473
  line-height: var(--font-line-height-heading-m);
409
474
  margin-bottom: var(--font-paragraph-spacing-heading-m);
410
475
  }
476
+ .eds-heading--subtitle-2:not(:first-child) {
477
+ margin-top: var(--font-paragraph-spacing-heading-m);
478
+ }
411
479
  .eds-heading--section-1 {
412
480
  font-size: var(--font-size-heading-s);
413
481
  line-height: var(--font-line-height-heading-s);
414
482
  margin-bottom: var(--font-paragraph-spacing-heading-s);
415
483
  }
484
+ .eds-heading--section-1:not(:first-child) {
485
+ margin-top: var(--font-paragraph-spacing-heading-s);
486
+ }
416
487
  .eds-heading--section-2 {
417
488
  font-size: var(--font-size-heading-s);
418
489
  line-height: var(--font-line-height-heading-s);
419
490
  margin-bottom: var(--font-paragraph-spacing-heading-xs);
420
491
  }
492
+ .eds-heading--section-2:not(:first-child) {
493
+ margin-top: var(--font-paragraph-spacing-heading-xs);
494
+ }
421
495
  .eds-heading--spacing-none {
422
496
  margin-top: 0;
423
497
  margin-bottom: 0;
package/dist/beta/styles/components/text.css CHANGED
@@ -420,40 +420,40 @@ summary {
420
420
 
421
421
  :root,
422
422
  [view-mode=standard] {
423
- /* Standard - number */
424
- --font-line-height-body-xs: var(--size-7);
425
- --font-line-height-body-s: var(--size-8);
426
- --font-line-height-body-lg: var(--size-9);
427
- --font-line-height-body-m: var(--size-9);
428
- --font-line-height-body-xl: var(--size-10);
429
- --font-line-height-heading-s: var(--size-7);
430
- --font-line-height-heading-xs: var(--size-7);
431
- --font-line-height-heading-m: var(--size-8);
432
- --font-line-height-heading-lg: var(--size-9);
433
- --font-line-height-heading-xl: var(--size-10);
434
- --font-line-height-heading-2xl: var(--size-11);
435
- --font-paragraph-spacing-body-xs: var(--size-4);
436
- --font-paragraph-spacing-body-s: var(--size-5);
437
- --font-paragraph-spacing-body-m: var(--size-7);
438
- --font-paragraph-spacing-body-lg: var(--size-8);
439
- --font-paragraph-spacing-body-xl: var(--size-8);
440
- --font-paragraph-spacing-heading-s: var(--size-4);
441
- --font-paragraph-spacing-heading-xs: var(--size-4);
442
- --font-paragraph-spacing-heading-lg: var(--size-5);
443
- --font-paragraph-spacing-heading-m: var(--size-5);
444
- --font-paragraph-spacing-heading-2xl: var(--size-7);
445
- --font-paragraph-spacing-heading-xl: var(--size-7);
446
- --font-size-body-xs: var(--size-5);
447
- --font-size-body-s: var(--size-6);
448
- --font-size-body-lg: var(--size-7);
449
- --font-size-body-m: var(--size-7);
450
- --font-size-body-xl: var(--size-8);
451
- --font-size-heading-xs: var(--size-5);
452
- --font-size-heading-s: var(--size-6);
453
- --font-size-heading-m: var(--size-7);
454
- --font-size-heading-lg: var(--size-8);
455
- --font-size-heading-xl: var(--size-9);
456
- --font-size-heading-2xl: var(--size-10);
423
+ /* number */
424
+ --font-line-height-body-xs: var(--size-8);
425
+ --font-line-height-body-s: var(--size-9);
426
+ --font-line-height-body-lg: var(--size-10);
427
+ --font-line-height-body-m: var(--size-10);
428
+ --font-line-height-body-xl: var(--size-11);
429
+ --font-line-height-heading-s: var(--size-8);
430
+ --font-line-height-heading-xs: var(--size-8);
431
+ --font-line-height-heading-m: var(--size-9);
432
+ --font-line-height-heading-lg: var(--size-10);
433
+ --font-line-height-heading-xl: var(--size-11);
434
+ --font-line-height-heading-2xl: var(--size-12);
435
+ --font-paragraph-spacing-body-xs: var(--size-5);
436
+ --font-paragraph-spacing-body-s: var(--size-6);
437
+ --font-paragraph-spacing-body-m: var(--size-8);
438
+ --font-paragraph-spacing-body-lg: var(--size-9);
439
+ --font-paragraph-spacing-body-xl: var(--size-9);
440
+ --font-paragraph-spacing-heading-s: var(--size-5);
441
+ --font-paragraph-spacing-heading-xs: var(--size-5);
442
+ --font-paragraph-spacing-heading-lg: var(--size-6);
443
+ --font-paragraph-spacing-heading-m: var(--size-6);
444
+ --font-paragraph-spacing-heading-2xl: var(--size-8);
445
+ --font-paragraph-spacing-heading-xl: var(--size-8);
446
+ --font-size-body-xs: var(--size-6);
447
+ --font-size-body-s: var(--size-7);
448
+ --font-size-body-lg: var(--size-8);
449
+ --font-size-body-m: var(--size-8);
450
+ --font-size-body-xl: var(--size-9);
451
+ --font-size-heading-xs: var(--size-6);
452
+ --font-size-heading-s: var(--size-7);
453
+ --font-size-heading-m: var(--size-8);
454
+ --font-size-heading-lg: var(--size-9);
455
+ --font-size-heading-xl: var(--size-10);
456
+ --font-size-heading-2xl: var(--size-11);
457
457
  /* string */
458
458
  --font-family-nationale: Nationale;
459
459
  --font-weight-body: 500;
@@ -463,39 +463,39 @@ summary {
463
463
  @media screen and (min-width: 50rem) {
464
464
  :root,
465
465
  [view-mode=standard] {
466
- --font-line-height-body-xs: var(--size-7);
467
- --font-line-height-body-s: var(--size-8);
468
- --font-line-height-body-m: var(--size-9);
469
- --font-line-height-body-lg: var(--size-10);
470
- --font-line-height-body-xl: var(--size-11);
471
- --font-line-height-heading-xs: var(--size-7);
472
- --font-line-height-heading-s: var(--size-8);
473
- --font-line-height-heading-m: var(--size-9);
474
- --font-line-height-heading-lg: var(--size-10);
475
- --font-line-height-heading-xl: var(--size-12);
476
- --font-line-height-heading-2xl: var(--size-14);
477
- --font-paragraph-spacing-body-xs: var(--size-4);
478
- --font-paragraph-spacing-body-s: var(--size-5);
479
- --font-paragraph-spacing-body-m: var(--size-7);
480
- --font-paragraph-spacing-body-lg: var(--size-9);
481
- --font-paragraph-spacing-body-xl: var(--size-9);
482
- --font-paragraph-spacing-heading-xs: var(--size-4);
483
- --font-paragraph-spacing-heading-m: var(--size-5);
484
- --font-paragraph-spacing-heading-s: var(--size-5);
485
- --font-paragraph-spacing-heading-lg: var(--size-7);
486
- --font-paragraph-spacing-heading-xl: var(--size-8);
487
- --font-paragraph-spacing-heading-2xl: var(--size-9);
488
- --font-size-body-xs: var(--size-5);
489
- --font-size-body-s: var(--size-6);
490
- --font-size-body-m: var(--size-7);
491
- --font-size-body-lg: var(--size-8);
492
- --font-size-body-xl: var(--size-9);
493
- --font-size-heading-xs: var(--size-6);
494
- --font-size-heading-s: var(--size-7);
495
- --font-size-heading-m: var(--size-8);
496
- --font-size-heading-lg: var(--size-9);
497
- --font-size-heading-xl: var(--size-11);
498
- --font-size-heading-2xl: var(--size-13);
466
+ --font-line-height-body-xs: var(--size-8);
467
+ --font-line-height-body-s: var(--size-9);
468
+ --font-line-height-body-m: var(--size-10);
469
+ --font-line-height-body-lg: var(--size-11);
470
+ --font-line-height-body-xl: var(--size-12);
471
+ --font-line-height-heading-xs: var(--size-8);
472
+ --font-line-height-heading-s: var(--size-9);
473
+ --font-line-height-heading-m: var(--size-10);
474
+ --font-line-height-heading-lg: var(--size-11);
475
+ --font-line-height-heading-xl: var(--size-13);
476
+ --font-line-height-heading-2xl: var(--size-15);
477
+ --font-paragraph-spacing-body-xs: var(--size-5);
478
+ --font-paragraph-spacing-body-s: var(--size-6);
479
+ --font-paragraph-spacing-body-m: var(--size-8);
480
+ --font-paragraph-spacing-body-lg: var(--size-10);
481
+ --font-paragraph-spacing-body-xl: var(--size-10);
482
+ --font-paragraph-spacing-heading-xs: var(--size-5);
483
+ --font-paragraph-spacing-heading-m: var(--size-6);
484
+ --font-paragraph-spacing-heading-s: var(--size-6);
485
+ --font-paragraph-spacing-heading-lg: var(--size-8);
486
+ --font-paragraph-spacing-heading-xl: var(--size-9);
487
+ --font-paragraph-spacing-heading-2xl: var(--size-10);
488
+ --font-size-body-xs: var(--size-6);
489
+ --font-size-body-s: var(--size-7);
490
+ --font-size-body-m: var(--size-8);
491
+ --font-size-body-lg: var(--size-9);
492
+ --font-size-body-xl: var(--size-10);
493
+ --font-size-heading-xs: var(--size-7);
494
+ --font-size-heading-s: var(--size-8);
495
+ --font-size-heading-m: var(--size-9);
496
+ --font-size-heading-lg: var(--size-10);
497
+ --font-size-heading-xl: var(--size-12);
498
+ --font-size-heading-2xl: var(--size-14);
499
499
  /* string */
500
500
  --font-family-nationale: Nationale;
501
501
  --font-weight-body: 500;
@@ -504,40 +504,40 @@ summary {
504
504
  }
505
505
 
506
506
  [view-mode=compact] {
507
- /* Compact - number */
508
- --font-line-height-body-xs: var(--size-7);
509
- --font-line-height-body-s: var(--size-8);
510
- --font-line-height-body-lg: var(--size-9);
511
- --font-line-height-body-m: var(--size-9);
512
- --font-line-height-body-xl: var(--size-10);
513
- --font-line-height-heading-s: var(--size-7);
514
- --font-line-height-heading-xs: var(--size-7);
515
- --font-line-height-heading-m: var(--size-8);
516
- --font-line-height-heading-lg: var(--size-9);
517
- --font-line-height-heading-xl: var(--size-10);
518
- --font-line-height-heading-2xl: var(--size-11);
519
- --font-paragraph-spacing-body-xs: var(--size-4);
520
- --font-paragraph-spacing-body-s: var(--size-5);
521
- --font-paragraph-spacing-body-m: var(--size-7);
522
- --font-paragraph-spacing-body-lg: var(--size-8);
523
- --font-paragraph-spacing-body-xl: var(--size-8);
524
- --font-paragraph-spacing-heading-s: var(--size-4);
525
- --font-paragraph-spacing-heading-xs: var(--size-4);
526
- --font-paragraph-spacing-heading-lg: var(--size-5);
527
- --font-paragraph-spacing-heading-m: var(--size-5);
528
- --font-paragraph-spacing-heading-2xl: var(--size-7);
529
- --font-paragraph-spacing-heading-xl: var(--size-7);
530
- --font-size-body-xs: var(--size-5);
531
- --font-size-body-s: var(--size-6);
532
- --font-size-body-lg: var(--size-7);
533
- --font-size-body-m: var(--size-7);
534
- --font-size-body-xl: var(--size-8);
535
- --font-size-heading-xs: var(--size-5);
536
- --font-size-heading-s: var(--size-6);
537
- --font-size-heading-m: var(--size-7);
538
- --font-size-heading-lg: var(--size-8);
539
- --font-size-heading-xl: var(--size-9);
540
- --font-size-heading-2xl: var(--size-10);
507
+ /* number */
508
+ --font-line-height-body-xs: var(--size-8);
509
+ --font-line-height-body-s: var(--size-9);
510
+ --font-line-height-body-lg: var(--size-10);
511
+ --font-line-height-body-m: var(--size-10);
512
+ --font-line-height-body-xl: var(--size-11);
513
+ --font-line-height-heading-s: var(--size-8);
514
+ --font-line-height-heading-xs: var(--size-8);
515
+ --font-line-height-heading-m: var(--size-9);
516
+ --font-line-height-heading-lg: var(--size-10);
517
+ --font-line-height-heading-xl: var(--size-11);
518
+ --font-line-height-heading-2xl: var(--size-12);
519
+ --font-paragraph-spacing-body-xs: var(--size-5);
520
+ --font-paragraph-spacing-body-s: var(--size-6);
521
+ --font-paragraph-spacing-body-m: var(--size-8);
522
+ --font-paragraph-spacing-body-lg: var(--size-9);
523
+ --font-paragraph-spacing-body-xl: var(--size-9);
524
+ --font-paragraph-spacing-heading-s: var(--size-5);
525
+ --font-paragraph-spacing-heading-xs: var(--size-5);
526
+ --font-paragraph-spacing-heading-lg: var(--size-6);
527
+ --font-paragraph-spacing-heading-m: var(--size-6);
528
+ --font-paragraph-spacing-heading-2xl: var(--size-8);
529
+ --font-paragraph-spacing-heading-xl: var(--size-8);
530
+ --font-size-body-xs: var(--size-6);
531
+ --font-size-body-s: var(--size-7);
532
+ --font-size-body-lg: var(--size-8);
533
+ --font-size-body-m: var(--size-8);
534
+ --font-size-body-xl: var(--size-9);
535
+ --font-size-heading-xs: var(--size-6);
536
+ --font-size-heading-s: var(--size-7);
537
+ --font-size-heading-m: var(--size-8);
538
+ --font-size-heading-lg: var(--size-9);
539
+ --font-size-heading-xl: var(--size-10);
540
+ --font-size-heading-2xl: var(--size-11);
541
541
  /* string */
542
542
  --font-family-nationale: Nationale;
543
543
  --font-weight-body: 500;
@@ -545,52 +545,111 @@ summary {
545
545
  }
546
546
 
547
547
  [view-mode=display] {
548
- /* Display - number */
549
- --font-line-height-body-xs: var(--size-10);
550
- --font-line-height-body-s: var(--size-11);
551
- --font-line-height-body-m: var(--size-14);
552
- --font-line-height-body-lg: var(--size-17);
553
- --font-line-height-body-xl: var(--size-18);
554
- --font-line-height-heading-xs: var(--size-10);
555
- --font-line-height-heading-s: var(--size-12);
556
- --font-line-height-heading-m: var(--size-14);
557
- --font-line-height-heading-lg: var(--size-17);
558
- --font-line-height-heading-xl: var(--size-19);
559
- --font-line-height-heading-2xl: var(--size-20);
560
- --font-paragraph-spacing-body-xs: var(--size-8);
561
- --font-paragraph-spacing-body-s: var(--size-9);
562
- --font-paragraph-spacing-body-m: var(--size-11);
563
- --font-paragraph-spacing-body-lg: var(--size-13);
564
- --font-paragraph-spacing-body-xl: var(--size-15);
565
- --font-paragraph-spacing-heading-xs: var(--size-5);
566
- --font-paragraph-spacing-heading-s: var(--size-7);
567
- --font-paragraph-spacing-heading-m: var(--size-8);
568
- --font-paragraph-spacing-heading-lg: var(--size-9);
569
- --font-paragraph-spacing-heading-xl: var(--size-11);
570
- --font-paragraph-spacing-heading-2xl: var(--size-12);
571
- --font-size-body-xs: var(--size-8);
572
- --font-size-body-s: var(--size-9);
573
- --font-size-body-m: var(--size-11);
574
- --font-size-body-lg: var(--size-13);
575
- --font-size-body-xl: var(--size-15);
576
- --font-size-heading-xs: var(--size-9);
577
- --font-size-heading-s: var(--size-11);
578
- --font-size-heading-m: var(--size-13);
579
- --font-size-heading-lg: var(--size-15);
580
- --font-size-heading-xl: var(--size-18);
581
- --font-size-heading-2xl: var(--size-19);
548
+ /* number */
549
+ --font-line-height-body-xs: var(--size-11);
550
+ --font-line-height-body-s: var(--size-12);
551
+ --font-line-height-body-m: var(--size-15);
552
+ --font-line-height-body-lg: var(--size-18);
553
+ --font-line-height-body-xl: var(--size-19);
554
+ --font-line-height-heading-xs: var(--size-11);
555
+ --font-line-height-heading-s: var(--size-13);
556
+ --font-line-height-heading-m: var(--size-15);
557
+ --font-line-height-heading-lg: var(--size-18);
558
+ --font-line-height-heading-xl: var(--size-20);
559
+ --font-line-height-heading-2xl: var(--size-21);
560
+ --font-paragraph-spacing-body-xs: var(--size-9);
561
+ --font-paragraph-spacing-body-s: var(--size-10);
562
+ --font-paragraph-spacing-body-m: var(--size-12);
563
+ --font-paragraph-spacing-body-lg: var(--size-14);
564
+ --font-paragraph-spacing-body-xl: var(--size-16);
565
+ --font-paragraph-spacing-heading-xs: var(--size-6);
566
+ --font-paragraph-spacing-heading-s: var(--size-8);
567
+ --font-paragraph-spacing-heading-m: var(--size-9);
568
+ --font-paragraph-spacing-heading-lg: var(--size-10);
569
+ --font-paragraph-spacing-heading-xl: var(--size-12);
570
+ --font-paragraph-spacing-heading-2xl: var(--size-13);
571
+ --font-size-body-xs: var(--size-9);
572
+ --font-size-body-s: var(--size-10);
573
+ --font-size-body-m: var(--size-12);
574
+ --font-size-body-lg: var(--size-14);
575
+ --font-size-body-xl: var(--size-16);
576
+ --font-size-heading-xs: var(--size-10);
577
+ --font-size-heading-s: var(--size-12);
578
+ --font-size-heading-m: var(--size-14);
579
+ --font-size-heading-lg: var(--size-16);
580
+ --font-size-heading-xl: var(--size-19);
581
+ --font-size-heading-2xl: var(--size-20);
582
582
  /* string */
583
583
  --font-family-nationale: Nationale;
584
584
  --font-weight-body: 500;
585
585
  --font-weight-heading: 600;
586
586
  }
587
587
 
588
+ /* DO NOT CHANGE!*/
589
+
590
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
591
+
592
+ [data-color-mode=light],
593
+ :root {
594
+ --components-typography-basetext-contrast-text-accent: #ffffff;
595
+ --components-typography-basetext-standard-text-accent: #181c56;
596
+ --components-typography-blockquote-contrast-stroke: #8284ab;
597
+ --components-typography-blockquote-contrast-text-accent: #ffffff;
598
+ --components-typography-blockquote-contrast-text-subdued: #d9dae8;
599
+ --components-typography-blockquote-standard-stroke: #8284ab;
600
+ --components-typography-blockquote-standard-text-accent: #181c56;
601
+ --components-typography-blockquote-standard-text-subdued: #626493;
602
+ --components-typography-codetext-contrast-border: rgba(255, 255, 255, 0);
603
+ --components-typography-codetext-contrast-border-interactive: #aeb7e2;
604
+ --components-typography-codetext-contrast-fill: #f6f6f9;
605
+ --components-typography-codetext-contrast-text: #181c56;
606
+ --components-typography-codetext-standard-border: rgba(84, 86, 140, 0.4);
607
+ --components-typography-codetext-standard-border-interactive: #181c56;
608
+ --components-typography-codetext-standard-fill: #f6f6f9;
609
+ --components-typography-codetext-standard-text: #181c56;
610
+ --components-typography-label-contrast-text-accent: #d9dae8;
611
+ --components-typography-label-standard-text-accent: #626493;
612
+ --components-typography-list-contrast-border: #aeb7e2;
613
+ --components-typography-list-contrast-text-accent: #ffffff;
614
+ --components-typography-list-standard-border: #aeb7e2;
615
+ --components-typography-list-standard-text-accent: #181c56;
616
+ }
617
+
618
+ [data-color-mode=dark] {
619
+ --components-typography-basetext-contrast-text-accent: #e5e5e9;
620
+ --components-typography-basetext-standard-text-accent: #e5e5e9;
621
+ --components-typography-blockquote-contrast-stroke: #81828f;
622
+ --components-typography-blockquote-contrast-text-accent: #e5e5e9;
623
+ --components-typography-blockquote-contrast-text-subdued: #b3b4bd;
624
+ --components-typography-blockquote-standard-stroke: #81828f;
625
+ --components-typography-blockquote-standard-text-accent: #e5e5e9;
626
+ --components-typography-blockquote-standard-text-subdued: #b3b4bd;
627
+ --components-typography-codetext-contrast-border: rgba(255, 255, 255, 0);
628
+ --components-typography-codetext-contrast-border-interactive: #e5e5e9;
629
+ --components-typography-codetext-contrast-fill: #393a49;
630
+ --components-typography-codetext-contrast-text: #e5e5e9;
631
+ --components-typography-codetext-standard-border: rgba(255, 255, 255, 0);
632
+ --components-typography-codetext-standard-border-interactive: #e5e5e9;
633
+ --components-typography-codetext-standard-fill: #393a49;
634
+ --components-typography-codetext-standard-text: #e5e5e9;
635
+ --components-typography-label-contrast-text-accent: #e5e5e9;
636
+ --components-typography-label-standard-text-accent: #e5e5e9;
637
+ --components-typography-list-contrast-border: #aeb7e2;
638
+ --components-typography-list-contrast-text-accent: #e5e5e9;
639
+ --components-typography-list-standard-border: #aeb7e2;
640
+ --components-typography-list-standard-text-accent: #e5e5e9;
641
+ }
642
+
588
643
  .eds-text {
589
- color: var(--primary-text-color);
644
+ color: var(--components-typography-basetext-standard-text-accent);
590
645
  font-weight: var(--font-weight-body);
591
646
  margin: 0;
592
647
  }
593
648
 
649
+ .eds-contrast .eds-text {
650
+ color: var(--components-typography-basetext-contrast-text-accent);
651
+ }
652
+
594
653
  .eds-text--xs {
595
654
  font-size: var(--font-size-body-xs);
596
655
  line-height: var(--font-line-height-body-xs);
@@ -677,7 +736,7 @@ summary {
677
736
  margin-bottom: var(--font-line-height-body-m);
678
737
  }
679
738
 
680
- .eds-text--sub-paragraph {
739
+ .eds-text--subparagraph {
681
740
  font-size: var(--font-size-body-s);
682
741
  line-height: var(--font-line-height-body-s);
683
742
  margin-bottom: var(--font-line-height-body-s);
@@ -691,7 +750,7 @@ summary {
691
750
 
692
751
  .eds-text--label {
693
752
  font-size: var(--font-size-body-m);
694
- line-height: var(--font-line-height-body-m);
753
+ line-height: var(--font-line-height-heading-xs);
695
754
  margin-bottom: var(--font-paragraph-spacing-body-xs);
696
755
  font-weight: 600;
697
756
  }
@@ -726,6 +785,12 @@ summary {
726
785
  font-size: 0.875rem;
727
786
  }
728
787
 
788
+ .eds-contrast .eds-text--code-text, .eds-contrast .eds-text--preformatted-text {
789
+ background-color: var(--components-typography-codetext-contrast-fill);
790
+ border: 0.0625rem solid var(--components-typography-codetext-contrast-border);
791
+ color: var(--components-typography-codetext-contrast-text);
792
+ }
793
+
729
794
  .eds-text--preformatted-text {
730
795
  padding: 1rem;
731
796
  white-space: pre-wrap;
@@ -852,19 +917,27 @@ summary {
852
917
  }
853
918
 
854
919
  .eds-text--link {
855
- color: var(--primary-text-color);
920
+ color: var(--components-typography-basetext-standard-text-accent);
921
+ }
922
+
923
+ .eds-contrast .eds-text--link {
924
+ color: var(--components-typography-basetext-contrast-text-accent);
856
925
  }
857
926
 
858
927
  .eds-text--link, .eds-text--link:link, .eds-text--link:visited {
859
928
  font-size: inherit;
860
929
  text-decoration: none;
861
930
  position: relative;
862
- background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
931
+ background-image: linear-gradient(120deg, var(--components-typography-basetext-standard-text-accent) 0%, var(--components-typography-basetext-standard-text-accent) 100%);
863
932
  background-repeat: no-repeat;
864
933
  background-size: 100% 0.125rem;
865
934
  background-position: 0 100%;
866
935
  }
867
936
 
937
+ .eds-contrast .eds-text--link, .eds-contrast .eds-text--link:link, .eds-contrast .eds-text--link:visited {
938
+ background-image: linear-gradient(120deg, var(--components-typography-basetext-contrast-text-accent) 0%, var(--components-typography-basetext-contrast-text-accent) 100%);
939
+ }
940
+
868
941
  .eds-text--link:hover {
869
942
  animation: eds-link-underline 0.3s ease-in;
870
943
  cursor: pointer;
@@ -913,6 +986,11 @@ p .eds-text--link--ext-icon {
913
986
  font-size: var(--font-size-body-lg);
914
987
  line-height: var(--font-line-height-body-lg);
915
988
  margin-bottom: var(--font-line-height-body-lg);
989
+ color: var(--components-typography-blockquote-standard-text-accent);
990
+ }
991
+
992
+ .eds-contrast .eds-text--blockquote {
993
+ color: var(--components-typography-blockquote-contrast-text-accent);
916
994
  }
917
995
 
918
996
  .eds-text--blockquote__footer {
@@ -921,11 +999,21 @@ p .eds-text--link--ext-icon {
921
999
  letter-spacing: 1px;
922
1000
  margin-top: 1.5rem;
923
1001
  text-transform: uppercase;
1002
+ color: var(--components-typography-blockquote-standard-text-accent);
1003
+ }
1004
+
1005
+ .eds-contrast .eds-text--blockquote__footer {
1006
+ color: var(--components-typography-blockquote-contrast-text-accent);
924
1007
  }
925
1008
 
926
1009
  .eds-text--unordered-list {
927
1010
  list-style: none;
928
1011
  margin-bottom: var(--font-line-height-body-lg);
1012
+ color: var(--components-typography-list-standard-text-accent);
1013
+ }
1014
+
1015
+ .eds-contrast .eds-text--unordered-list {
1016
+ color: var(--components-typography-list-contrast-text-accent);
929
1017
  }
930
1018
 
931
1019
  .eds-text--unordered-list .eds-text--list-item::before {
@@ -943,6 +1031,11 @@ p .eds-text--link--ext-icon {
943
1031
  counter-reset: eds-numbered-list-counter;
944
1032
  list-style: none;
945
1033
  margin-bottom: var(--font-line-height-body-lg);
1034
+ color: var(--components-typography-list-standard-text-accent);
1035
+ }
1036
+
1037
+ .eds-contrast .eds-text--numbered-list {
1038
+ color: var(--components-typography-list-contrast-text-accent);
946
1039
  }
947
1040
 
948
1041
  .eds-text--numbered-list--type-a > .eds-text--list-item::before {
@@ -973,6 +1066,11 @@ p .eds-text--link--ext-icon {
973
1066
  counter-increment: eds-numbered-list-counter;
974
1067
  margin-bottom: var(--font-paragraph-spacing-body-m);
975
1068
  position: relative;
1069
+ color: var(--components-typography-list-standard-text-accent);
1070
+ }
1071
+
1072
+ .eds-contrast .eds-text--numbered-list > .eds-text--list-item {
1073
+ color: var(--components-typography-list-contrast-text-accent);
976
1074
  }
977
1075
 
978
1076
  .eds-text--numbered-list > .eds-text--list-item::before {
@@ -990,6 +1088,10 @@ p .eds-text--link--ext-icon {
990
1088
  top: -0.25rem;
991
1089
  }
992
1090
 
1091
+ .eds-contrast .eds-text--numbered-list > .eds-text--list-item::before {
1092
+ border: 0.125rem solid var(--components-typography-list-contrast-border);
1093
+ }
1094
+
993
1095
  .eds-text--list-item__title {
994
1096
  display: block;
995
1097
  font-weight: var(--font-weight-heading);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/typography",
3
- "version": "2.0.2-beta.0",
3
+ "version": "2.0.3",
4
4
  "license": "SEE LICENSE IN README.md",
5
5
  "main": "./dist/typography.cjs.js",
6
6
  "module": "./dist/typography.esm.js",
@@ -52,7 +52,7 @@
52
52
  "build:beta": "vite build --config vite.config.beta.ts",
53
53
  "test": "jest",
54
54
  "lint": "eslint src",
55
- "start": "vite build --config vite.config.main.ts --watch",
55
+ "start": "vite build --watch",
56
56
  "start:beta": "vite build --config vite.config.beta.ts --watch",
57
57
  "migrate": "./scripts/migrate-typography.mjs"
58
58
  },
@@ -61,7 +61,7 @@
61
61
  "react-dom": ">=16.8.0"
62
62
  },
63
63
  "dependencies": {
64
- "@entur/icons": "^8.1.0",
64
+ "@entur/icons": "^8.2.0",
65
65
  "@entur/tokens": "^3.20.0",
66
66
  "@entur/utils": "^0.12.5",
67
67
  "classnames": "^2.5.1",
@@ -83,5 +83,5 @@
83
83
  "vite": "^7.1.3",
84
84
  "vite-plugin-dts": "^4.5.4"
85
85
  },
86
- "gitHead": "4b9f4e324e6efef2fd56407909a5da32bcdf7662"
86
+ "gitHead": "ace4c7d9d1ccb05c66a12669e1c702907840e099"
87
87
  }