@redocly/portal-plugin-async-api 1.0.25 → 1.0.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 (6) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/lib/.tsbuildinfo +1 -1
  3. package/lib/styles.js +202 -131
  4. package/lib/styles.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/styles.tsx +202 -131
package/src/styles.tsx CHANGED
@@ -2,6 +2,7 @@ import styled from 'styled-components';
2
2
 
3
3
  export const StylesProvider = styled.div`
4
4
  margin: auto;
5
+ padding: 0 var(--spacing-xl);
5
6
  max-width: var(--layout-stacked-large-max-width);
6
7
 
7
8
  .asyncapi {
@@ -10,7 +11,41 @@ export const StylesProvider = styled.div`
10
11
  line-height: var(--line-height-base);
11
12
  font-weight: var(--font-weight-regular);
12
13
  background: var(--background-color);
13
- color: var(--text-color);
14
+ color: var(--text-base);
15
+ }
16
+
17
+ .asyncapi button {
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ gap: 5px;
22
+ outline: none;
23
+ margin: var(--button-margin);
24
+ cursor: pointer;
25
+ line-height: 1;
26
+
27
+ color: var(--button-color);
28
+ background-color: var(--button-background-color);
29
+ border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
30
+ border-radius: var(--button-border-radius);
31
+
32
+ font-size: var(--button-font-size);
33
+ font-family: var(--button-font-family);
34
+ font-weight: var(--button-font-weight);
35
+ box-shadow: var(--button-box-shadow);
36
+
37
+ &:hover {
38
+ box-shadow: var(--button-hover-box-shadow);
39
+ background-color: var(--button-hover-background-color);
40
+ border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
41
+ }
42
+
43
+ &:active {
44
+ box-shadow: var(--button-active-box-shadow);
45
+ background-color: var(--button-active-background-color);
46
+ border: var(--button-border-width) var(--button-border-style)
47
+ var(--button-active-border-color);
48
+ }
14
49
  }
15
50
 
16
51
  .asyncapi__info-header-main > h1 {
@@ -41,13 +76,24 @@ export const StylesProvider = styled.div`
41
76
  width: 6px;
42
77
  height: 10px;
43
78
  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");
44
- background: var(--text-color);
79
+ background: var(--text-base);
45
80
  }
46
81
 
47
82
  .asyncapi__toggle-button {
48
- flex-grow: 1;
49
83
  display: flex;
50
- padding-left: 8px;
84
+ padding-left: var(--spacing-xs);
85
+
86
+ --button-hover-background-color: none;
87
+ --button-hover-border-color: none;
88
+ --button-hover-box-shadow: none;
89
+
90
+ --button-active-background-color: none;
91
+ --button-active-border-color: none;
92
+ --button-active-box-shadow: none;
93
+ }
94
+
95
+ .asyncapi__toggle-header {
96
+ justify-content: start;
51
97
  }
52
98
 
53
99
  .asyncapi__toggle-header-content {
@@ -71,7 +117,7 @@ export const StylesProvider = styled.div`
71
117
  color: var(--md-table-head-text-color);
72
118
  border-bottom: solid 1px var(--md-table-border-color);
73
119
  font-weight: var(--font-weight-bold);
74
- font-size: var(--font-size-small);
120
+ font-size: var(--font-size-sm);
75
121
  }
76
122
 
77
123
  .asyncapi__table-header-title--nested {
@@ -80,7 +126,7 @@ export const StylesProvider = styled.div`
80
126
 
81
127
  .asyncapi__table-header-title--nested > td {
82
128
  border-bottom: solid 1px var(--md-table-border-color);
83
- font-size: var(--font-size-small);
129
+ font-size: var(--font-size-sm);
84
130
  color: var(--md-table-head-text-color);
85
131
  }
86
132
 
@@ -107,64 +153,89 @@ export const StylesProvider = styled.div`
107
153
  }
108
154
 
