@redocly/portal-plugin-async-api 1.0.198 → 1.0.199

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 (9) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/lib/.tsbuildinfo +1 -1
  3. package/lib/styles.d.ts +1 -1
  4. package/lib/styles.js +130 -130
  5. package/lib/template.js +1 -1
  6. package/lib/template.js.map +1 -1
  7. package/package.json +3 -2
  8. package/src/styles.tsx +130 -130
  9. package/src/template.tsx +1 -1
package/src/styles.tsx CHANGED
@@ -10,8 +10,8 @@ export const StylesProvider = styled.div`
10
10
  font-size: var(--font-size-base);
11
11
  line-height: var(--line-height-base);
12
12
  font-weight: var(--font-weight-regular);
13
- background: var(--background-color);
14
- color: var(--text-base);
13
+ background: var(--bg-color);
14
+ color: var(--text-color-primary);
15
15
  }
16
16
 
17
17
  .asyncapi button {
@@ -25,7 +25,7 @@ export const StylesProvider = styled.div`
25
25
  line-height: 1;
26
26
 
27
27
  color: var(--button-color);
28
- background-color: var(--button-background-color);
28
+ background-color: var(--button-bg-color);
29
29
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
30
30
  border-radius: var(--button-border-radius);
31
31
 
@@ -43,7 +43,7 @@ export const StylesProvider = styled.div`
43
43
 
44
44
  &:active {
45
45
  box-shadow: var(--button-active-box-shadow);
46
- background-color: var(--button-active-background-color);
46
+ background-color: var(--button-bg-color-active);
47
47
  border: var(--button-border-width) var(--button-border-style)
48
48
  var(--button-active-border-color);
49
49
  }
@@ -51,12 +51,12 @@ export const StylesProvider = styled.div`
51
51
 
52
52
  .asyncapi__info-header-main > h1 {
53
53
  margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
54
- font-size: var(--h1-font-size, var(--h-font-size));
55
- font-weight: var(--h1-font-weight, var(--h-font-weight));
56
- font-family: var(--h1-font-family, var(--h-font-family));
57
- line-height: var(--h1-line-height, var(--h-line-height));
58
- color: var(--h1-text-color, var(--h-text-color));
59
- text-transform: var(--h1-text-transform, var(--h-text-transform));
54
+ font-size: var(--h1-font-size);
55
+ font-weight: var(--h1-font-weight);
56
+ font-family: var(--h1-font-family);
57
+ line-height: var(--h1-line-height);
58
+ color: var(--h1-text-color);
59
+ text-transform: var(--h1-text-transform);
60
60
  }
61
61
 
62
62
  .asyncapi__markdown > div > p > code {
@@ -64,7 +64,7 @@ export const StylesProvider = styled.div`
64
64
  font-size: var(--inline-code-font-size);
65
65
  font-family: var(--code-font-family);
66
66
  border-radius: var(--inline-code-border-radius);
67
- background-color: var(--inline-code-background-color);
67
+ background-color: var(--inline-code-bg-color);
68
68
  color: var(--inline-code-text-color);
69
69
  }
70
70
 
@@ -77,7 +77,7 @@ export const StylesProvider = styled.div`
77
77
  width: 6px;
78
78
  height: 10px;
79
79
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 4.25 7' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='white' %3E%3Cpath d='M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z' /%3E%3Cpath d='M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z' /%3E%3C/svg%3E");
80
- background: var(--text-base);
80
+ background: var(--text-color-primary);
81
81
  }
82
82
 
83
83
  .asyncapi__toggle-button {
@@ -88,7 +88,7 @@ export const StylesProvider = styled.div`
88
88
  --button-hover-border-color: none;
89
89
  --button-hover-box-shadow: none;
90
90
 
91
- --button-active-background-color: none;
91
+ --button-bg-color-active: none;
92
92
  --button-active-border-color: none;
93
93
  --button-active-box-shadow: none;
94
94
  }
@@ -105,13 +105,13 @@ export const StylesProvider = styled.div`
105
105
  font-size: var(--font-size-base);
106
106
  border-radius: var(--border-radius);
107
107
  border: solid 1px var(--md-table-border-color);
108
- background-color: var(--md-table-stripe-background-color);
108
+ background-color: var(--md-table-stripe-bg-color);
109
109
  }
