@entur/typography 1.8.24 → 1.8.25

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 -58
  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,9 +432,6 @@ html {
107
432
  .eds-h4,
108
433
  .eds-h5,
109
434
  .eds-h6 {
110
- color: inherit;
111
- color: #181c56;
112
- color: var(--primary-text-color);
113
435
  font-weight: 600;
114
436
  -webkit-font-smoothing: antialiased;
115
437
  }
@@ -187,9 +509,6 @@ html {
187
509
  }
188
510
 
189
511
  .eds-paragraph {
190
- color: inherit;
191
- color: #181c56;
192
- color: var(--primary-text-color);
193
512
  font-size: 1rem;
194
513
  line-height: 1.5rem;
195
514
  margin: 0 0 2rem;
@@ -202,9 +521,6 @@ html {
202
521
  }
203
522
 
204
523
  .eds-lead-paragraph {
205
- color: inherit;
206
- color: #181c56;
207
- color: var(--primary-text-color);
208
524
  font-size: 1.25rem;
209
525
  line-height: 1.875rem;
210
526
  margin: 1.5rem 0;
@@ -217,9 +533,6 @@ html {
217
533
  }
218
534
 
219
535
  .eds-sub-paragraph {
220
- color: inherit;
221
- color: #181c56;
222
- color: var(--primary-text-color);
223
536
  font-size: 0.875rem;
224
537
  line-height: 1.25rem;
225
538
  }
@@ -230,9 +543,6 @@ html {
230
543
  }
231
544
 
232
545
  .eds-small-text {
233
- color: inherit;
234
- color: #181c56;
235
- color: var(--primary-text-color);
236
546
  font-size: 0.625rem;
237
547
  line-height: 1rem;
238
548
  }
@@ -243,14 +553,14 @@ html {
243
553
  }
244
554
  }
245
555
 
246
- .eds-link, .eds-link:link, .eds-link:visited {
247
- color: inherit;
248
- color: #181c56;
556
+ .eds-link {
249
557
  color: var(--primary-text-color);
558
+ }
559
+ .eds-link, .eds-link:link, .eds-link:visited {
250
560
  font-size: inherit;
251
561
  text-decoration: none;
252
562
  position: relative;
253
- background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
563
+ background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
254
564
  background-repeat: no-repeat;
255
565
  background-size: 100% 0.125rem;
256
566
  background-position: 0 100%;
@@ -259,9 +569,6 @@ html {
259
569
  animation: eds-link-underline 0.3s ease-in;
260
570
  cursor: pointer;
261
571
  }
262
- .eds-contrast .eds-link {
263
- background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
264
- }
265
572
  @keyframes eds-link-underline {
266
573
  from {
267
574
  background-size: 0% 0.125rem;
@@ -271,12 +578,12 @@ html {
271
578
  }
272
579
  }
273
580
  .eds-link:focus {
581
+ outline: 2px solid #181c56;
582
+ outline-color: var(--basecolors-stroke-focus-standard);
274
583
  outline-offset: 0.125rem;
275
- outline: none;
276
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
277
584
  }
278
585
  .eds-contrast .eds-link:focus {
279
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
586
+ outline-color: var(--basecolors-stroke-focus-contrast);
280
587
  }
281
588
  @media screen and (min-width: 50rem) {
282
589
  .eds-link {
@@ -293,7 +600,6 @@ p .eds-link--ext-icon {
293
600
 
294
601
  .eds-label,
295
602
  .eds-sub-label {
296
- color: #656782;
297
603
  color: var(--primary-label-color);
298
604
  }
299
605
 
@@ -325,14 +631,18 @@ p .eds-link--ext-icon {
325
631
  font-style: italic;
326
632
  }
327
633
 
328
- .eds-preformatted-text {
329
- background-color: #f8f8f8;
330
- border: 0.0625rem solid #e9e9e9;
634
+ .eds-preformatted-text,
635
+ .eds-code-text {
636
+ background-color: var(--components-typography-codetext-standard-fill);
637
+ border: 0.0625rem solid var(--components-typography-codetext-standard-border);
331
638
  border-radius: 0.25rem;
332
- color: #646464;
639
+ color: var(--components-typography-codetext-standard-text);
333
640
  font-family: "Monaco", monospace;
334
641
  font-size: 0.875rem;
335
- padding: 1em;
642
+ }
643
+
644
+ .eds-preformatted-text {
645
+ padding: 1rem;
336
646
  white-space: pre-wrap;
337
647
  word-break: keep-all;
338
648
  }
@@ -341,12 +651,6 @@ p .eds-link--ext-icon {
341
651
  display: inline-block;
342
652
  word-wrap: break-word;
343
653
  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
654
  padding: 0.125rem 0.25rem;
351
655
  }
352
656
 
@@ -358,9 +662,9 @@ p .eds-link--ext-icon {
358
662
  .eds-unordered-list {
359
663
  list-style: none;
360
664
  }
361
- .eds-unordered-list .eds-list-item:before {
665
+ .eds-unordered-list .eds-list-item::before {
362
666
  content: "";
363
- background: #aeb7e2;
667
+ background: var(--components-typography-list-standard-border);
364
668
  display: block;
365
669
  height: 0.125rem;
366
670
  left: -1.75rem;
@@ -399,13 +703,11 @@ p .eds-link--ext-icon {
399
703
  position: relative;
400
704
  }
401
705
  .eds-numbered-list > .eds-list-item::before {
402
- color: inherit;
403
- color: #181c56;
404
706
  color: var(--primary-text-color);
405
707
  position: absolute;
406
708
  font-weight: 600;
407
709
  left: -2.5rem;
408
- border: 0.125rem solid #aeb7e2;
710
+ border: 0.125rem solid var(--components-typography-list-standard-border);
409
711
  border-radius: 50%;
410
712
  height: 2rem;
411
713
  width: 2rem;
@@ -425,7 +727,7 @@ p .eds-link--ext-icon {
425
727
  }
426
728
 
427
729
  .eds-blockquote {
428
- border-left: 0.25rem solid #babbcf;
730
+ border-left: 0.25rem solid var(--components-typography-blockquote-standard-stroke);
429
731
  font-family: inherit;
430
732
  font-size: 1.25rem;
431
733
  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.25",
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": "d0a435264ccaf7ed8e6b7798c81e876176ce3d4d"
37
37
  }