109
155
  .asyncapi__table-cell--nested {
110
- font-size: var(--font-size-small);
156
+ font-size: var(--font-size-sm);
111
157
  border-bottom: solid 1px var(--md-table-border-color);
112
158
  }
113
159
 
114
160
  .asyncapi__tree-leaf:before {
115
- border-left: var(--border-color) 2px solid;
116
- border-bottom: var(--border-color) 2px solid;
161
+ border-left: var(--border-primary) 2px solid;
162
+ border-bottom: var(--border-primary) 2px solid;
117
163
  border-radius: 0 0 0 var(--border-radius);
118
164
  }
119
165
 
120
166
  .asyncapi__badge {
121
- font-size: var(--badge-http-font-size);
122
- font-family: var(--badge-http-font-family);
123
- font-weight: var(--badge-http-font-weight);
124
- line-height: var(--badge-http-line-height);
125
- border-radius: var(--badge-http-border-radius);
126
- background: var(--badge-background-color);
127
- color: var(--badge-http-text-color);
128
- padding: 0 16px;
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ text-wrap: nowrap;
171
+
172
+ padding: var(--tag-padding);
173
+ margin: var(--tag-margin);
174
+ gap: var(--tag-gap);
175
+
176
+ font-size: var(--tag-font-size);
177
+ font-family: var(--tag-font-family);
178
+ font-weight: var(--tag-font-weight);
179
+ line-height: var(--tag-line-height);
180
+ box-shadow: var(--tag-box-shadow);
181
+
182
+ color: var(--tag-color);
183
+ background-color: var(--tag-background-color);
184
+ border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
185
+ border-radius: var(--tag-border-radius);
129
186
  }
130
187
 