110
110
 
111
111
  .asyncapi__table-header {
112
112
  font-weight: var(--md-table-head-font-weight);
113
113
  color: var(--md-table-head-text-color);
114
- background: var(--md-table-head-background-color);
114
+ background: var(--md-table-head-bg-color);
115
115
  }
116
116
 
117
117
  .asyncapi__table-header--nested {
@@ -136,7 +136,7 @@ export const StylesProvider = styled.div`
136
136
  }
137
137
 
138
138
  .asyncapi__table-body {
139
- background-color: var(--md-table-stripe-background-color);
139
+ background-color: var(--md-table-stripe-bg-color);
140
140
  color: var(--md-table-cell-text-color);
141
141
  }
142
142
 
@@ -159,8 +159,8 @@ export const StylesProvider = styled.div`
159
159
  }
160
160
 
161
161
  .asyncapi__tree-leaf:before {
162
- border-left: var(--border-primary) 2px solid;
163
- border-bottom: var(--border-primary) 2px solid;
162
+ border-left: var(--border-color-primary) 2px solid;
163
+ border-bottom: var(--border-color-primary) 2px solid;
164
164
  border-radius: 0 0 0 var(--border-radius);
165
165
  }
166
166
 
@@ -181,7 +181,7 @@ export const StylesProvider = styled.div`
181
181
  box-shadow: var(--tag-box-shadow);
182
182
 
183
183
  color: var(--tag-color);
184
- background-color: var(--tag-background-color);
184
+ background-color: var(--tag-bg-color);
185
185
  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
186
186
  border-radius: var(--tag-border-radius);
187
187
  }
@@ -189,52 +189,52 @@ export const StylesProvider = styled.div`
189
189
  .asyncapi__badge--publish,
190
190
  .asyncapi__server-header-protocol {
191
191
  --tag-color: var(--color-success-base);
192
- --tag-background-color: var(--color-success-bg);
192
+ --tag-bg-color: var(--color-success-bg);
193
193
  --tag-border-color: var(--color-success-border);
194
194
  }
195
195
 
196
196
  .asyncapi__badge--subscribe,
197
197
  .asyncapi__server-header-stage {
198
198
  --tag-color: var(--color-info-base);
199
- --tag-background-color: var(--color-info-bg);
199
+ --tag-bg-color: var(--color-info-bg);
200
200
  --tag-border-color: var(--color-info-border);
201
201
  }
202
202
 
203
203
  .asyncapi__badge--deprecated {
204
204
  --tag-color: var(--color-warning-base);
205
- --tag-background-color: var(--color-warning-bg);
205
+ --tag-bg-color: var(--color-warning-bg);
206
206
  --tag-border-color: var(--color-warning-border);
207
207
  }
208
208
 
209
209
  .asyncapi__badge--required {
210
- --tag-color: var(--color-cyan-6);
211
- --tag-background-color: var(--color-cyan-1);
212
- --tag-border-color: var(--color-cyan-3);
210
+ --tag-color: var(--color-turquoise-6);
211
+ --tag-bg-color: var(--color-turquoise-1);
212
+ --tag-border-color: var(--color-turquoise-3);
213
213
  }
214
214
 
215
215
  .asyncapi__badge--generated {
216
- --tag-color: var(--color-geekblue-6);
217
- --tag-background-color: var(--color-geekblue-1);
218
- --tag-border-color: var(--color-geekblue-3);
216
+ --tag-color: var(--color-blue-6);
217
+ --tag-bg-color: var(--color-blue-1);
218
+ --tag-border-color: var(--color-blue-3);
219
219
  }
220
220
 
221
221
  .asyncapi__tag {
222
222
  border-radius: var(--border-radius);
223
- background-color: var(--background-color);
223
+ background-color: var(--bg-color);
224
224
  font-size: var(--font-size-sm);
225
- color: var(--text-secondary);
225
+ color: var(--text-color-secondary);
226
226
  }
