rapidoc 11.0.1 → 12.1.0

package/src/styles/flow-styles.js

@@ -0,0 +1,248 @@
+import { css } from "lit";
+
+/**
+ * Styles for the workflow diagram drawn by utils/arazzo/svg.js. Shared by <rapi-flow> and by
+ * build-time pages (@rapidoc/prerender `getFlowCss()`), so selectors are plain classes, not :host.
+ */
+export default css`
+  .rf-svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-description);
+    overflow: visible;
+  }
+  .rf-node rect {
+    fill: var(--card);
+    stroke: var(--border);
+    stroke-width: 1.25;
+  }
+  .rf-io rect {
+    fill: var(--muted);
+  }
+  .rf-title {
+    fill: color-mix(in srgb, var(--primary) 65%, var(--foreground));
+    font-weight: 600;
+    font-size: var(--font-size-regular);
+  }
+  .rf-sub {
+    fill: var(--muted-foreground);
+  }
+  .rf-io-title,
+  .rf-criteria {
+    fill: var(--muted-foreground);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .rf-criteria {
+    text-transform: none;
+    letter-spacing: normal;
+  }
+  .rf-path,
+  .rf-method,
+  .rf-unresolved {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-small);
+  }
+  .rf-path {
+    fill: var(--foreground);
+  }
+  .rf-method {
+    font-weight: 700;
+    fill: var(--method-default);
+  }
+  .rf-method-get { fill: var(--method-get); }
+  .rf-method-post { fill: var(--method-post); }
+  .rf-method-put { fill: var(--method-put); }
+  .rf-method-delete { fill: var(--method-delete); }
+  .rf-method-patch { fill: var(--method-patch); }
+  .rf-method-head { fill: var(--method-head); }
+  .rf-method-options { fill: var(--method-options); }
+  .rf-method-trace { fill: var(--method-trace); }
+  .rf-method-query { fill: var(--method-query); }
+  .rf-unresolved {
+    fill: var(--muted-foreground);
+    font-style: italic;
+  }
+  .rf-jump {
+    cursor: pointer;
+    outline: none;
+  }
+  .rf-jump:hover .rf-step-name,
+  .rf-tag.rf-jump:hover,
+  .rf-tag.rf-jump:focus-visible {
+    text-decoration: underline;
+  }
+  .rf-clickable {
+    cursor: pointer;
+    outline: none;
+  }
+  .rf-clickable:hover rect,
+  .rf-clickable:focus-visible rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-selected rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-seq {
+    fill: none;
+    stroke: var(--muted-foreground);
+    stroke-width: 1.25;
+  }
+  .rf-head-seq {
+    fill: var(--muted-foreground);
+  }
+  .rf-data {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: 1.5;
+    stroke-dasharray: 5 4;
+  }
+  .rf-head-data {
+    fill: var(--primary);
+  }
+  .rf-data.rf-to-output {
+    stroke: var(--muted-foreground);
+  }
+  .rf-head-output {
+    fill: var(--muted-foreground);
+  }
+  .rf-sep {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 1;
+  }
+  .rf-row {
+    font-size: var(--font-size-small);
+  }
+  .rf-in-name,
+  .rf-out-name,
+  .rf-bind-name,
+  .rf-bind-val,
+  .rf-act-when,
+  .rf-act-then {
+    fill: var(--foreground);
+  }
+  .rf-bind-name,
+  .rf-bind-val,
+  .rf-kw,
+  .rf-in-type,
+  .rf-in-default,
+  .rf-in-enum {
+    font-family: var(--font-mono);
+  }
+  .rf-in-type,
+  .rf-in-default,
+  .rf-in-enum,
+  .rf-out-from,
+  .rf-out-kind,
+  .rf-act-name,
+  .rf-more,
+  .rf-tag,
+  .rf-sec-title {
+    fill: var(--muted-foreground);
+  }
+  .rf-kw,
+  .rf-out-kind {
+    font-weight: 600;
+  }
+  /* Step names are the step color wherever they appear: box titles, value lines, outputs */
+  /* --primary mixed toward the text color keeps the hue and reads at 4.5:1 on light cards */
+  .rf-step-name,
+  .rf-kw-step,
+  .rf-tag.rf-out-step,
+  .rf-row.rf-linked .rf-out-name {
+    fill: color-mix(in srgb, var(--primary) 65%, var(--foreground));
+  }
+  .rf-tag.rf-out-step {
+    font-size: var(--font-size-small);
+    font-weight: 600;
+  }
+  /* Hover linking (<rapi-flow>): a step, its lines and its rows in the outputs box */
+  .rf-step.rf-linked rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+  }
+  .rf-data.rf-linked {
+    stroke-width: 2.5;
+  }
+  /* A run in <rapi-flow>: the step whose request is in flight */
+  .rf-step.rf-running rect {
+    stroke: var(--primary);
+    stroke-width: 2;
+    stroke-dasharray: 6 4;
+    animation: rf-march 1s linear infinite;
+  }
+  @keyframes rf-march {
+    to {
+      stroke-dashoffset: -20;
+    }
+  }
+  .rf-io .rf-sep {
+    stroke: var(--muted-foreground);
+    stroke-opacity: 0.35;
+  }
+  .rf-out-from {
+    font-family: var(--font-mono);
+  }
+  .rf-kw-input {
+    fill: var(--blue);
+  }
+  .rf-kw-value,
+  .rf-kw-expression {
+    fill: var(--muted-foreground);
+  }
+  .rf-req {
+    fill: var(--destructive);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+  }
+  .rf-more,
+  .rf-tag,
+  .rf-sec-title {
+    font-size: var(--font-size-xs);
+  }
+  .rf-sec-title {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .rf-check-type {
+    fill: var(--muted-foreground);
+  }
+  .rf-check-type,
+  .rf-check {
+    font-family: var(--font-mono);
+  }
+  .rf-check {
+    fill: var(--foreground);
+  }
+  .rf-data-label rect {
+    fill: var(--background);
+    stroke: var(--primary);
+    stroke-width: 1;
+  }
+  .rf-data-label text {
+    fill: var(--foreground);
+    font-size: var(--font-size-xs);
+  }
+  .rf-goto {
+    fill: none;
+    stroke-width: 1.5;
+  }
+  .rf-goto.rf-success {
+    stroke: var(--green);
+  }
+  .rf-goto.rf-failure {
+    stroke: var(--destructive);
+  }
+  .rf-head-success {
+    fill: var(--green);
+  }
+  .rf-head-failure {
+    fill: var(--destructive);
+  }
+`;

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;
+  }
+`;