131
- .asyncapi__badge--publish {
132
- background-color: var(--color-http-get);
188
+ .asyncapi__badge--publish,
189
+ .asyncapi__server-header-protocol {
190
+ --tag-color: var(--color-success-base);
191
+ --tag-background-color: var(--color-success-bg);
192
+ --tag-border-color: var(--color-success-border);
133
193
  }
134
194
 
135
- .asyncapi__badge--subscribe {
136
- background-color: var(--color-http-post);
195
+ .asyncapi__badge--subscribe,
196
+ .asyncapi__server-header-stage {
197
+ --tag-color: var(--color-info-base);
198
+ --tag-background-color: var(--color-info-bg);
199
+ --tag-border-color: var(--color-info-border);
137
200
  }
138
201
 
139
202
  .asyncapi__badge--deprecated {
140
- background-color: var(--color-http-options);
203
+ --tag-color: var(--color-warning-base);
204
+ --tag-background-color: var(--color-warning-bg);
205
+ --tag-border-color: var(--color-warning-border);
141
206
  }
142
207
 
143
208
  .asyncapi__badge--required {
144
- background-color: var(--color-http-options);
209
+ --tag-color: var(--color-cyan-6);
210
+ --tag-background-color: var(--color-cyan-1);
211
+ --tag-border-color: var(--color-cyan-3);
145
212
  }
146
213
 
147
214
  .asyncapi__badge--generated {
148
- background-color: var(--color-http-link);
215
+ --tag-color: var(--color-geekblue-6);
216
+ --tag-background-color: var(--color-geekblue-1);
217
+ --tag-border-color: var(--color-geekblue-3);
149
218
  }
150
219
 
151
220
  .asyncapi__tag {
152
221
  border-radius: var(--border-radius);
153
222
  background-color: var(--background-color);
154
- font-size: var(--font-size-small);
155
- color: var(--text-color);
223
+ font-size: var(--font-size-sm);
224
+ color: var(--text-secondary);
156
225
  }
157
226
 
158
227
  .asyncapi__code {
159
- border: solid 1px var(--border-color);
228
+ border: solid 1px var(--border-primary);
160
229
  border-radius: var(--border-radius);
161
230
  background: var(--background-color);
162
231
  }
163
232
 
164
233
  .asyncapi__code-header {
165
- border-bottom: 1px solid var(--border-color);
234
+ border-bottom: 1px solid var(--border-primary);
166
235
  font-weight: var(--md-table-head-font-weight);
167
236
  background: var(--md-table-head-background-color);
237
+ border-top-left-radius: var(--border-radius);
238
+ border-top-right-radius: var(--border-radius);
168
239
  }
169
240
 
170
241
  .asyncapi__code-header > h4 {
@@ -193,40 +264,43 @@ export const StylesProvider = styled.div`
193
264
  padding-right: 0;
194
265
  }
195
266
 
196
- .asyncapi__collapse-button {
197
- border-radius: var(--border-radius);
198
- border: 1px solid var(--border-color);
199
- background-color: var(--button-background-color);
200
- color: var(--button-color);
201
- font-weight: var(--button-font-weight);
202
- font-family: var(--button-font-family);
203
- font-size: var(--button-large-font-size);
204
- border: 2px solid var(--button-background-color);
205
- }
206
- .asyncapi__collapse-button:hover {
207
- border: 2px solid var(--button-hover-background-color);
208
- background-color: var(--button-hover-background-color);
267
+ .asyncapi__collapse-button,
268
+ .asyncapi__info-list > li {
269
+ --button-color: var(--text-primary);
270
+ --button-background-color: var(--bg-overlay);
271
+ --button-border-color: var(--bg-overlay);
272
+
273
+ --button-hover-background-color: var(--bg-overlay);
274
+ --button-hover-border-color: var(--border-primary);
275
+
276
+ --button-active-background-color: var(--bg-overlay);
277
+ --button-active-border-color: var(--button-color);
278
+
279
+ --button-disabled-color: var(--text-placeholder);
280
+ --button-disabled-background-color: var(--bg-raised);
281
+ --button-disabled-border-color: var(--border-secondary);
209
282
  }
283
+
210
284
  .asyncapi__info-list > li {
211
285
  border-radius: var(--button-border-radius);
212
286
  font-weight: var(--button-font-weight);
213
287
  box-shadow: var(--button-box-shadow);
214
- color: var(--button-background-color);
215
- border: 2px solid var(--button-border-color);
216
- background-color: transparent;
288
+ color: var(--button-color);
289
+ border: 1px solid var(--button-border-color);
290
+ background-color: var(--button-background-color);
217
291
  font-weight: var(--button-font-weight);
218
292
  }
219
293
  .asyncapi__info-list > li:hover {
220
- color: var(--button-hover-background-color);
221
- border: 2px solid var(--button-hover-border-color);
222
- background-color: transparent;
294
+ color: var(--button-color);
295
+ border: 1px solid var(--button-hover-border-color);
296
+ background-color: var(--button-hover-background-color);
223
297
  }
224
298
  .asyncapi__info-list > li a {
225
- color: var(--button-background-color);
299
+ color: var(--button-color);
226
300
  }
227
301
  .asyncapi__info-list > li:hover,
228
302
  .asyncapi__info-list > li:hover a {
229
- color: var(--button-hover-background-color);
303
+ color: var(--button-color);
230
304
  }
231
305
 
232
306
  .asyncapi__anchor-icon {
@@ -234,31 +308,31 @@ export const StylesProvider = styled.div`
234
308
  width: 12px;
235
309
  height: 12px;
236
310
  mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwNSAtMjg5KSI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMCAxMDApIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAyIDE4NikiPgo8cG9seWdvbiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiLz4KPHBhdGggZD0ibTE5IDE5aC0xNHYtMTRoN3YtMmgtN2MtMS4xMSAwLTIgMC45LTIgMnYxNGMwIDEuMSAwLjg5IDIgMiAyaDE0YzEuMSAwIDItMC45IDItMnYtN2gtMnY3em0tNS0xNnYyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDEgOS44My05LjgzdjMuNTloMnYtN2gtN3oiIGZpbGw9IiMwYjc0ZGUiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8L3N2Zz4KCg==');
237
- background: var(--button-background-color);
311
+ background: var(--button-color);
238
312
  }
239
313
 
240
314
  .asyncapi__info-list > li:hover .asyncapi__anchor-icon {
241
315
  filter: none;
242
- background: var(--button-hover-background-color);
316
+ background: var(--button-color);
243
317
  }
244
318
 
245
319
  .asyncapi__messages > div {
246
- border: solid 1px var(--border-color);
320
+ border: solid 1px var(--border-primary);
247
321
  box-shadow: none;
248
322
  font-size: var(--panel-heading-font-size-local);
249
323
  background-color: var(--panel-heading-background-color);
250
324
  border-radius: var(--panel-border-radius);
251
- padding: var(--panel-schemas-heading-padding);
325
+ padding: var(--spacing-base);
252
326
  }
253
327
 
254
328
  .asyncapi__message {
255
329
  border-radius: var(--border-radius);
256
330
  background: var(--background-color);
257
- border: solid 1px var(--border-color);
331
+ border: solid 1px var(--border-primary);
258
332
  }
259
333
 
260
334
  .asyncapi__message-header-title > h3 {
261
- color: var(--text-color);
335
+ color: var(--text-primary);
262
336
  padding: var(--panel-response-heading-padding);
263
337
  padding-right: 0;
264
338
  }
@@ -270,64 +344,64 @@ export const StylesProvider = styled.div`
270
344
  .asyncapi__message-header-summary {
271
345
  font-size: var(--font-size-base);
272
346
  font-weight: var(--font-weight-regular);
273
- border-top: solid 1px var(--border-color);
347
+ border-top: solid 1px var(--border-primary);
274
348
  }
275
349
 
276
350
  .asyncapi__message-description {
277
351
  font-size: var(--font-size-base);
278
- border-top: solid 1px var(--border-color);
352
+ border-top: solid 1px var(--border-primary);
279
353
  }
280
354
 
281
355
  .asyncapi__message-headers-header {
282
356
  background-color: var(--md-table-head-background-color);
283
- color: var(--text-color);
284
- border-top: solid 1px var(--border-color);
357
+ color: var(--text-primary);
358
+ border-top: solid 1px var(--border-primary);
285
359
  }
286
360
 
287
361
  .asyncapi__message-payload-oneOf-header {
288
362
  background-color: var(--md-table-head-background-color);
289
- color: var(--text-color);
363
+ color: var(--text-primary);
290
364
  }
291
365
 
292
366
  .asyncapi__message-payload-oneOf-list-item .asyncapi__message-payload {
293
367
  border-radius: var(--border-radius);
294
- border: solid 1px var(--border-color);
368
+ border: solid 1px var(--border-primary);
295
369
  background-color: var(--background-color);
296
370
  }
297
371
 
298
372
  .asyncapi__message-payload-anyOf-header {
299
373
  background-color: var(--md-table-head-background-color);
300
- color: var(--text-color);
374
+ color: var(--text-primary);
301
375
  }
302
376
 
303
377
  .asyncapi__message-payload-anyOf-list-item .asyncapi__message-payload {
304
378
  border-radius: var(--border-radius);
305
- border: solid 1px var(--border-color);
379
+ border: solid 1px var(--border-primary);
306
380
  background-color: var(--background-color);
307
381
  }
308
382
 
309
383
  .asyncapi__message-payload-header {
310
384
  background-color: var(--md-table-head-background-color);
311
- color: var(--text-color);
312
- border-top: solid 1px var(--border-color);
385
+ color: var(--text-primary);
386
+ border-top: solid 1px var(--border-primary);
313
387
  }
314
388
 
315
389
  .asyncapi__message-tags-header {
316
- color: var(--text-color);
390
+ color: var(--text-primary);
317
391
  }
318
392
 
319
393
  .asyncapi__schemas > div {
320
- border: solid 1px var(--border-color);
394
+ border: solid 1px var(--border-primary);
321
395
  box-shadow: none;
322
396
  font-size: var(--panel-heading-font-size-local);
323
397
  background-color: var(--panel-heading-background-color);
324
- padding: var(--panel-schemas-heading-padding);
398
+ padding: var(--spacing-base);
325
399
  border-radius: var(--panel-border-radius);
326
400
  }
327
401
 
328
402
  .asyncapi__schema {
329
403
  border-radius: var(--border-radius);
330
- border: solid 1px var(--border-color);
404
+ border: solid 1px var(--border-primary);
331
405
  background-color: var(--background-color);
332
406
  }
333
407
 
@@ -335,8 +409,13 @@ export const StylesProvider = styled.div`
335
409
  font-size: var(--font-size-base);
336
410
  }
337
411
 
412
+ .asyncapi__schema-example-header {
413
+ display: flex;
414
+ gap: var(--spacing-xxs);
415
+ }
416
+
338
417
  .asyncapi__schema-table {
339
- border-top: solid 1px var(--border-color);
418
+ border-top: solid 1px var(--border-primary);
340
419
  }
341
420
 
342
421
  .asyncapi__security {
@@ -345,49 +424,41 @@ export const StylesProvider = styled.div`
345
424
  }
346
425
 
347
426
  .asyncapi__servers > div {
348
- border: solid 1px var(--border-color);
427
+ border: solid 1px var(--border-primary);
349
428
  box-shadow: none;
350
429
  font-size: var(--panel-heading-font-size-local);
351
430
  background-color: var(--panel-heading-background-color);
352
431
  border-radius: var(--panel-border-radius);
353
- padding: var(--panel-schemas-heading-padding);
354
- }
355
-
356
- .asyncapi__server-header-stage {
357
- background-color: var(--color-http-post);
358
- }
359
-
360
- .asyncapi__server-header-protocol {
361
- background-color: var(--color-http-get);
432
+ padding: var(--spacing-base);
362
433
  }
363
434
 
364
435
  .asyncapi__server-description {
365
- border-top: solid 1px var(--border-color);
436
+ border-top: solid 1px var(--border-primary);
366
437
  }
367
438
 
368
439
  .asyncapi__server-variables-header {
369
440
  background-color: var(--background-color);
370
- color: var(--text-color);
371
- border-top: solid 1px var(--border-color);
441
+ color: var(--text-primary);
442
+ border-top: solid 1px var(--border-primary);
372
443
  }
373
444
 
374
445
  .asyncapi__server-variables-table {
375
- border-top: solid 1px var(--border-color);
446
+ border-top: solid 1px var(--border-primary);
376
447
  }
377
448
 
378
449
  .asyncapi__server-expand-icon:before {
379
- color: var(--text-color);
380
- font-size: var(--font-size-small);
450
+ color: var(--text-secondary);
451
+ font-size: var(--font-size-sm);
381
452
  }
382
453
 
383
454
  .asyncapi__server-security-header {
384
455
  background-color: var(--background-color);
385
- color: var(--text-color);
386
- border-top: solid 1px var(--border-color);
456
+ color: var(--text-primary);
457
+ border-top: solid 1px var(--border-primary);
387
458
  }
388
459
 
389
460
  .asyncapi__server-security-table {
390
- border-top: solid 1px var(--border-color);
461
+ border-top: solid 1px var(--border-primary);
391
462
  }
392
463
 
393
464
  .asyncapi__server-security-flows-list a {
@@ -403,23 +474,23 @@ export const StylesProvider = styled.div`
403
474
 
404
475
  .asyncapi__server-security-flow {
405
476
  background-color: var(--background-color);
406
- border: 1px solid var(--border-color);
477
+ border: 1px solid var(--border-primary);
407
478
  border-radius: var(--border-radius);
408
479
  }
409
480
 
410
481
  .asyncapi__server-security-flows-table-cell {
411
- border-bottom: solid 1px var(--border-color);
482
+ border-bottom: solid 1px var(--border-primary);
412
483
  }
413
484
 
414
485
  .asyncapi__server-security-scope {
415
- font-size: var(--badge-http-font-size);
416
- font-family: var(--badge-http-font-family);
417
- font-weight: var(--badge-http-font-weight);
418
- line-height: var(--badge-http-line-height);
419
- border-radius: var(--badge-http-border-radius);
420
- background: var(--badge-background-color);
421
- color: var(--badge-http-text-color);
422
- padding: 0 16px;
486
+ font-size: var(--tag-font-size);
487
+ font-family: var(--tag-font-family);
488
+ font-weight: var(--tag-font-weight);
489
+ line-height: var(--tag-line-height);
490
+ border-radius: var(--tag-border-radius);
491
+ background: var(--tag-background-color);
492
+ color: var(--text-primary);
493
+ padding: 0 var(--spacing-base);
423
494
  background-color: var(--color-http-post);
424
495
  }
425
496
 
@@ -427,7 +498,7 @@ export const StylesProvider = styled.div`
427
498
  .asyncapi__servers-toggle--expanded > .asyncapi__toggle-header,
428
499
  .asyncapi__schemas-toggle--expanded > .asyncapi__toggle-header,
429
500
  .asyncapi__messages-toggle--expanded > .asyncapi__toggle-header {
430
- padding-bottom: var(--panel-schemas-heading-padding);
501
+ padding-bottom: var(--spacing-base);
431
502
  }
432
503
 
433
504
  .asyncapi__schema,
@@ -435,7 +506,7 @@ export const StylesProvider = styled.div`
435
506
  .asyncapi__channel,
436
507
  .asyncapi__server {
437
508
  border-radius: var(--border-radius);
438
- border: solid 1px var(--border-color);
509
+ border: solid 1px var(--border-primary);
439
510
  background-color: var(--background-color);
440
511
  overflow: hidden;
441
512
  }
@@ -454,74 +525,74 @@ export const StylesProvider = styled.div`
454
525
  background: var(--background-color);
455
526
  border-radius: var(--panel-border-radius);
456
527
  box-shadow: none;
457
- border: 1px solid var(--border-color);
458
- padding: var(--panel-schemas-heading-padding);
528
+ border: 1px solid var(--border-primary);
529
+ padding: var(--spacing-base);
459
530
  }
460
531
 
461
532
  .asyncapi__channel-header > h3 {
462
- color: var(--text-color);
533
+ color: var(--text-primary);
463
534
  font-size: var(--font-size-base);
464
535
  }
465
536
 
466
537
  .asyncapi__channel-header-title {
467
- font-size: 14px;
538
+ font-size: var(--font-size-base);
468
539
  }
469
540
 
470
541
  .asyncapi__channel-operations-header {
471
- color: var(--text-color);
542
+ color: var(--text-primary);
472
543
  background-color: var(background-color);
473
- border-top: solid 1px var(--border-color);
544
+ border-top: solid 1px var(--border-primary);
474
545
  }
475
546
 
476
547
  .asyncapi__channel-operations-header-oneOf {
477
- border-top: solid 1px var(--border-color);
548
+ border-top: solid 1px var(--border-primary);
478
549
  }
479
550
 
480
551
  .asyncapi__channel-operations-list .asyncapi__messages-list-item .asyncapi__message {
481
552
  border-radius: var(--border-radius);
482
- border: solid 1px var(--border-color);
553
+ border: solid 1px var(--border-primary);
483
554
  background-color: var(--background-color);
484
555
  }
485
556
 
486
557
  .asyncapi__channel-operation-message > .asyncapi__bindings {
487
558
  border-radius: var(--border-radius);
488
- border: solid 1px var(--border-color);
559
+ border: solid 1px var(--border-primary);
489
560
  }
490
561
 
491
562
  .asyncapi__channel-operation-message-header {
492
- color: var(--text-color);
493
- border-top: solid 1px var(--border-color);
563
+ color: var(--text-primary);
564
+ border-top: solid 1px var(--border-primary);
494
565
  }
495
566
 
496
567
  .asyncapi__channel-operation-oneOf-subscribe > .asyncapi__bindings {
497
568
  border-radius: var(--border-radius);
498
- border: solid 1px var(--border-color);
569
+ border: solid 1px var(--border-primary);
499
570
  margin: 12px;
500
571
  }
501
572
 
502
573
  .asyncapi__channel-operation-oneOf-subscribe-header {
503
- color: var(--text-color);
504
- border-top: solid 1px var(--border-color);
574
+ color: var(--text-primary);
575
+ border-top: solid 1px var(--border-primary);
505
576
  }
506
577
 
507
578
  .asyncapi__channel-operation-oneOf-publish > .asyncapi__bindings {
508
579
  border-radius: var(--border-radius);
509
- border: solid 1px var(--border-color);
580
+ border: solid 1px var(--border-primary);
510
581
  }
511
582
 
512
583
  .asyncapi__channel-operation-oneOf-publish-header {
513
- color: var(--text-color);
514
- border-top: solid 1px var(--border-color);
584
+ color: var(--text-primary);
585
+ border-top: solid 1px var(--border-primary);
515
586
  }
516
587
 
517
588
  .asyncapi__bindings-header {
518
- color: var(--text-color);
589
+ color: var(--text-primary);
519
590
  }
520
591
  .asyncapi__bindings-header > h4 {
521
592
  background-color: var(--md-table-head-background-color);
522
- color: var(--text-color);
523
- border-top: solid 1px var(--border-color);
524
- border-bottom: solid 1px var(--border-color);
593
+ color: var(--text-primary);
594
+ border-top: solid 1px var(--border-primary);
595
+ border-bottom: solid 1px var(--border-primary);
525
596
  }
526
597
 
527
598
  .asyncapi__binding-protocol {
@@ -529,23 +600,23 @@ export const StylesProvider = styled.div`
529
600
  }
530
601
 
531
602
  .asyncapi__binding-table {
532
- border-top: solid 1px var(--border-color);
603
+ border-top: solid 1px var(--border-primary);
533
604
  }
534
605
  .asyncapi__binding-field-name {
535
606
  font-weight: bold;
536
607
  }
537
608
 
538
609
  .asyncapi__channel-parameters-header {
539
- color: var(--text-color);
610
+ color: var(--text-primary);
540
611
  background-color: var(--md-table-head-background-color);
541
- border-top: solid 1px var(--border-color);
612
+ border-top: solid 1px var(--border-primary);
542
613
  }
543
614
 
544
615
  .asyncapi__error {
545
616
  background-color: var(--background-color);
546
617
  border-left: 6px solid #f44336;
547
618
  border-radius: var(--border-radius);
548
- color: var(--text-color);
619
+ color: var(--text-secondary);
549
620
  font-size: var(--font-size-base);
550
621
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
551
622
  }
@@ -557,17 +628,17 @@ export const StylesProvider = styled.div`
557
628
 
558
629
  .asyncapi__error-body-pre {
559
630
  background-color: var(--background-color);
560
- color: var(--text-color);
631
+ color: var(--text-secondary);
561
632
  border-bottom-right-radius: var(--border-radius);
562
- font-size: var(--font-size-small);
633
+ font-size: var(--font-size-sm);
563
634
  }
564
635
 
565
636
  .asyncapi__enum {
566
637
  line-height: 2;
567
- border-color: var(--border-color);
568
- border-radius: var(--border-color);
638
+ border-color: var(--border-primary);
639
+ border-radius: var(--border-radius);
569
640
  font-family: var(--code-font-family);
570
- color: var(--text-color-secondary);
641
+ color: var(--text-secondary);
571
642
  border-width: 1px;
572
643
  }
573
644
  `;