@entur/typography 1.8.24 → 1.8.26

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/styles.css +360 -53
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -1,5 +1,325 @@
1
+ @import "~@entur/tokens/dist/semantic.css";
2
+ @import "~@entur/tokens/dist/primitive.css";
1
3
  /* DO NOT CHANGE!*/
2
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
+ /* DO NOT CHANGE!*/
6
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
+ [data-color-mode=light],
8
+ :root {
9
+ --basecolors-frame-contrast: var(--fill-background-contrast-light);
10
+ --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
11
+ --basecolors-frame-default: var(--fill-background-standard-light);
12
+ --basecolors-frame-elevated: var(--fill-background-standard-light);
13
+ --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
14
+ --basecolors-frame-subdued: var(--fill-background-subdued-light);
15
+ --basecolors-frame-tint: var(--fill-background-tint-light);
16
+ --basecolors-shape-accent: var(--shape-accent);
17
+ --basecolors-shape-bicycle-contrast: var(--contrast-bicycle);
18
+ --basecolors-shape-bicycle-default: var(--standard-bicycle);
19
+ --basecolors-shape-bus-contrast: var(--contrast-bus);
20
+ --basecolors-shape-bus-default: var(--standard-bus);
21
+ --basecolors-shape-cableway-contrast: var(--contrast-cableway);
22
+ --basecolors-shape-cableway-default: var(--standard-cableway);
23
+ --basecolors-shape-disabled: var(--shape-neutral);
24
+ --basecolors-shape-disabledalt: var(--shape-neutralalt);
25
+ --basecolors-shape-ferry-contrast: var(--contrast-ferry);
26
+ --basecolors-shape-ferry-default: var(--standard-ferry);
27
+ --basecolors-shape-funicular-contrast: var(--contrast-funicular);
28
+ --basecolors-shape-funicular-default: var(--standard-funicular);
29
+ --basecolors-shape-helicopter-contrast: var(--contrast-helicopter);
30
+ --basecolors-shape-helicopter-default: var(--standard-helicopter);
31
+ --basecolors-shape-highlight: var(--stroke-highlight);
32
+ --basecolors-shape-light: var(--shape-light);
33
+ --basecolors-shape-mask: var(--shape-light);
34
+ --basecolors-shape-maskalt: var(--shape-light);
35
+ --basecolors-shape-metro-contrast: var(--contrast-metro);
36
+ --basecolors-shape-metro-default: var(--standard-metro);
37
+ --basecolors-shape-mobility-contrast: var(--contrast-mobility);
38
+ --basecolors-shape-mobility-default: var(--standard-mobility);
39
+ --basecolors-shape-plane-contrast: var(--contrast-plane);
40
+ --basecolors-shape-plane-default: var(--standard-plane);
41
+ --basecolors-shape-subdued: var(--shape-subdued);
42
+ --basecolors-shape-subduedalt: var(--shape-subduedalt);
43
+ --basecolors-shape-taxi-contrast: var(--contrast-taxi);
44
+ --basecolors-shape-taxi-default: var(--standard-taxi);
45
+ --basecolors-shape-train-contrast: var(--contrast-train);
46
+ --basecolors-shape-train-default: var(--standard-train);
47
+ --basecolors-shape-tram-contrast: var(--contrast-tram);
48
+ --basecolors-shape-tram-default: var(--standard-tram);
49
+ --basecolors-shape-walk-contrast: var(--contrast-walk);
50
+ --basecolors-shape-walk-default: var(--standard-walk);
51
+ --basecolors-shape-airportlinkbus-contrast: var(--contrast-airportlinkbus);
52
+ --basecolors-shape-airportlinkbus-default: var(--standard-airportlinkbus);
53
+ --basecolors-shape-airportlinkrail-contrast: var(--contrast-airportlinkrail);
54
+ --basecolors-shape-airportlinkrail-default: var(--standard-airportlinkrail);
55
+ --basecolors-stroke-contrast: var(--stroke-contrast);
56
+ --basecolors-stroke-default: var(--stroke-accent);
57
+ --basecolors-stroke-disabled: var(--stroke-neutralalt);
58
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
59
+ --basecolors-stroke-focus-standard: var(--stroke-accent);
60
+ --basecolors-stroke-highlight: var(--stroke-highlight);
61
+ --basecolors-stroke-light: var(--stroke-light);
62
+ --basecolors-stroke-subdued: var(--stroke-subdued);
63
+ --basecolors-stroke-subduedalt: var(--stroke-neutral);
64
+ --basecolors-text-accent: var(--text-accent);
65
+ --basecolors-text-disabled: var(--text-neutral);
66
+ --basecolors-text-disabledalt: var(--text-neutralalt);
67
+ --basecolors-text-highlight: var(--stroke-highlight);
68
+ --basecolors-text-light: var(--text-light);
69
+ --basecolors-text-subdued: var(--text-subdued);
70
+ --basecolors-text-subduedalt: var(--text-subduedalt);
71
+ }
72
+
73
+ [data-color-mode=dark] {
74
+ --basecolors-frame-contrast: var(--fill-background-contrast-dark);
75
+ --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
76
+ --basecolors-frame-default: var(--fill-background-standard-dark);
77
+ --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
78
+ --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
79
+ --basecolors-frame-subdued: var(--fill-background-subdued-dark);
80
+ --basecolors-frame-tint: var(--fill-background-tint-dark);
81
+ --basecolors-shape-accent: var(--shape-lightalt);
82
+ --basecolors-shape-bicycle-contrast: var(--dark-bicycle);
83
+ --basecolors-shape-bicycle-default: var(--dark-bicycle);
84
+ --basecolors-shape-bus-contrast: var(--dark-bus);
85
+ --basecolors-shape-bus-default: var(--dark-bus);
86
+ --basecolors-shape-cableway-contrast: var(--dark-cableway);
87
+ --basecolors-shape-cableway-default: var(--dark-cableway);
88
+ --basecolors-shape-disabled: var(--shape-neutralalt);
89
+ --basecolors-shape-disabledalt: var(--shape-darkalt);
90
+ --basecolors-shape-ferry-contrast: var(--dark-ferry);
91
+ --basecolors-shape-ferry-default: var(--dark-ferry);
92
+ --basecolors-shape-funicular-contrast: var(--dark-funicular);
93
+ --basecolors-shape-funicular-default: var(--dark-funicular);
94
+ --basecolors-shape-helicopter-contrast: var(--dark-helicopter);
95
+ --basecolors-shape-helicopter-default: var(--dark-helicopter);
96
+ --basecolors-shape-highlight: var(--stroke-highlightalt);
97
+ --basecolors-shape-light: var(--shape-lightalt);
98
+ --basecolors-shape-mask: var(--fill-background-subdued-dark);
99
+ --basecolors-shape-maskalt: var(--fill-background-overlay-solid);
100
+ --basecolors-shape-metro-contrast: var(--dark-metro);
101
+ --basecolors-shape-metro-default: var(--dark-metro);
102
+ --basecolors-shape-mobility-contrast: var(--dark-mobility);
103
+ --basecolors-shape-mobility-default: var(--dark-mobility);
104
+ --basecolors-shape-plane-contrast: var(--dark-plane);
105
+ --basecolors-shape-plane-default: var(--dark-plane);
106
+ --basecolors-shape-subdued: var(--shape-darkalt);
107
+ --basecolors-shape-subduedalt: var(--shape-darkalt);
108
+ --basecolors-shape-taxi-contrast: var(--dark-taxi);
109
+ --basecolors-shape-taxi-default: var(--dark-taxi);
110
+ --basecolors-shape-train-contrast: var(--dark-train);
111
+ --basecolors-shape-train-default: var(--dark-train);
112
+ --basecolors-shape-tram-contrast: var(--dark-tram);
113
+ --basecolors-shape-tram-default: var(--dark-tram);
114
+ --basecolors-shape-walk-contrast: var(--dark-walk);
115
+ --basecolors-shape-walk-default: var(--dark-walk);
116
+ --basecolors-shape-airportlinkbus-contrast: var(--dark-airportlinkbus);
117
+ --basecolors-shape-airportlinkbus-default: var(--dark-airportlinkbus);
118
+ --basecolors-shape-airportlinkrail-contrast: var(--dark-airportlinkrail);
119
+ --basecolors-shape-airportlinkrail-default: var(--dark-airportlinkrail);
120
+ --basecolors-stroke-contrast: var(--stroke-contrast);
121
+ --basecolors-stroke-default: var(--stroke-dark);
122
+ --basecolors-stroke-disabled: var(--stroke-neutral);
123
+ --basecolors-stroke-focus-contrast: var(--stroke-contrast);
124
+ --basecolors-stroke-focus-standard: var(--stroke-contrast);
125
+ --basecolors-stroke-highlight: var(--stroke-highlightalt);
126
+ --basecolors-stroke-light: var(--stroke-dark);
127
+ --basecolors-stroke-subdued: var(--stroke-darkalt);
128
+ --basecolors-stroke-subduedalt: var(--stroke-darkalt);
129
+ --basecolors-text-accent: var(--text-lightalt);
130
+ --basecolors-text-disabled: var(--text-neutralalt);
131
+ --basecolors-text-disabledalt: var(--text-neutralalt);
132
+ --basecolors-text-highlight: var(--stroke-highlightalt);
133
+ --basecolors-text-light: var(--text-lightalt);
134
+ --basecolors-text-subdued: var(--text-darkalt);
135
+ --basecolors-text-subduedalt: var(--text-darkalt);
136
+ }
137
+
138
+ /* DO NOT CHANGE!*/
139
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
140
+ :root {
141
+ --fill-background-contrast-dark: var(--ebony-90);
142
+ --fill-background-contrast-light: var(--lavender-90);
143
+ --fill-background-contrast-lightalt: var(--blue-90);
144
+ --fill-background-contrast-lightalt-2: var(--blue-100);
145
+ --fill-background-overlay-solid: var(--ebony-80);
146
+ --fill-background-overlay-solidalt: var(--ebony-75);
147
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
148
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
149
+ --fill-background-standard-colorless: var(--white-alpha-0);
150
+ --fill-background-standard-dark: var(--ebony-100);
151
+ --fill-background-standard-light: var(--white-alpha-100);
152
+ --fill-background-subdued-dark: var(--ebony-85);
153
+ --fill-background-subdued-light: var(--blue-30);
154
+ --fill-background-tint-dark: var(--ebony-95);
155
+ --fill-background-tint-light: var(--blue-10);
156
+ --fill-background-tint-neutral: var(--grey-10);
157
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
158
+ --fill-boolean-false-contrast: var(--blue-50);
159
+ --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
160
+ --fill-boolean-false-light: var(--grey-60);
161
+ --fill-boolean-true-contrast: var(--mint-40);
162
+ --fill-boolean-true-dark: var(--mint-40);
163
+ --fill-boolean-true-light: var(--mint-60);
164
+ --fill-disabled-light: var(--grey-40);
165
+ --fill-disabled-transparent: var(--transparent-neutral-alpha15);
166
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
167
+ --fill-information-contrast: var(--sky-30);
168
+ --fill-information-deep: var(--sky-50);
169
+ --fill-information-muted: var(--sky-10);
170
+ --fill-information-tint: var(--sky-20);
171
+ --fill-negative-contrast: var(--coral-40);
172
+ --fill-negative-dark: var(--coral-90);
173
+ --fill-negative-deep: var(--coral-60);
174
+ --fill-negative-muted: var(--coral-20);
175
+ --fill-negative-tint: var(--coral-30);
176
+ --fill-negative-transparent: var(--transparent-coral-alpha20);
177
+ --fill-primary-active-contrast: var(--lavender-50);
178
+ --fill-primary-active-light: var(--lavender-100);
179
+ --fill-primary-default-contrast: var(--lavender-40);
180
+ --fill-primary-default-light: var(--lavender-90);
181
+ --fill-primary-hover-contrast: var(--lavender-30);
182
+ --fill-primary-hover-light: var(--blue-90);
183
+ --fill-secondary-active-contrast: var(--lavender-50);
184
+ --fill-secondary-active-light: var(--lavender-40);
185
+ --fill-secondary-default-colorless: var(--white-alpha-0);
186
+ --fill-secondary-hover-contrast: var(--blue-70);
187
+ --fill-secondary-hover-light: var(--lavender-20);
188
+ --fill-selected-default-contrast: var(--blue-90);
189
+ --fill-selected-default-dark: var(--ebony-10);
190
+ --fill-selected-default-darkalt: var(--ebony-50);
191
+ --fill-selected-default-light: var(--blue-10);
192
+ --fill-selected-default-neutral: var(--grey-30);
193
+ --fill-selected-hover-contrast: var(--blue-80);
194
+ --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
195
+ --fill-selected-hover-light: var(--blue-20);
196
+ --fill-selected-hover-neutral: var(--grey-20);
197
+ --fill-success-contrast: var(--mint-40);
198
+ --fill-success-deep: var(--mint-60);
199
+ --fill-success-muted: var(--mint-20);
200
+ --fill-success-subdued: var(--mint-50);
201
+ --fill-success-tint: var(--mint-30);
202
+ --fill-warning-contrast: var(--canary-40);
203
+ --fill-warning-deep: var(--canary-60);
204
+ --fill-warning-muted: var(--canary-20);
205
+ --fill-warning-tint: var(--canary-30);
206
+ --shape-accent: var(--lavender-90);
207
+ --shape-contrast: var(--lavender-40);
208
+ --shape-dark: var(--ebony-100);
209
+ --shape-darkalt: var(--ebony-30);
210
+ --shape-disabled: var(--grey-80);
211
+ --shape-highlight: var(--coral-40);
212
+ --shape-highlightalt: var(--coral-30);
213
+ --shape-inactive: var(--blue-40);
214
+ --shape-information: var(--sky-50);
215
+ --shape-informationalt: var(--sky-30);
216
+ --shape-light: var(--white-alpha-100);
217
+ --shape-lightalt: var(--ebony-10);
218
+ --shape-negative: var(--coral-60);
219
+ --shape-negativealt: var(--coral-30);
220
+ --shape-neutral: var(--grey-70);
221
+ --shape-neutralalt: var(--grey-50);
222
+ --shape-neutralalt2: var(--grey-60);
223
+ --shape-subdued: var(--blue-70);
224
+ --shape-subduedalt: var(--blue-30);
225
+ --shape-success: var(--mint-60);
226
+ --shape-successalt: var(--mint-40);
227
+ --shape-warning: var(--canary-60);
228
+ --shape-warningalt: var(--canary-40);
229
+ --stroke-accent: var(--lavender-90);
230
+ --stroke-colorless: var(--white-alpha-0);
231
+ --stroke-contrast: var(--lavender-40);
232
+ --stroke-contrastalt: var(--blue-80);
233
+ --stroke-dark: var(--ebony-30);
234
+ --stroke-darkalt: var(--ebony-50);
235
+ --stroke-darkalt-2: var(--ebony-100);
236
+ --stroke-highlight: var(--coral-40);
237
+ --stroke-highlightalt: var(--coral-30);
238
+ --stroke-information: var(--sky-50);
239
+ --stroke-light: var(--white-alpha-100);
240
+ --stroke-lightalt: var(--ebony-10);
241
+ --stroke-negative: var(--coral-60);
242
+ --stroke-negativealt: var(--coral-30);
243
+ --stroke-neutral: var(--grey-30);
244
+ --stroke-neutralalt: var(--grey-60);
245
+ --stroke-subdued: var(--blue-60);
246
+ --stroke-success: var(--mint-60);
247
+ --stroke-successalt: var(--mint-40);
248
+ --stroke-transparent: var(--transparent-blue-alpha40);
249
+ --stroke-transparentalt: var(--transparent-lavender-alpha70);
250
+ --stroke-warning: var(--canary-70);
251
+ --text-accent: var(--lavender-90);
252
+ --text-dark: var(--ebony-100);
253
+ --text-darkalt: var(--ebony-30);
254
+ --text-disabled: var(--grey-80);
255
+ --text-highlight: var(--lavender-40);
256
+ --text-highlightalt: var(--peach-40);
257
+ --text-light: var(--white-alpha-100);
258
+ --text-lightalt: var(--ebony-10);
259
+ --text-negative: var(--coral-60);
260
+ --text-negativealt: var(--coral-30);
261
+ --text-neutral: var(--grey-70);
262
+ --text-neutralalt: var(--grey-50);
263
+ --text-neutralalt2: var(--grey-60);
264
+ --text-subdued: var(--blue-70);
265
+ --text-subduedalt: var(--blue-30);
266
+ --text-success: var(--mint-60);
267
+ --text-successalt: var(--mint-40);
268
+ }
269
+
270
+ /* DO NOT CHANGE!*/
271
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
272
+ [data-color-mode=light],
273
+ :root {
274
+ --components-typography-basetext-contrast-text-accent: var(--text-light);
275
+ --components-typography-basetext-standard-text-accent: var(--text-accent);
276
+ --components-typography-blockquote-contrast-stroke: var(--stroke-subdued);
277
+ --components-typography-blockquote-contrast-text-accent: var(--text-light);
278
+ --components-typography-blockquote-contrast-text-subdued: var(--text-subduedalt);
279
+ --components-typography-blockquote-standard-stroke: var(--stroke-subdued);
280
+ --components-typography-blockquote-standard-text-accent: var(--text-accent);
281
+ --components-typography-blockquote-standard-text-subdued: var(--text-subdued);
282
+ --components-typography-codetext-contrast-border: var(--stroke-colorless);
283
+ --components-typography-codetext-contrast-border-interactive: var(--stroke-contrast);
284
+ --components-typography-codetext-contrast-fill: var(--fill-background-tint-light);
285
+ --components-typography-codetext-contrast-text: var(--text-accent);
286
+ --components-typography-codetext-standard-border: var(--stroke-transparent);
287
+ --components-typography-codetext-standard-border-interactive: var(--stroke-accent);
288
+ --components-typography-codetext-standard-fill: var(--fill-background-tint-light);
289
+ --components-typography-codetext-standard-text: var(--text-accent);
290
+ --components-typography-label-contrast-text-accent: var(--text-subduedalt);
291
+ --components-typography-label-standard-text-accent: var(--text-subdued);
292
+ --components-typography-list-contrast-border: var(--stroke-contrast);
293
+ --components-typography-list-contrast-text-accent: var(--text-light);
294
+ --components-typography-list-standard-border: var(--stroke-contrast);
295
+ --components-typography-list-standard-text-accent: var(--text-accent);
296
+ }
297
+
298
+ [data-color-mode=dark] {
299
+ --components-typography-basetext-contrast-text-accent: var(--text-lightalt);
300
+ --components-typography-basetext-standard-text-accent: var(--text-lightalt);
301
+ --components-typography-blockquote-contrast-stroke: var(--stroke-darkalt);
302
+ --components-typography-blockquote-contrast-text-accent: var(--text-lightalt);
303
+ --components-typography-blockquote-contrast-text-subdued: var(--text-darkalt);
304
+ --components-typography-blockquote-standard-stroke: var(--stroke-darkalt);
305
+ --components-typography-blockquote-standard-text-accent: var(--text-lightalt);
306
+ --components-typography-blockquote-standard-text-subdued: var(--text-darkalt);
307
+ --components-typography-codetext-contrast-border: var(--stroke-colorless);
308
+ --components-typography-codetext-contrast-border-interactive: var(--stroke-lightalt);
309
+ --components-typography-codetext-contrast-fill: var(--fill-background-overlay-solid);
310
+ --components-typography-codetext-contrast-text: var(--text-lightalt);
311
+ --components-typography-codetext-standard-border: var(--stroke-colorless);
312
+ --components-typography-codetext-standard-border-interactive: var(--stroke-lightalt);
313
+ --components-typography-codetext-standard-fill: var(--fill-background-overlay-solid);
314
+ --components-typography-codetext-standard-text: var(--text-lightalt);
315
+ --components-typography-label-contrast-text-accent: var(--text-lightalt);
316
+ --components-typography-label-standard-text-accent: var(--text-lightalt);
317
+ --components-typography-list-contrast-border: var(--stroke-contrast);
318
+ --components-typography-list-contrast-text-accent: var(--text-lightalt);
319
+ --components-typography-list-standard-border: var(--stroke-contrast);
320
+ --components-typography-list-standard-text-accent: var(--text-lightalt);
321
+ }
322
+
3
323
  @font-face {
4
324
  font-family: "Nationale";
5
325
  src: url("./fonts/Entur-Nationale-Light.eot");
@@ -64,31 +384,36 @@
64
384
  font-style: italic;
65
385
  font-display: swap;
66
386
  }