227
227
 
228
228
  .asyncapi__code {
229
- border: solid 1px var(--border-primary);
229
+ border: solid 1px var(--border-color-primary);
230
230
  border-radius: var(--border-radius);
231
- background: var(--background-color);
231
+ background: var(--bg-color);
232
232
  }
233
233
 
234
234
  .asyncapi__code-header {
235
- border-bottom: 1px solid var(--border-primary);
235
+ border-bottom: 1px solid var(--border-color-primary);
236
236
  font-weight: var(--md-table-head-font-weight);
237
- background: var(--md-table-head-background-color);
237
+ background: var(--md-table-head-bg-color);
238
238
  border-top-left-radius: var(--border-radius);
239
239
  border-top-right-radius: var(--border-radius);
240
240
  }
@@ -247,7 +247,7 @@ export const StylesProvider = styled.div`
247
247
 
248
248
  .asyncapi__code-pre {
249
249
  font-size: var(--font-size-base);
250
- background: var(--md-table-stripe-background-color);
250
+ background: var(--md-table-stripe-bg-color);
251
251
  border-bottom-right-radius: var(--border-radius);
252
252
  border-bottom-left-radius: var(--border-radius);
253
253
  }
@@ -258,7 +258,7 @@ export const StylesProvider = styled.div`
258
258
  }
259
259
 
260
260
  .asyncapi__info {
261
- background: var(--background-color);
261
+ background: var(--bg-color);
262
262
  border-radius: var(--border-radius);
263
263
  box-shadow: none;
264
264
  padding-left: 0;
@@ -267,19 +267,19 @@ export const StylesProvider = styled.div`
267
267
 
268
268
  .asyncapi__collapse-button,
269
269
  .asyncapi__info-list > li {
270
- --button-color: var(--text-primary);
271
- --button-background-color: var(--bg-overlay);
272
- --button-border-color: var(--bg-overlay);
270
+ --button-color: var(--text-color-primary);
271
+ --button-bg-color: var(--button-bg-color-secondary);
272
+ --button-border-color: var(--button-bg-color-secondary);
273
273
 
274
- --button-hover-background-color: var(--bg-overlay);
275
- --button-hover-border-color: var(--border-primary);
274
+ --button-hover-background-color: var(--button-bg-color-secondary-hover);
275
+ --button-hover-border-color: var(--border-color-primary);
276
276
 
277
- --button-active-background-color: var(--bg-overlay);
278
- --button-active-border-color: var(--button-color);
277
+ --button-bg-color-active: var(--button-bg-color-secondary-pressed);
278
+ --button-active-border-color: var(--button-bg-color-secondary-pressed);
279
279
 
280
- --button-disabled-color: var(--text-placeholder);
281
- --button-disabled-background-color: var(--bg-raised);
282
- --button-disabled-border-color: var(--border-secondary);
280
+ --button-disabled-color: var(--button-content-color-disabled);
281
+ --button-disabled-background-color: var(--bg-color-tonal);
282
+ --button-disabled-border-color: var(--border-color-secondary);
283
283
  }
284
284
 
285
285
  .asyncapi__info-list > li {
@@ -288,7 +288,7 @@ export const StylesProvider = styled.div`
288
288
  box-shadow: var(--button-box-shadow);
289
289
  color: var(--button-color);
290
290
  border: 1px solid var(--button-border-color);
291
- background-color: var(--button-background-color);
291
+ background-color: var(--button-bg-color);
292
292
  font-weight: var(--button-font-weight);
293
293
  }
