rapidoc 11.0.0 → 12.0.0

package/src/styles/font-styles.js

@@ -0,0 +1,432 @@
+import { css } from "lit";
+
+export default css`
+  .hover-bg:hover {
+    background: var(--muted);
+  }
+  ::selection {
+    background: var(--selection-bg);
+    color: var(--selection-fg);
+  }
+  .regular-font {
+    font-family: var(--font-sans);
+  }
+  .mono-font {
+    font-family: var(--font-mono);
+  }
+  .title {
+    font-size: calc(var(--font-size-small) + 1.125rem);
+    font-weight: normal;
+    text-wrap: balance;
+  }
+  .sub-title {
+    font-size: var(--h3-font-size);
+    text-wrap: balance;
+  }
+  .req-res-title {
+    font-family: var(--font-sans);
+    font-size: calc(var(--font-size-small) + 0.25rem);
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    text-align: start;
+    text-wrap: balance;
+  }
+  .tiny-title {
+    font-size: calc(var(--font-size-small) + 1px);
+    font-weight: bold;
+  }
+  .regular-font-size {
+    font-size: var(--font-size-regular);
+  }
+  .small-font-size {
+    font-size: var(--font-size-small);
+  }
+  .upper {
+    text-transform: uppercase;
+  }
+  .primary-text {
+    color: var(--primary);
+  }
+  .bold-text {
+    font-weight: bold;
+  }
+  .gray-text {
+    color: var(--muted-foreground);
+  }
+  .red-text {
+    color: var(--destructive);
+  }
+  .blue-text {
+    color: var(--blue);
+  }
+  .multiline {
+    overflow: scroll;
+    max-height: var(--resp-area-height);
+    color: var(--muted-foreground);
+  }
+  .method-fg {
+    color: var(--method-default);
+  }
+  .method-fg.put {
+    color: var(--method-put);
+  }
+  .method-fg.post {
+    color: var(--method-post);
+  }
+  .method-fg.get {
+    color: var(--method-get);
+  }
+  .method-fg.delete {
+    color: var(--method-delete);
+  }
+  .method-fg.head {
+    color: var(--method-head);
+  }
+  .method-fg.patch {
+    color: var(--method-patch);
+  }
+  .method-fg.options {
+    color: var(--method-options);
+  }
+  .method-fg.trace {
+    color: var(--method-trace);
+  }
+  .method-fg.query {
+    color: var(--method-query);
+  }
+  .method-fg.copy {
+    color: var(--method-default);
+  }
+  .method-fg.purge {
+    color: var(--method-default);
+  }
+
+  /*
+   * Headings: one scale for RapiDoc's own headings (.rapidoc-heading) and headings rendered from
+   * markdown descriptions, so both line up with surrounding docs content. The custom properties and
+   * their defaults are defined in theme-tokens.js; override them on the element, e.g.
+   * rapi-doc { --h2-font-size: 1.8125rem; --heading-weight: 700; }
+   */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .rapidoc-heading:is(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--heading-font);
+    font-weight: var(--heading-weight);
+    line-height: var(--heading-line-height);
+    letter-spacing: var(--heading-letter-spacing);
+    color: var(--heading-color);
+    margin-block: var(--heading-margin-top) var(--heading-margin-bottom);
+    padding: 0;
+    text-wrap: balance;
+  }
+  h1,
+  h1.rapidoc-heading {
+    font-size: var(--h1-font-size);
+  }
+  h2,
+  h2.rapidoc-heading {
+    font-size: var(--h2-font-size);
+  }
+  h3,
+  h3.rapidoc-heading {
+    font-size: var(--h3-font-size);
+  }
+  h4,
+  h4.rapidoc-heading {
+    font-size: var(--h4-font-size);
+  }
+  h5,
+  h5.rapidoc-heading {
+    font-size: var(--h5-font-size);
+  }
+  h6,
+  h6.rapidoc-heading {
+    font-size: var(--h6-font-size);
+  }
+  :is(h1, h2, h3, h4, h5, h6):first-child,
+  .rapidoc-heading:is(h1, h2, h3, h4, h5, h6):first-child {
+    margin-block-start: 0;
+  }
+
+  /* Compact small-caps labels (Request, Response, Path parameters, ...) */
+  .rapidoc-heading.label-heading {
+    font-size: var(--label-heading-font-size);
+    font-weight: var(--heading-weight);
+    line-height: 1.4;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    margin-block: 16px 6px;
+  }
+  .rapidoc-heading.label-heading.req-res-title {
+    font-size: calc(var(--font-size-small) + 0.25rem);
+    margin-block: 0 0.5rem;
+  }
+  .rapidoc-heading.label-heading.tiny-title {
+    font-size: calc(var(--font-size-small) + 1px);
+    margin-block: 0 8px;
+  }
+  .table-title {
+    font-size: var(--font-size-small);
+    font-weight: 600;
+    vertical-align: middle;
+    margin: 12px 0 4px 0;
+  }
+  .table-title > .rapidoc-heading.label-heading {
+    margin: 0;
+  }
+  /* Keeps the heading outline complete for assistive tech without showing a duplicate title */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  p {
+    margin-block-start: 0.5em;
+  }
+  a {
+    color: var(--blue);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+
+  code,
+  pre {
+    margin: 0px;
+    font-family: var(--font-mono);
+    font-size: calc(var(--font-size-mono) - 1px);
+  }
+
+  .m-markdown,
+  .m-markdown-small {
+    display: block;
+    color: var(--foreground);
+    /* Long unbroken words (URL paths, ids, inline code) wrap instead of widening the page. */
+    overflow-wrap: anywhere;
+  }
+
+  .m-markdown p,
+  .m-markdown span {
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height);
+    color: inherit;
+  }
+  .m-markdown li {
+    font-size: var(--font-size-regular);
+    line-height: var(--line-height);
+    margin-block: 0.25em;
+    color: inherit;
+  }
+
+  .m-markdown-small p,
+  .m-markdown-small span {
+    font-size: var(--font-size-description);
+    line-height: calc(var(--font-size-description) + 6px);
+    color: inherit;
+  }
+  .m-markdown-small li {
+    font-size: var(--font-size-description);
+    line-height: calc(var(--font-size-description) + 8px);
+    margin-block: 3px;
+    color: inherit;
+  }
+
+  .m-markdown strong,
+  .m-markdown b,
+  .m-markdown-small strong,
+  .m-markdown-small b {
+    color: var(--foreground);
+    font-weight: 600;
+  }
+
+  .m-markdown h1,
+  .m-markdown h2,
+  .m-markdown h3,
+  .m-markdown h4,
+  .m-markdown h5,
+  .m-markdown h6,
+  .m-markdown-small h1,
+  .m-markdown-small h2,
+  .m-markdown-small h3,
+  .m-markdown-small h4,
+  .m-markdown-small h5,
+  .m-markdown-small h6 {
+    color: var(--foreground);
+  }
+
+  .m-markdown p:not(:first-child) {
+    margin-block-start: var(--paragraph-spacing);
+  }
+
+  .m-markdown-small p:not(:first-child) {
+    margin-block-start: 12px;
+  }
+  .m-markdown-small p:first-child {
+    margin-block-start: 0;
+  }
+
+  .m-markdown p,
+  .m-markdown-small p {
+    margin-block-end: 0;
+  }
+
+  .m-markdown code span {
+    font-size: var(--font-size-mono);
+  }
+
+  .m-markdown-small code,
+  .m-markdown code {
+    padding: 1px 6px;
+    border-radius: min(var(--radius), 0.5rem);
+    color: var(--foreground);
+    background-color: var(--muted);
+    font-size: calc(var(--font-size-mono));
+    line-height: 1.2;
+  }
+
+  .m-markdown-small code {
+    font-size: calc(var(--font-size-mono) - 1px);
+    padding: 1px 5px;
+  }
+
+  .m-markdown-small pre,
+  .m-markdown pre {
+    white-space: pre-wrap;
+    overflow-wrap: normal;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: min(var(--radius), 0.5rem);
+    border: 1px solid var(--input);
+  }
+
+  .m-markdown pre {
+    padding: 12px;
+    background: var(--code-bg);
+    color: var(--foreground);
+
+    & code {
+      border: none;
+      padding: 0;
+      background: transparent;
+      color: var(--foreground);
+    }
+  }
+
+  .m-markdown-small pre {
+    margin-top: 4px;
+    padding: 2px 4px;
+    background: var(--code-bg);
+    color: var(--card-foreground);
+
+    & code {
+      border: none;
+      padding: 0;
+      background: transparent;
+      color: var(--card-foreground);
+    }
+  }
+
+  .m-markdown ul,
+  .m-markdown ol {
+    padding-inline-start: 30px;
+  }
+
+  .m-markdown-small ul,
+  .m-markdown-small ol {
+    padding-inline-start: 20px;
+  }
+
+  .m-markdown-small a,
+  .m-markdown a {
+    color: var(--blue);
+  }
+
+  .m-markdown-small img,
+  .m-markdown img {
+    max-width: 100%;
+  }
+
+  /* Markdown table */
+
+  .m-markdown-small table,
+  .m-markdown table {
+    border-spacing: 0;
+    margin: 10px 0;
+    border-collapse: separate;
+    border: 1px solid var(--border);
+    border-radius: min(var(--radius), 0.5rem);
+    font-size: calc(var(--font-size-small) + 1px);
+    line-height: calc(var(--font-size-small) + 4px);
+    /* Wide tables scroll inside their own box instead of widening the page */
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .m-markdown-small table {
+    font-size: var(--font-size-small);
+    line-height: calc(var(--font-size-small) + 2px);
+    margin: 8px 0;
+  }
+
+  .m-markdown-small td,
+  .m-markdown-small th,
+  .m-markdown td,
+  .m-markdown th {
+    vertical-align: top;
+    border-top: 1px solid var(--border);
+    line-height: calc(var(--font-size-small) + 4px);
+  }
+
+  .m-markdown-small tr:first-child th,
+  .m-markdown tr:first-child th {
+    border-top: 0 none;
+  }
+
+  .m-markdown th,
+  .m-markdown td {
+    padding: 10px 12px;
+  }
+
+  .m-markdown-small th,
+  .m-markdown-small td {
+    padding: 8px 8px;
+  }
+
+  .m-markdown th,
+  .m-markdown-small th {
+    font-weight: 600;
+    background: var(--card);
+    vertical-align: middle;
+  }
+
+  .m-markdown-small table code,
+  .m-markdown table code {
+    font-size: calc(var(--font-size-mono) - 1px);
+  }
+
+  .m-markdown blockquote,
+  .m-markdown-small blockquote {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    border-inline-start: 3px solid var(--border);
+    padding: 6px 0 6px 6px;
+  }
+  .m-markdown hr {
+    border: 1px solid var(--border);
+  }
+`;

package/src/styles/info-styles.js

@@ -0,0 +1,36 @@
+import { css } from "lit";
+
+export default css`
+  #api-title .version {
+    display: inline-block;
+    vertical-align: middle;
+    margin-inline-start: 0.5em;
+    padding: 0.125em 0.5em;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--muted);
+    color: var(--muted-foreground);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-small);
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: normal;
+  }
+
+  #api-info {
+    font-size: calc(var(--font-size-regular) - 1px);
+    margin-top: 8px;
+  }
+
+  #api-info span:before {
+    content: '|';
+    display: inline-block;
+    opacity: 0.5;
+    width: 15px;
+    text-align: center;
+  }
+  #api-info span:first-child:before {
+    content: '';
+    width: 0px;
+  }
+`;