387
+ [data-color-mode=light],
388
+ [data-color-mode=dark],
67
389
  :root {
68
390
  --eds-typography: 1;
69
- --primary-background-color: #ffffff;
70
- --primary-text-color: #181c56;
71
- --primary-label-color: #656782;
72
- --eds-font-family: "Nationale", Arial, "Gotham Rounded", -apple-system,
73
- BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
391
+ --primary-background-color: var(--basecolors-frame-default);
392
+ --primary-text-color: var(--components-typography-basetext-standard-text-accent);
393
+ --primary-label-color: var(--components-typography-label-standard-text-accent);
394
+ --eds-font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
74
395
  "Helvetica Neue", sans-serif;
75
- }
76
- html {
77
- background-color: #ffffff;
78
- background-color: var(--primary-background-color);
79
396
  box-sizing: border-box;
80
- color: #181c56;
81
397
  color: var(--primary-text-color);
82
- font-family: "Nationale", Arial, "Gotham Rounded", -apple-system,
83
- BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
84
- "Helvetica Neue", sans-serif;
85
- font-family: var(--eds-font-family);
398
+ background-color: var(--primary-background-color);
399
+ font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
86
400
  font-weight: 500;
87
401
  font-size: 1rem;
88
402
  line-height: 1.375rem;
89
403
  }