294
294
  .asyncapi__info-list > li:hover {
@@ -319,92 +319,92 @@ export const StylesProvider = styled.div`
319
319
  }
320
320
 
321
321
  .asyncapi__messages > div {
322
- border: solid 1px var(--border-primary);
322
+ border: solid 1px var(--border-color-primary);
323
323
  box-shadow: none;
324
324
  font-size: var(--panel-heading-font-size-local);
325
- background-color: var(--panel-heading-background-color);
325
+ background-color: var(--panel-heading-bg-color);
326
326
  border-radius: var(--panel-border-radius);
327
327
  padding: var(--spacing-base);
328
328
  }
329
329
 
330
330
  .asyncapi__message {
331
331
  border-radius: var(--border-radius);
332
- background: var(--background-color);
333
- border: solid 1px var(--border-primary);
332
+ background: var(--bg-color);
333
+ border: solid 1px var(--border-color-primary);
334
334
  }
335
335
 
336
336
  .asyncapi__message-header-title > h3 {
337
- color: var(--text-primary);
337
+ color: var(--text-color-primary);
338
338
  padding: var(--panel-response-heading-padding);
339
339
  padding-right: 0;
340
340
  }
341
341
 
342
342
  .asyncapi__message-header-title {
343
- background-color: var(--background-color);
343
+ background-color: var(--bg-color);
344
344
  }
345
345
 
346
346
  .asyncapi__message-header-summary {
347
347
  font-size: var(--font-size-base);
348
348
  font-weight: var(--font-weight-regular);
349
- border-top: solid 1px var(--border-primary);
349
+ border-top: solid 1px var(--border-color-primary);
350
350
  }
351
351
 
352
352
  .asyncapi__message-description {
353
353
  font-size: var(--font-size-base);
354
- border-top: solid 1px var(--border-primary);
354
+ border-top: solid 1px var(--border-color-primary);
355
355
  }
356
356
 
357
357
  .asyncapi__message-headers-header {
358
- background-color: var(--md-table-head-background-color);
359
- color: var(--text-primary);
360
- border-top: solid 1px var(--border-primary);
358
+ background-color: var(--md-table-head-bg-color);
359
+ color: var(--text-color-primary);
360
+ border-top: solid 1px var(--border-color-primary);
361
361
  }
362
362
 
363
363
  .asyncapi__message-payload-oneOf-header {
364
- background-color: var(--md-table-head-background-color);
365
- color: var(--text-primary);
364
+ background-color: var(--md-table-head-bg-color);
365
+ color: var(--text-color-primary);
366
366
  }
367
367
 
368
368
  .asyncapi__message-payload-oneOf-list-item .asyncapi__message-payload {
369
369
  border-radius: var(--border-radius);
370
- border: solid 1px var(--border-primary);
371
- background-color: var(--background-color);
370
+ border: solid 1px var(--border-color-primary);
371
+ background-color: var(--bg-color);
372
372
  }
373
373
 
374
374
  .asyncapi__message-payload-anyOf-header {
375
- background-color: var(--md-table-head-background-color);
376
- color: var(--text-primary);
375
+ background-color: var(--md-table-head-bg-color);
376
+ color: var(--text-color-primary);
377
377
  }
378
378
 
379
379
  .asyncapi__message-payload-anyOf-list-item .asyncapi__message-payload {
380
380
  border-radius: var(--border-radius);
381
- border: solid 1px var(--border-primary);
382
- background-color: var(--background-color);
381
+ border: solid 1px var(--border-color-primary);
382
+ background-color: var(--bg-color);
383
383
  }
384
384
 
385
385
  .asyncapi__message-payload-header {
386
- background-color: var(--md-table-head-background-color);
387
- color: var(--text-primary);
388
- border-top: solid 1px var(--border-primary);
386
+ background-color: var(--md-table-head-bg-color);
387
+ color: var(--text-color-primary);
388
+ border-top: solid 1px var(--border-color-primary);
389
389
  }
390
390
 
391
391
  .asyncapi__message-tags-header {
392
- color: var(--text-primary);
392
+ color: var(--text-color-primary);
393
393
  }
394
394
 
395
395
  .asyncapi__schemas > div {
396
- border: solid 1px var(--border-primary);
396
+ border: solid 1px var(--border-color-primary);
397
397
  box-shadow: none;
398
398
  font-size: var(--panel-heading-font-size-local);
399
- background-color: var(--panel-heading-background-color);
399
+ background-color: var(--panel-heading-bg-color);
400
400
  padding: var(--spacing-base);
401
401
  border-radius: var(--panel-border-radius);
402
402
  }
403
403
 
404
404
  .asyncapi__schema {
405
405
  border-radius: var(--border-radius);
406
- border: solid 1px var(--border-primary);
407
- background-color: var(--background-color);
406
+ border: solid 1px var(--border-color-primary);
407
+ background-color: var(--bg-color);
408
408
  }
409
409
 
410
410
  .asyncapi__schema-header-title {
@@ -417,71 +417,71 @@ export const StylesProvider = styled.div`
417
417
  }
