@redocly/portal-plugin-async-api 1.0.201 → 1.0.203

package/src/styles.tsx

@@ -5,642 +5,47 @@ export const StylesProvider = styled.div`
   padding: 0 var(--spacing-xl);
   max-width: var(--layout-stacked-large-max-width);
 
-  .asyncapi {
+  .aui-root {
     font-family: var(--font-family-base);
     font-size: var(--font-size-base);
     line-height: var(--line-height-base);
     font-weight: var(--font-weight-regular);
     background: var(--bg-color);
     color: var(--text-color-primary);
+    margin: 0 -2rem;
   }
 
-  .asyncapi button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 5px;
-    outline: none;
-    margin: var(--button-margin);
-    cursor: pointer;
-    line-height: 1;
-
-    color: var(--button-color);
-    background-color: var(--button-bg-color);
-    border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
-    border-radius: var(--button-border-radius);
-
-    font-size: var(--button-font-size);
-    font-family: var(--button-font-family);
-    font-weight: var(--button-font-weight);
-    box-shadow: var(--button-box-shadow);
-
-    &:hover {
-      box-shadow: var(--button-hover-box-shadow);
-      background-color: var(--button-hover-background-color);
-      color: var(--button-hover-color);
-      border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
-    }
-
-    &:active {
-      box-shadow: var(--button-active-box-shadow);
-      background-color: var(--button-bg-color-active);
-      border: var(--button-border-width) var(--button-border-style)
-        var(--button-active-border-color);
-    }
-  }
-
-  .asyncapi__info-header-main > h1 {
-    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
-    font-size: var(--h1-font-size);
-    font-weight: var(--h1-font-weight);
-    font-family: var(--h1-font-family);
-    line-height: var(--h1-line-height);
-    color: var(--h1-text-color);
-    text-transform: var(--h1-text-transform);
-  }
-
-  .asyncapi__markdown > div > p > code {
-    font-weight: var(--font-weight-regular);
-    font-size: var(--inline-code-font-size);
-    font-family: var(--code-font-family);
-    border-radius: var(--inline-code-border-radius);
-    background-color: var(--inline-code-bg-color);
-    color: var(--inline-code-text-color);
-  }
-
-  .asyncapi__table {
-    font-size: var(--font-size-base);
-  }
-
-  .asyncapi__toggle-arrow {
-    content: none;
-    width: 6px;
-    height: 10px;
-    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");
-    background: var(--text-color-primary);
-  }
-
-  .asyncapi__toggle-button {
-    display: flex;
-    padding-left: var(--spacing-xs);
-
-    --button-hover-background-color: none;
-    --button-hover-border-color: none;
-    --button-hover-box-shadow: none;
-
-    --button-bg-color-active: none;
-    --button-active-border-color: none;
-    --button-active-box-shadow: none;
-  }
-
-  .asyncapi__toggle-header {
-    justify-content: start;
-  }
-
-  .asyncapi__toggle-header-content {
-    flex-grow: 0;
-  }
-
-  .asyncapi__table--nested {
-    font-size: var(--font-size-base);
-    border-radius: var(--border-radius);
-    border: solid 1px var(--md-table-border-color);
-    background-color: var(--md-table-stripe-bg-color);
-  }
-
-  .asyncapi__table-header {
-    font-weight: var(--md-table-head-font-weight);
-    color: var(--md-table-head-text-color);
-    background: var(--md-table-head-bg-color);
-  }
-
-  .asyncapi__table-header--nested {
-    color: var(--md-table-head-text-color);
-    border-bottom: solid 1px var(--md-table-border-color);
-    font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-sm);
-  }
-
-  .asyncapi__table-header-title--nested {
-    color: var(--md-table-head-text-color);
-  }
-
-  .asyncapi__table-header-title--nested > td {
-    border-bottom: solid 1px var(--md-table-border-color);
-    font-size: var(--font-size-sm);
-    color: var(--md-table-head-text-color);
-  }
-
-  .asyncapi__table-header-column--nested {
-    border-bottom: solid 1px var(--md-table-border-color);
-  }
-
-  .asyncapi__table-body {
-    background-color: var(--md-table-stripe-bg-color);
-    color: var(--md-table-cell-text-color);
-  }
-
-  .asyncapi__table-body--nested {
-    color: var(--md-table-cell-text-color);
-  }
-
-  .asyncapi__table-row--nested {
-    color: var(--md-table-cell-text-color);
-    border-bottom: solid 1px var(--md-table-border-color);
-  }
-
-  .asyncapi__table-cell {
-    border-bottom: 1px solid var(--md-table-border-color);
-  }
-
-  .asyncapi__table-cell--nested {
-    font-size: var(--font-size-sm);
-    border-bottom: solid 1px var(--md-table-border-color);
-  }
-
-  .asyncapi__tree-leaf:before {
-    border-left: var(--border-color-primary) 2px solid;
-    border-bottom: var(--border-color-primary) 2px solid;
-    border-radius: 0 0 0 var(--border-radius);
-  }
-
-  .asyncapi__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-wrap: nowrap;
-
-    padding: var(--tag-padding);
-    margin: var(--tag-margin);
-    gap: var(--tag-gap);
-
-    font-size: var(--tag-font-size);
-    font-family: var(--tag-font-family);
-    font-weight: var(--tag-font-weight);
-    line-height: var(--tag-line-height);
-    box-shadow: var(--tag-box-shadow);
-
-    color: var(--tag-color);
-    background-color: var(--tag-bg-color);
-    border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
-    border-radius: var(--tag-border-radius);
-  }
-
-  .asyncapi__badge--publish,
-  .asyncapi__server-header-protocol {
-    --tag-color: var(--color-success-base);
-    --tag-bg-color: var(--color-success-bg);
-    --tag-border-color: var(--color-success-border);
-  }
-
-  .asyncapi__badge--subscribe,
-  .asyncapi__server-header-stage {
-    --tag-color: var(--color-info-base);
-    --tag-bg-color: var(--color-info-bg);
-    --tag-border-color: var(--color-info-border);
-  }
-
-  .asyncapi__badge--deprecated {
-    --tag-color: var(--color-warning-base);
-    --tag-bg-color: var(--color-warning-bg);
-    --tag-border-color: var(--color-warning-border);
-  }
-
-  .asyncapi__badge--required {
-    --tag-color: var(--color-turquoise-6);
-    --tag-bg-color: var(--color-turquoise-1);
-    --tag-border-color: var(--color-turquoise-3);
-  }
-
-  .asyncapi__badge--generated {
-    --tag-color: var(--color-blue-6);
-    --tag-bg-color: var(--color-blue-1);
-    --tag-border-color: var(--color-blue-3);
-  }
-
-  .asyncapi__tag {
-    border-radius: var(--border-radius);
-    background-color: var(--bg-color);
-    font-size: var(--font-size-sm);
-    color: var(--text-color-secondary);
-  }
-
-  .asyncapi__code {
-    border: solid 1px var(--border-color-primary);
-    border-radius: var(--border-radius);
-    background: var(--bg-color);
-  }
-
-  .asyncapi__code-header {
-    border-bottom: 1px solid var(--border-color-primary);
-    font-weight: var(--md-table-head-font-weight);
-    background: var(--md-table-head-bg-color);
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-  }
-
-  .asyncapi__code-header > h4 {
-    font-weight: var(--h4-font-weight);
-    font-size: var(--font-size-base);
-    color: var(--md-table-head-text-color);
-  }
-
-  .asyncapi__code-pre {
-    font-size: var(--font-size-base);
-    background: var(--md-table-stripe-bg-color);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-  }
-
-  .asyncapi__code-body {
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
-  }
-
-  .asyncapi__info {
-    background: var(--bg-color);
-    border-radius: var(--border-radius);
-    box-shadow: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .asyncapi__collapse-button,
-  .asyncapi__info-list > li {
-    --button-color: var(--text-color-primary);
-    --button-bg-color: var(--button-bg-color-secondary);
-    --button-border-color: var(--button-bg-color-secondary);
-
-    --button-hover-background-color: var(--button-bg-color-secondary-hover);
-    --button-hover-border-color: var(--border-color-primary);
-
-    --button-bg-color-active: var(--button-bg-color-secondary-pressed);
-    --button-active-border-color: var(--button-bg-color-secondary-pressed);
-
-    --button-disabled-color: var(--button-content-color-disabled);
-    --button-disabled-background-color: var(--bg-color-tonal);
-    --button-disabled-border-color: var(--border-color-secondary);
-  }
-
-  .asyncapi__info-list > li {
-    border-radius: var(--button-border-radius);
-    font-weight: var(--button-font-weight);
-    box-shadow: var(--button-box-shadow);
-    color: var(--button-color);
-    border: 1px solid var(--button-border-color);
-    background-color: var(--button-bg-color);
-    font-weight: var(--button-font-weight);
-  }
-  .asyncapi__info-list > li:hover {
-    color: var(--button-color);
-    border: 1px solid var(--button-hover-border-color);
-    background-color: var(--button-hover-background-color);
-    color: var(--button-hover-color);
-  }
-  .asyncapi__info-list > li a {
-    color: var(--button-color);
-  }
-  .asyncapi__info-list > li:hover,
-  .asyncapi__info-list > li:hover a {
-    color: var(--button-color);
-  }
-
-  .asyncapi__anchor-icon {
-    content: none;
-    width: 12px;
-    height: 12px;
-    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIwNSAtMjg5KSI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMCAxMDApIj4KPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAyIDE4NikiPgo8cG9seWdvbiBwb2ludHM9IjAgMCAyNCAwIDI0IDI0IDAgMjQiLz4KPHBhdGggZD0ibTE5IDE5aC0xNHYtMTRoN3YtMmgtN2MtMS4xMSAwLTIgMC45LTIgMnYxNGMwIDEuMSAwLjg5IDIgMiAyaDE0YzEuMSAwIDItMC45IDItMnYtN2gtMnY3em0tNS0xNnYyaDMuNTlsLTkuODMgOS44MyAxLjQxIDEuNDEgOS44My05LjgzdjMuNTloMnYtN2gtN3oiIGZpbGw9IiMwYjc0ZGUiLz4KPC9nPgo8L2c+CjwvZz4KPC9nPgo8L3N2Zz4KCg==');
-    background: var(--button-color);
-  }
-
-  .asyncapi__info-list > li:hover .asyncapi__anchor-icon {
-    filter: none;
-    background: var(--button-color);
-  }
-
-  .asyncapi__messages > div {
-    border: solid 1px var(--border-color-primary);
-    box-shadow: none;
-    font-size: var(--panel-heading-font-size-local);
-    background-color: var(--panel-heading-bg-color);
-    border-radius: var(--panel-border-radius);
-    padding: var(--spacing-base);
-  }
-
-  .asyncapi__message {
-    border-radius: var(--border-radius);
-    background: var(--bg-color);
-    border: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__message-header-title > h3 {
-    color: var(--text-color-primary);
-    padding: var(--panel-response-heading-padding);
-    padding-right: 0;
-  }
-
-  .asyncapi__message-header-title {
-    background-color: var(--bg-color);
-  }
-
-  .asyncapi__message-header-summary {
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-regular);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__message-description {
-    font-size: var(--font-size-base);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__message-headers-header {
-    background-color: var(--md-table-head-bg-color);
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__message-payload-oneOf-header {
-    background-color: var(--md-table-head-bg-color);
-    color: var(--text-color-primary);
-  }
-
-  .asyncapi__message-payload-oneOf-list-item .asyncapi__message-payload {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    background-color: var(--bg-color);
-  }
-
-  .asyncapi__message-payload-anyOf-header {
-    background-color: var(--md-table-head-bg-color);
-    color: var(--text-color-primary);
-  }
-
-  .asyncapi__message-payload-anyOf-list-item .asyncapi__message-payload {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    background-color: var(--bg-color);
-  }
-
-  .asyncapi__message-payload-header {
-    background-color: var(--md-table-head-bg-color);
+  .aui-root .text-gray-700,
+  .aui-root .prose {
     color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
   }
 
-  .asyncapi__message-tags-header {
-    color: var(--text-color-primary);
-  }
-
-  .asyncapi__schemas > div {
-    border: solid 1px var(--border-color-primary);
-    box-shadow: none;
-    font-size: var(--panel-heading-font-size-local);
-    background-color: var(--panel-heading-bg-color);
-    padding: var(--spacing-base);
-    border-radius: var(--panel-border-radius);
-  }
-
-  .asyncapi__schema {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    background-color: var(--bg-color);
-  }
-
-  .asyncapi__schema-header-title {
-    font-size: var(--font-size-base);
-  }
-
-  .asyncapi__schema-example-header {
-    display: flex;
-    gap: var(--spacing-xxs);
-  }
-
-  .asyncapi__schema-table {
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__security {
+  .aui-root .bg-white,
+  .aui-root .bg-gray-100,
+  .aui-root .bg-gray-200 {
     background: var(--bg-color);
-    border-radius: var(--border-radius);
-  }
-
-  .asyncapi__servers > div {
-    border: solid 1px var(--border-color-primary);
-    box-shadow: none;
-    font-size: var(--panel-heading-font-size-local);
-    background-color: var(--panel-heading-bg-color);
-    border-radius: var(--panel-border-radius);
-    padding: var(--spacing-base);
-  }
-
-  .asyncapi__server-description {
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-variables-header {
-    background-color: var(--bg-color);
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-variables-table {
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-expand-icon:before {
-    color: var(--text-color-secondary);
-    font-size: var(--font-size-sm);
-  }
-
-  .asyncapi__server-security-header {
-    background-color: var(--bg-color);
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-security-table {
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-security-flows-list a {
-    text-decoration: var(--link-decoration);
-    color: var(--link-color-primary);
-    font-weight: var(--link-font-weight);
-  }
-
-  .asyncapi__server-security-flows-list a:visited {
-    color: var(--link-color-visited);
-    text-decoration: var(--link-visited-decoration);
-  }
-
-  .asyncapi__server-security-flow {
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color-primary);
-    border-radius: var(--border-radius);
-  }
-
-  .asyncapi__server-security-flows-table-cell {
-    border-bottom: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__server-security-scope {
-    font-size: var(--tag-font-size);
-    font-family: var(--tag-font-family);
-    font-weight: var(--tag-font-weight);
-    line-height: var(--tag-line-height);
-    border-radius: var(--tag-border-radius);
-    background: var(--tag-bg-color);
-    color: var(--text-color-primary);
-    padding: 0 var(--spacing-base);
-    background-color: var(--color-http-post);
-  }
-
-  .asyncapi__channels-toggle--expanded > .asyncapi__toggle-header,
-  .asyncapi__servers-toggle--expanded > .asyncapi__toggle-header,
-  .asyncapi__schemas-toggle--expanded > .asyncapi__toggle-header,
-  .asyncapi__messages-toggle--expanded > .asyncapi__toggle-header {
-    padding-bottom: var(--spacing-base);
-  }
-
-  .asyncapi__schema,
-  .asyncapi__message,
-  .asyncapi__channel,
-  .asyncapi__server {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    background-color: var(--bg-color);
-    overflow: hidden;
   }
 
-  .asyncapi__channel-header,
-  .asyncapi__schema-header,
-  .asyncapi__server-header {
-    padding: var(--panel-response-heading-padding);
+  .aui-root div.border {
+    border: solid 1px;
+    border-color: var(--border-color-primary);
   }
 
-  .asyncapi__message-header {
-    background-color: var(--bg-color);
+  .aui-root .rounded {
+    border-radius: var(--button-border-radius);
   }
 
-  .asyncapi__channels > div {
-    background: var(--bg-color);
-    border-radius: var(--panel-border-radius);
+  .aui-root .shadow {
     box-shadow: none;
-    border: 1px solid var(--border-color-primary);
-    padding: var(--spacing-base);
-  }
-
-  .asyncapi__channel-header > h3 {
-    color: var(--text-color-primary);
-    font-size: var(--font-size-base);
-  }
-
-  .asyncapi__channel-header-title {
-    font-size: var(--font-size-base);
-  }
-
-  .asyncapi__channel-operations-header {
-    color: var(--text-color-primary);
-    background-color: var(background-color);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__channel-operations-header-oneOf {
-    border-top: solid 1px var(--border-color-primary);
   }
 
-  .asyncapi__channel-operations-list .asyncapi__messages-list-item .asyncapi__message {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    background-color: var(--bg-color);
-  }
-
-  .asyncapi__channel-operation-message > .asyncapi__bindings {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__channel-operation-message-header {
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__channel-operation-oneOf-subscribe > .asyncapi__bindings {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-    margin: 12px;
-  }
-
-  .asyncapi__channel-operation-oneOf-subscribe-header {
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__channel-operation-oneOf-publish > .asyncapi__bindings {
-    border-radius: var(--border-radius);
-    border: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__channel-operation-oneOf-publish-header {
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__bindings-header {
-    color: var(--text-color-primary);
-  }
-  .asyncapi__bindings-header > h4 {
-    background-color: var(--md-table-head-bg-color);
-    color: var(--text-color-primary);
-    border-top: solid 1px var(--border-color-primary);
-    border-bottom: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__binding-protocol {
-    background-color: var(--color-http-get);
-  }
-
-  .asyncapi__binding-table {
-    border-top: solid 1px var(--border-color-primary);
-  }
-  .asyncapi__binding-field-name {
-    font-weight: bold;
-  }
-
-  .asyncapi__channel-parameters-header {
-    color: var(--text-color-primary);
-    background-color: var(--md-table-head-bg-color);
-    border-top: solid 1px var(--border-color-primary);
-  }
-
-  .asyncapi__error {
-    background-color: var(--bg-color);
-    border-left: 6px solid #f44336;
-    border-radius: var(--border-radius);
-    color: var(--text-color-secondary);
-    font-size: var(--font-size-base);
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
-  }
-
-  .asyncapi__error-header {
-    box-shadow: inset 0 -1px 0 0 rgba(115, 121, 128, 0.15);
-    font-weight: var(--font-weight-bold);
-  }
-
-  .asyncapi__error-body-pre {
-    background-color: var(--bg-color);
-    color: var(--text-color-secondary);
-    border-bottom-right-radius: var(--border-radius);
-    font-size: var(--font-size-sm);
-  }
-
-  .asyncapi__enum {
-    line-height: 2;
-    border-color: var(--border-color-primary);
-    border-radius: var(--border-radius);
-    font-family: var(--code-font-family);
-    color: var(--text-color-secondary);
-    border-width: 1px;
+  .aui-root .text-4xl {
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
+    font-size: var(--h1-font-size);
+    font-weight: var(--h1-font-weight);
+    font-family: var(--h1-font-family);
+    line-height: var(--h1-line-height);
+    color: var(--h1-text-color);
+    text-transform: var(--h1-text-transform);
   }
 `;