404
+ [data-color-mode=light] .eds-contrast,
405
+ [data-color-mode=dark] .eds-contrast,
406
+ :root .eds-contrast {
407
+ --primary-background-color: var(--basecolors-frame-contrast);
408
+ --primary-text-color: var(--components-typography-basetext-contrast-text-accent);
409
+ --primary-label-color: var(--components-typography-label-contrast-text-accent);
410
+ color: var(--primary-text-color);
411
+ background-color: var(--primary-background-color);
412
+ }
90
413
  @media screen and (min-width: 50rem) {
91
- html {
414
+ [data-color-mode=light],
415
+ [data-color-mode=dark],
416
+ :root {
92
417
  font-size: 1rem;
93
418
  line-height: 1.5rem;
94
419
  }
@@ -107,8 +432,6 @@ html {
107
432
  .eds-h4,
108
433
  .eds-h5,
109
434
  .eds-h6 {
110
- color: inherit;
111
- color: #181c56;
112
435
  color: var(--primary-text-color);
113
436
  font-weight: 600;
114
437
  -webkit-font-smoothing: antialiased;
@@ -187,8 +510,6 @@ html {
187
510
  }
188
511
 
189
512
  .eds-paragraph {
190
- color: inherit;
191
- color: #181c56;
192
513
  color: var(--primary-text-color);
193
514
  font-size: 1rem;
194
515
  line-height: 1.5rem;
@@ -202,8 +523,6 @@ html {
202
523
  }
203
524
 
204
525
  .eds-lead-paragraph {
205
- color: inherit;
206
- color: #181c56;
207
526
  color: var(--primary-text-color);
208
527
  font-size: 1.25rem;
209
528
  line-height: 1.875rem;
@@ -217,8 +536,6 @@ html {
217
536
  }
218
537
 
219
538
  .eds-sub-paragraph {
220
- color: inherit;
221
- color: #181c56;
222
539
  color: var(--primary-text-color);
223
540
  font-size: 0.875rem;
224
541
  line-height: 1.25rem;
@@ -230,8 +547,6 @@ html {
230
547
  }
231
548
 
232
549
  .eds-small-text {
233
- color: inherit;
234
- color: #181c56;
235
550
  color: var(--primary-text-color);
236
551
  font-size: 0.625rem;
237
552
  line-height: 1rem;
@@ -243,14 +558,14 @@ html {
243
558
  }
244
559
  }
245
560
 
246
- .eds-link, .eds-link:link, .eds-link:visited {
247
- color: inherit;
248
- color: #181c56;
561
+ .eds-link {
249
562
  color: var(--primary-text-color);
563
+ }
564
+ .eds-link, .eds-link:link, .eds-link:visited {
250
565
  font-size: inherit;
251
566
  text-decoration: none;
252
567
  position: relative;
253
- background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
568
+ background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
254
569
  background-repeat: no-repeat;
255
570
  background-size: 100% 0.125rem;
256
571
  background-position: 0 100%;
@@ -259,9 +574,6 @@ html {
259
574
  animation: eds-link-underline 0.3s ease-in;
260
575
  cursor: pointer;
261
576
  }
262
- .eds-contrast .eds-link {
263
- background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
264
- }
265
577
  @keyframes eds-link-underline {
266
578
  from {
267
579
  background-size: 0% 0.125rem;
@@ -271,12 +583,12 @@ html {
271
583
  }
272
584
  }
273
585
  .eds-link:focus {
586
+ outline: 2px solid #181c56;
587
+ outline-color: var(--basecolors-stroke-focus-standard);
274
588
  outline-offset: 0.125rem;
275
- outline: none;
276
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
277
589
  }
278
590
  .eds-contrast .eds-link:focus {
279
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
591
+ outline-color: var(--basecolors-stroke-focus-contrast);
280
592
  }
281
593
  @media screen and (min-width: 50rem) {
282
594
  .eds-link {
@@ -293,7 +605,6 @@ p .eds-link--ext-icon {
293
605
 
294
606
  .eds-label,
295
607
  .eds-sub-label {
296
- color: #656782;
297
608
  color: var(--primary-label-color);
298
609
  }
299
610
 
@@ -325,14 +636,18 @@ p .eds-link--ext-icon {
325
636
  font-style: italic;
326
637
  }
327
638
 
328
- .eds-preformatted-text {
329
- background-color: #f8f8f8;
330
- border: 0.0625rem solid #e9e9e9;
639
+ .eds-preformatted-text,
640
+ .eds-code-text {
641
+ background-color: var(--components-typography-codetext-standard-fill);
642
+ border: 0.0625rem solid var(--components-typography-codetext-standard-border);
331
643
  border-radius: 0.25rem;
332
- color: #646464;
644
+ color: var(--components-typography-codetext-standard-text);
333
645
  font-family: "Monaco", monospace;
334
646
  font-size: 0.875rem;
335
- padding: 1em;
647
+ }
648
+
649
+ .eds-preformatted-text {
650
+ padding: 1rem;
336
651
  white-space: pre-wrap;
337
652
  word-break: keep-all;
338
653
  }
@@ -341,12 +656,6 @@ p .eds-link--ext-icon {
341
656
  display: inline-block;
342
657
  word-wrap: break-word;
343
658
  word-wrap: anywhere;
344
- background-color: #f8f8f8;
345
- border: 0.0625rem solid #e9e9e9;
346
- border-radius: 0.25rem;
347
- color: #646464;
348
- font-family: "Monaco", monospace;
349
- font-size: 0.875rem;
350
659
  padding: 0.125rem 0.25rem;
351
660
  }
352
661
 
@@ -358,9 +667,9 @@ p .eds-link--ext-icon {
358
667
  .eds-unordered-list {
359
668
  list-style: none;
360
669
  }
361
- .eds-unordered-list .eds-list-item:before {
670
+ .eds-unordered-list .eds-list-item::before {
362
671
  content: "";
363
- background: #aeb7e2;
672
+ background: var(--components-typography-list-standard-border);
364
673
  display: block;
365
674
  height: 0.125rem;
366
675
  left: -1.75rem;
@@ -399,13 +708,11 @@ p .eds-link--ext-icon {
399
708
  position: relative;
400
709
  }
401
710
  .eds-numbered-list > .eds-list-item::before {
402
- color: inherit;
403
- color: #181c56;
404
711
  color: var(--primary-text-color);
405
712
  position: absolute;
406
713
  font-weight: 600;
407
714
  left: -2.5rem;
408
- border: 0.125rem solid #aeb7e2;
715
+ border: 0.125rem solid var(--components-typography-list-standard-border);
409
716
  border-radius: 50%;
410
717
  height: 2rem;
411
718
  width: 2rem;
@@ -425,7 +732,7 @@ p .eds-link--ext-icon {
425
732
  }
426
733
 
427
734
  .eds-blockquote {
428
- border-left: 0.25rem solid #babbcf;
735
+ border-left: 0.25rem solid var(--components-typography-blockquote-standard-stroke);
429
736
  font-family: inherit;
430
737
  font-size: 1.25rem;
431
738
  line-height: 1.875rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/typography",
3
- "version": "1.8.24",
3
+ "version": "1.8.26",
4
4
  "license": "SEE LICENSE IN README.md",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/typography.esm.js",
@@ -27,11 +27,11 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/icons": "^6.15.1",
31
- "@entur/tokens": "^3.13.0",
30
+ "@entur/icons": "^6.15.2",
31
+ "@entur/tokens": "^3.13.1",
32
32
  "@entur/utils": "^0.10.0",
33
33
  "classnames": "^2.3.1",
34
34
  "normalize-scss": "^7.0.1"
35
35
  },
36
- "gitHead": "907373a47cc81ae12be266bac1d10522033f8b49"
36
+ "gitHead": "c36e1121738a702fe5ed92cd3f26636d7a4ef026"
37
37
  }