@redocly/portal-plugin-async-api 0.0.0-react18-20231120182601

package/src/styles.tsx

@@ -0,0 +1,646 @@
+import styled from 'styled-components';
+
+export const StylesProvider = styled.div`
+  margin: auto;
+  padding: 0 var(--spacing-xl);
+  max-width: var(--layout-stacked-large-max-width);
+
+  .asyncapi {
+    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(--background-color);
+    color: var(--text-base);
+  }
+
+  .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-background-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-active-background-color);
+      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, var(--h-font-size));
+    font-weight: var(--h1-font-weight, var(--h-font-weight));
+    font-family: var(--h1-font-family, var(--h-font-family));
+    line-height: var(--h1-line-height, var(--h-line-height));
+    color: var(--h1-text-color, var(--h-text-color));
+    text-transform: var(--h1-text-transform, var(--h-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-background-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-base);
+  }
+
+  .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-active-background-color: 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-background-color);
+  }
+
+  .asyncapi__table-header {
+    font-weight: var(--md-table-head-font-weight);
+    color: var(--md-table-head-text-color);
+    background: var(--md-table-head-background-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-background-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-primary) 2px solid;
+    border-bottom: var(--border-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-background-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-background-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-background-color: var(--color-info-bg);
+    --tag-border-color: var(--color-info-border);
+  }
+
+  .asyncapi__badge--deprecated {
+    --tag-color: var(--color-warning-base);
+    --tag-background-color: var(--color-warning-bg);
+    --tag-border-color: var(--color-warning-border);
+  }
+
+  .asyncapi__badge--required {
+    --tag-color: var(--color-cyan-6);
+    --tag-background-color: var(--color-cyan-1);
+    --tag-border-color: var(--color-cyan-3);
+  }
+
+  .asyncapi__badge--generated {
+    --tag-color: var(--color-geekblue-6);
+    --tag-background-color: var(--color-geekblue-1);
+    --tag-border-color: var(--color-geekblue-3);
+  }
+
+  .asyncapi__tag {
+    border-radius: var(--border-radius);
+    background-color: var(--background-color);
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+  }
+
+  .asyncapi__code {
+    border: solid 1px var(--border-primary);
+    border-radius: var(--border-radius);
+    background: var(--background-color);
+  }
+
+  .asyncapi__code-header {
+    border-bottom: 1px solid var(--border-primary);
+    font-weight: var(--md-table-head-font-weight);
+    background: var(--md-table-head-background-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-background-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(--background-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-primary);
+    --button-background-color: var(--bg-overlay);
+    --button-border-color: var(--bg-overlay);
+
+    --button-hover-background-color: var(--bg-overlay);
+    --button-hover-border-color: var(--border-primary);
+
+    --button-active-background-color: var(--bg-overlay);
+    --button-active-border-color: var(--button-color);
+
+    --button-disabled-color: var(--text-placeholder);
+    --button-disabled-background-color: var(--bg-raised);
+    --button-disabled-border-color: var(--border-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-background-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-primary);
+    box-shadow: none;
+    font-size: var(--panel-heading-font-size-local);
+    background-color: var(--panel-heading-background-color);
+    border-radius: var(--panel-border-radius);
+    padding: var(--spacing-base);
+  }
+
+  .asyncapi__message {
+    border-radius: var(--border-radius);
+    background: var(--background-color);
+    border: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__message-header-title > h3 {
+    color: var(--text-primary);
+    padding: var(--panel-response-heading-padding);
+    padding-right: 0;
+  }
+
+  .asyncapi__message-header-title {
+    background-color: var(--background-color);
+  }
+
+  .asyncapi__message-header-summary {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__message-description {
+    font-size: var(--font-size-base);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__message-headers-header {
+    background-color: var(--md-table-head-background-color);
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__message-payload-oneOf-header {
+    background-color: var(--md-table-head-background-color);
+    color: var(--text-primary);
+  }
+
+  .asyncapi__message-payload-oneOf-list-item .asyncapi__message-payload {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+    background-color: var(--background-color);
+  }
+
+  .asyncapi__message-payload-anyOf-header {
+    background-color: var(--md-table-head-background-color);
+    color: var(--text-primary);
+  }
+
+  .asyncapi__message-payload-anyOf-list-item .asyncapi__message-payload {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+    background-color: var(--background-color);
+  }
+
+  .asyncapi__message-payload-header {
+    background-color: var(--md-table-head-background-color);
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__message-tags-header {
+    color: var(--text-primary);
+  }
+
+  .asyncapi__schemas > div {
+    border: solid 1px var(--border-primary);
+    box-shadow: none;
+    font-size: var(--panel-heading-font-size-local);
+    background-color: var(--panel-heading-background-color);
+    padding: var(--spacing-base);
+    border-radius: var(--panel-border-radius);
+  }
+
+  .asyncapi__schema {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+    background-color: var(--background-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-primary);
+  }
+
+  .asyncapi__security {
+    background: var(--background-color);
+    border-radius: var(--border-radius);
+  }
+
+  .asyncapi__servers > div {
+    border: solid 1px var(--border-primary);
+    box-shadow: none;
+    font-size: var(--panel-heading-font-size-local);
+    background-color: var(--panel-heading-background-color);
+    border-radius: var(--panel-border-radius);
+    padding: var(--spacing-base);
+  }
+
+  .asyncapi__server-description {
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__server-variables-header {
+    background-color: var(--background-color);
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__server-variables-table {
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__server-expand-icon:before {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+  }
+
+  .asyncapi__server-security-header {
+    background-color: var(--background-color);
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__server-security-table {
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__server-security-flows-list a {
+    text-decoration: var(--link-decoration);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+  }
+
+  .asyncapi__server-security-flows-list a:visited {
+    color: var(--link-visited-text-color);
+    text-decoration: var(--link-visited-decoration);
+  }
+
+  .asyncapi__server-security-flow {
+    background-color: var(--background-color);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--border-radius);
+  }
+
+  .asyncapi__server-security-flows-table-cell {
+    border-bottom: solid 1px var(--border-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-background-color);
+    color: var(--text-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-primary);
+    background-color: var(--background-color);
+    overflow: hidden;
+  }
+
+  .asyncapi__channel-header,
+  .asyncapi__schema-header,
+  .asyncapi__server-header {
+    padding: var(--panel-response-heading-padding);
+  }
+
+  .asyncapi__message-header {
+    background-color: var(--background-color);
+  }
+
+  .asyncapi__channels > div {
+    background: var(--background-color);
+    border-radius: var(--panel-border-radius);
+    box-shadow: none;
+    border: 1px solid var(--border-primary);
+    padding: var(--spacing-base);
+  }
+
+  .asyncapi__channel-header > h3 {
+    color: var(--text-primary);
+    font-size: var(--font-size-base);
+  }
+
+  .asyncapi__channel-header-title {
+    font-size: var(--font-size-base);
+  }
+
+  .asyncapi__channel-operations-header {
+    color: var(--text-primary);
+    background-color: var(background-color);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operations-header-oneOf {
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operations-list .asyncapi__messages-list-item .asyncapi__message {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+    background-color: var(--background-color);
+  }
+
+  .asyncapi__channel-operation-message > .asyncapi__bindings {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operation-message-header {
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operation-oneOf-subscribe > .asyncapi__bindings {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+    margin: 12px;
+  }
+
+  .asyncapi__channel-operation-oneOf-subscribe-header {
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operation-oneOf-publish > .asyncapi__bindings {
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__channel-operation-oneOf-publish-header {
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__bindings-header {
+    color: var(--text-primary);
+  }
+  .asyncapi__bindings-header > h4 {
+    background-color: var(--md-table-head-background-color);
+    color: var(--text-primary);
+    border-top: solid 1px var(--border-primary);
+    border-bottom: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__binding-protocol {
+    background-color: var(--color-http-get);
+  }
+
+  .asyncapi__binding-table {
+    border-top: solid 1px var(--border-primary);
+  }
+  .asyncapi__binding-field-name {
+    font-weight: bold;
+  }
+
+  .asyncapi__channel-parameters-header {
+    color: var(--text-primary);
+    background-color: var(--md-table-head-background-color);
+    border-top: solid 1px var(--border-primary);
+  }
+
+  .asyncapi__error {
+    background-color: var(--background-color);
+    border-left: 6px solid #f44336;
+    border-radius: var(--border-radius);
+    color: var(--text-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(--background-color);
+    color: var(--text-secondary);
+    border-bottom-right-radius: var(--border-radius);
+    font-size: var(--font-size-sm);
+  }
+
+  .asyncapi__enum {
+    line-height: 2;
+    border-color: var(--border-primary);
+    border-radius: var(--border-radius);
+    font-family: var(--code-font-family);
+    color: var(--text-secondary);
+    border-width: 1px;
+  }
+`;