418
418
 
419
419
  .asyncapi__schema-table {
420
- border-top: solid 1px var(--border-primary);
420
+ border-top: solid 1px var(--border-color-primary);
421
421
  }
422
422
 
423
423
  .asyncapi__security {
424
- background: var(--background-color);
424
+ background: var(--bg-color);
425
425
  border-radius: var(--border-radius);
426
426
  }
427
427
 
428
428
  .asyncapi__servers > div {
429
- border: solid 1px var(--border-primary);
429
+ border: solid 1px var(--border-color-primary);
430
430
  box-shadow: none;
431
431
  font-size: var(--panel-heading-font-size-local);
432
- background-color: var(--panel-heading-background-color);
432
+ background-color: var(--panel-heading-bg-color);
433
433
  border-radius: var(--panel-border-radius);
434
434
  padding: var(--spacing-base);
435
435
  }
436
436
 
437
437
  .asyncapi__server-description {
438
- border-top: solid 1px var(--border-primary);
438
+ border-top: solid 1px var(--border-color-primary);
439
439
  }
440
440
 
441
441
  .asyncapi__server-variables-header {
442
- background-color: var(--background-color);
443
- color: var(--text-primary);
444
- border-top: solid 1px var(--border-primary);
442
+ background-color: var(--bg-color);
443
+ color: var(--text-color-primary);
444
+ border-top: solid 1px var(--border-color-primary);
445
445
  }
446
446
 
447
447
  .asyncapi__server-variables-table {
448
- border-top: solid 1px var(--border-primary);
448
+ border-top: solid 1px var(--border-color-primary);
449
449
  }
450
450
 
451
451
  .asyncapi__server-expand-icon:before {
452
- color: var(--text-secondary);
452
+ color: var(--text-color-secondary);
453
453
  font-size: var(--font-size-sm);
454
454
  }
455
455
 
456
456
  .asyncapi__server-security-header {
457
- background-color: var(--background-color);
458
- color: var(--text-primary);
459
- border-top: solid 1px var(--border-primary);
457
+ background-color: var(--bg-color);
458
+ color: var(--text-color-primary);
459
+ border-top: solid 1px var(--border-color-primary);
460
460
  }
461
461
 
462
462
  .asyncapi__server-security-table {
463
- border-top: solid 1px var(--border-primary);
463
+ border-top: solid 1px var(--border-color-primary);
464
464
  }
465
465
 
466
466
  .asyncapi__server-security-flows-list a {
467
467
  text-decoration: var(--link-decoration);
468
- color: var(--link-text-color);
468
+ color: var(--link-color-primary);
469
469
  font-weight: var(--link-font-weight);
470
470
  }
471
471
 
472
472
  .asyncapi__server-security-flows-list a:visited {
473
- color: var(--link-visited-text-color);
473
+ color: var(--link-color-visited);
474
474
  text-decoration: var(--link-visited-decoration);
475
475
  }
476
476
 
477
477
  .asyncapi__server-security-flow {
478
- background-color: var(--background-color);
479
- border: 1px solid var(--border-primary);
478
+ background-color: var(--bg-color);
479
+ border: 1px solid var(--border-color-primary);
480
480
  border-radius: var(--border-radius);
481
481
  }
482
482
 
483
483
  .asyncapi__server-security-flows-table-cell {
484
- border-bottom: solid 1px var(--border-primary);
484
+ border-bottom: solid 1px var(--border-color-primary);
485
485
  }
486
486
 
487
487
  .asyncapi__server-security-scope {
@@ -490,8 +490,8 @@ export const StylesProvider = styled.div`
490
490
  font-weight: var(--tag-font-weight);
491
491
  line-height: var(--tag-line-height);
492
492
  border-radius: var(--tag-border-radius);
493
- background: var(--tag-background-color);
494
- color: var(--text-primary);
493
+ background: var(--tag-bg-color);
494
+ color: var(--text-color-primary);
495
495
  padding: 0 var(--spacing-base);
496
496
  background-color: var(--color-http-post);
497
497
  }
@@ -508,8 +508,8 @@ export const StylesProvider = styled.div`
508
508
  .asyncapi__channel,
509
509
  .asyncapi__server {
510
510
  border-radius: var(--border-radius);
511
- border: solid 1px var(--border-primary);
512
- background-color: var(--background-color);
511
+ border: solid 1px var(--border-color-primary);
512
+ background-color: var(--bg-color);
513
513
  overflow: hidden;
514
514
  }
515
515
 
@@ -520,19 +520,19 @@ export const StylesProvider = styled.div`
520
520
  }
521
521
 
522
522
  .asyncapi__message-header {
523
- background-color: var(--background-color);
523
+ background-color: var(--bg-color);
524
524
  }
525
525
 
526
526
  .asyncapi__channels > div {
527
- background: var(--background-color);
527
+ background: var(--bg-color);
528
528
  border-radius: var(--panel-border-radius);
529
529
  box-shadow: none;
530
- border: 1px solid var(--border-primary);
530
+ border: 1px solid var(--border-color-primary);
531
531
  padding: var(--spacing-base);
532
532
  }
533
533
 
534
534
  .asyncapi__channel-header > h3 {
535
- color: var(--text-primary);
535
+ color: var(--text-color-primary);
536
536
  font-size: var(--font-size-base);
537
537
  }
538
538
 
@@ -541,60 +541,60 @@ export const StylesProvider = styled.div`
541
541
  }
542
542
 
543
543
  .asyncapi__channel-operations-header {
544
- color: var(--text-primary);
544
+ color: var(--text-color-primary);
545
545
  background-color: var(background-color);
546
- border-top: solid 1px var(--border-primary);
546
+ border-top: solid 1px var(--border-color-primary);
547
547
  }
548
548
 
549
549
  .asyncapi__channel-operations-header-oneOf {
550
- border-top: solid 1px var(--border-primary);
550
+ border-top: solid 1px var(--border-color-primary);
551
551
  }
552
552
 
553
553
  .asyncapi__channel-operations-list .asyncapi__messages-list-item .asyncapi__message {
554
554
  border-radius: var(--border-radius);
555
- border: solid 1px var(--border-primary);
556
- background-color: var(--background-color);
555
+ border: solid 1px var(--border-color-primary);
556
+ background-color: var(--bg-color);
557
557
  }
558
558
 
559
559
  .asyncapi__channel-operation-message > .asyncapi__bindings {
560
560
  border-radius: var(--border-radius);
561
- border: solid 1px var(--border-primary);
561
+ border: solid 1px var(--border-color-primary);
562
562
  }
563
563
 
564
564
  .asyncapi__channel-operation-message-header {
565
- color: var(--text-primary);
566
- border-top: solid 1px var(--border-primary);
565
+ color: var(--text-color-primary);
566
+ border-top: solid 1px var(--border-color-primary);
567
567
  }
568
568
 
569
569
  .asyncapi__channel-operation-oneOf-subscribe > .asyncapi__bindings {
570
570
  border-radius: var(--border-radius);
571
- border: solid 1px var(--border-primary);
571
+ border: solid 1px var(--border-color-primary);
572
572
  margin: 12px;
573
573
  }
574
574
 
575
575
  .asyncapi__channel-operation-oneOf-subscribe-header {
576
- color: var(--text-primary);
577
- border-top: solid 1px var(--border-primary);
576
+ color: var(--text-color-primary);
577
+ border-top: solid 1px var(--border-color-primary);
578
578
  }
579
579
 
580
580
  .asyncapi__channel-operation-oneOf-publish > .asyncapi__bindings {
581
581
  border-radius: var(--border-radius);
582
- border: solid 1px var(--border-primary);
582
+ border: solid 1px var(--border-color-primary);
583
583
  }
584
584
 
585
585
  .asyncapi__channel-operation-oneOf-publish-header {
586
- color: var(--text-primary);
587
- border-top: solid 1px var(--border-primary);
586
+ color: var(--text-color-primary);
587
+ border-top: solid 1px var(--border-color-primary);
588
588
  }
589
589
 
590
590
  .asyncapi__bindings-header {
591
- color: var(--text-primary);
591
+ color: var(--text-color-primary);
592
592
  }
593
593
  .asyncapi__bindings-header > h4 {
594
- background-color: var(--md-table-head-background-color);
595
- color: var(--text-primary);
596
- border-top: solid 1px var(--border-primary);
597
- border-bottom: solid 1px var(--border-primary);
594
+ background-color: var(--md-table-head-bg-color);
595
+ color: var(--text-color-primary);
596
+ border-top: solid 1px var(--border-color-primary);
597
+ border-bottom: solid 1px var(--border-color-primary);
598
598
  }
599
599
 
600
600
  .asyncapi__binding-protocol {
@@ -602,23 +602,23 @@ export const StylesProvider = styled.div`
602
602
  }
603
603
 
604
604
  .asyncapi__binding-table {
605
- border-top: solid 1px var(--border-primary);
605
+ border-top: solid 1px var(--border-color-primary);
606
606
  }
607
607
  .asyncapi__binding-field-name {
608
608
  font-weight: bold;
609
609
  }
610
610
 
611
611
  .asyncapi__channel-parameters-header {
612
- color: var(--text-primary);
613
- background-color: var(--md-table-head-background-color);
614
- border-top: solid 1px var(--border-primary);
612
+ color: var(--text-color-primary);
613
+ background-color: var(--md-table-head-bg-color);
614
+ border-top: solid 1px var(--border-color-primary);
615
615
  }
616
616
 
617
617
  .asyncapi__error {
618
- background-color: var(--background-color);
618
+ background-color: var(--bg-color);
619
619
  border-left: 6px solid #f44336;
620
620
  border-radius: var(--border-radius);
621
- color: var(--text-secondary);
621
+ color: var(--text-color-secondary);
622
622
  font-size: var(--font-size-base);
623
623
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
624
624
  }
@@ -629,18 +629,18 @@ export const StylesProvider = styled.div`
629
629
  }
630
630
 
631
631
  .asyncapi__error-body-pre {
632
- background-color: var(--background-color);
633
- color: var(--text-secondary);
632
+ background-color: var(--bg-color);
633
+ color: var(--text-color-secondary);
634
634
  border-bottom-right-radius: var(--border-radius);
635
635
  font-size: var(--font-size-sm);
636
636
  }
637
637
 
638
638
  .asyncapi__enum {
639
639
  line-height: 2;
640
- border-color: var(--border-primary);
640
+ border-color: var(--border-color-primary);
641
641
  border-radius: var(--border-radius);
642
642
  font-family: var(--code-font-family);
643
- color: var(--text-secondary);
643
+ color: var(--text-color-secondary);
644
644
  border-width: 1px;
645
645
  }
646
646
  `;
package/src/template.tsx CHANGED
@@ -2,7 +2,7 @@ import AsyncApiComponent from '@asyncapi/react-component';
2
2
  import React from 'react';
3
3
  import styled from 'styled-components';
4
4
  // @ts-ignore
5
- import { Breadcrumbs as ThemeBreadcrumbs } from '@theme';
5
+ import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme';
6
6
  import '@asyncapi/react-component/lib/styles/fiori.css';
7
7
 
8
8
  import type { ConfigInterface, AsyncApiProps } from '@asyncapi/react-component';