@scalar/api-reference 0.1.2 → 0.1.3

package/dist/types.d.ts

@@ -2,8 +2,8 @@ export type ReferenceProps = {
     documentName?: string;
     token?: string;
     username?: string;
-    isEditable: boolean;
-    showSidebar: boolean;
+    isEditable?: boolean;
+    showSidebar?: boolean;
     footerBelowSidebar?: boolean;
 };
 export type Security = {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/variables.css

@@ -0,0 +1,132 @@
+.scalar-api-reference,
+#headlessui-portal-root,
+.dark-mode {
+  /** Fonts */
+  --scalar-api-reference-font-sans: system-ui, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --scalar-api-reference-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono",
+    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --scalar-api-reference-sidebar-border-color: #000;
+  --scalar-api-reference-theme-background-1: #fff;
+  --scalar-api-reference-theme-background-2: #fafafa;
+  --scalar-api-reference-border-color: #d4d4d4;
+  --scalar-api-reference-border: 1px solid
+    var(--scalar-api-reference-border-color);
+  --scalar-api-reference-theme-button-1-color: #fff;
+  --scalar-api-reference-theme-button-1-hover: #ccc;
+  --scalar-api-reference-theme-button-1: red;
+  --scalar-api-reference-theme-color-1: #000;
+  --scalar-api-reference-theme-color-2: #a3a3a3;
+  --scalar-api-reference-theme-color-3: #666;
+  --scalar-api-reference-theme-color-ghost: #eee;
+  --scalar-api-reference-theme-error-color: red;
+  --scalar-api-reference-theme-font-size-4: 16px;
+  --scalar-api-reference-theme-header-height: 0;
+  --scalar-api-reference-rounded: 4px;
+  --scalar-api-reference-theme-semibold: 600;
+  --scalar-api-reference-theme-shadow-1: 0 0 4px rgba(0, 0, 0, 0.1);
+  --scalar-api-reference-theme-sidebar-width: 300px;
+  --scalar-api-reference-theme-small: 12px;
+  --scalar-api-reference-app-header-height: 100px;
+  --scalar-api-reference-col-width-1: 300px;
+  --scalar-api-reference-col-width-2: calc(50% - 150px);
+  --scalar-api-reference-col-width-3: calc(50% - 150px);
+  --scalar-api-reference-document-height: 100vh;
+  --scalar-api-reference-font-color: #000;
+  --scalar-api-reference-full-height: 100%;
+  --scalar-api-reference-sidebar-background-1: white;
+  --scalar-api-reference-sidebar-color-1: #000;
+  --scalar-api-reference-sidebar-color-2: #ccc;
+  --scalar-api-reference-sidebar-color-active: blue;
+  --scalar-api-reference-sidebar-item-hover-background: var(#ccc);
+  --scalar-api-reference-theme-background-3: #ccc;
+  --scalar-api-reference-theme-bold: 700;
+  --scalar-api-reference-border-width: 1px;
+  --scalar-api-reference-theme-color-accent: blue;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-heading-2: 24px;
+  --scalar-api-reference-theme-heading-4: 16px;
+  --scalar-api-reference-theme-micro: 10px;
+  --scalar-api-reference-theme-mini: 12px;
+  --scalar-api-reference-theme-paragraph: 16px;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-put-color: purple;
+  --scalar-api-reference-rounded-lg: 8px;
+  --scalar-api-reference-theme-regular: 14px;
+  --scalar-api-reference-theme-toc-width: 300px;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-put-color: purple;
+}
+
+/*
+.scalar-api-reference,
+#headlessui-portal-root,
+.dark-mode {
+  --scalar-api-reference-font-sans: var(--theme-font);
+  --scalar-api-reference-font-mono: var(--theme-font-code);
+
+  --scalar-api-reference-sidebar-border-color: var(--theme-border-color);
+  --scalar-api-reference-theme-background-1: var(--theme-background-1);
+  --scalar-api-reference-theme-background-2: var(--theme-background-2);
+  --scalar-api-reference-border-color: var(--theme-border-color);
+  --scalar-api-reference-border: var(--theme-border);
+  --scalar-api-reference-theme-button-1-color: var(--theme-button-1-color);
+  --scalar-api-reference-theme-button-1-hover: var(--theme-button-1-hover);
+  --scalar-api-reference-theme-button-1: var(--theme-button-1);
+  --scalar-api-reference-theme-color-1: var(--theme-color-1);
+  --scalar-api-reference-theme-color-2: var(--theme-color-2);
+  --scalar-api-reference-theme-color-3: var(--theme-color-3);
+  --scalar-api-reference-theme-color-ghost: var(--theme-color-ghost);
+  --scalar-api-reference-theme-error-color: var(--theme-error-color);
+  --scalar-api-reference-theme-font-size-4: var(--theme-font-size-4);
+  --scalar-api-reference-theme-header-height: var(--theme-header-height);
+  --scalar-api-reference-rounded: var(--theme-radius);
+  --scalar-api-reference-theme-semibold: var(--theme-semibold);
+  --scalar-api-reference-theme-shadow-1: var(--theme-shadow-1);
+  --scalar-api-reference-theme-sidebar-width: var(--theme-sidebar-width);
+  --scalar-api-reference-theme-small: var(--theme-small);
+  --scalar-api-reference-app-header-height: var(--app-header-height);
+  --scalar-api-reference-col-width-1: var(--col-width-1);
+  --scalar-api-reference-col-width-2: var(--col-width-2);
+  --scalar-api-reference-col-width-3: var(--col-width-3);
+  --scalar-api-reference-document-height: var(--document-height);
+  --scalar-api-reference-font-color: var(--theme-color-1);
+  --scalar-api-reference-full-height: var(--full-height);
+  --scalar-api-reference-sidebar-background-1: var(--theme-background-1);
+  --scalar-api-reference-sidebar-color-1: var(--theme-color-1);
+  --scalar-api-reference-sidebar-color-2: var(--theme-color-2);
+  --scalar-api-reference-sidebar-color-active: var(--theme-color-accent);
+  --scalar-api-reference-sidebar-item-hover-background: var(
+    --theme-background-2
+  );
+  --scalar-api-reference-theme-background-3: var(--theme-background-3);
+  --scalar-api-reference-theme-bold: var(--theme-bold);
+  --scalar-api-reference-border-width: var(--theme-border-width);
+  --scalar-api-reference-theme-color-accent: var(--theme-color-accent);
+  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
+  --scalar-api-reference-font-mono: var(--theme-font-code);
+  --scalar-api-reference-theme-get-color: var(--theme-get-color);
+  --scalar-api-reference-theme-heading-2: var(--theme-heading-2);
+  --scalar-api-reference-theme-heading-4: var(--theme-heading-4);
+  --scalar-api-reference-theme-micro: var(--theme-micro);
+  --scalar-api-reference-theme-mini: var(--theme-mini);
+  --scalar-api-reference-theme-paragraph: var(--theme-paragraph);
+  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
+  --scalar-api-reference-theme-post-color: var(--theme-post-color);
+  --scalar-api-reference-theme-put-color: var(--theme-put-color);
+  --scalar-api-reference-rounded-lg: var(--theme-radius-lg);
+  --scalar-api-reference-theme-regular: var(--theme-regular);
+  --scalar-api-reference-theme-toc-width: var(--theme-toc-width);
+  --scalar-api-reference-theme-post-color: var(--theme-post-color);
+  --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
+  --scalar-api-reference-theme-get-color: var(--theme-get-color);
+  --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
+  --scalar-api-reference-theme-put-color: var(--theme-put-color);
+} */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalar/api-reference",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "author": "Scalar",
   "license": "UNLICENSED",
   "engines": {
@@ -37,11 +37,11 @@
     "typographic-base": "1.0.4",
     "unified": "10.1.2",
     "xmldom": "0.6.0",
-    "@scalar/swagger-editor": "0.1.2",
-    "@scalar/use-tooltip": "0.1.2",
     "@scalar/api-client": "0.1.2",
+    "@scalar/swagger-editor": "0.1.2",
     "@scalar/use-clipboard": "0.1.2",
-    "@scalar/use-codemirror": "0.1.2"
+    "@scalar/use-codemirror": "0.1.2",
+    "@scalar/use-tooltip": "0.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "4.2.3",

package/src/assets/css/variables.css

@@ -2,14 +2,81 @@
 #headlessui-portal-root,
 .dark-mode {
   /** Fonts */
+  --scalar-api-reference-font-sans: system-ui, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --scalar-api-reference-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono",
+    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
+    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --scalar-api-reference-sidebar-border-color: #000;
+  --scalar-api-reference-theme-background-1: #fff;
+  --scalar-api-reference-theme-background-2: #fafafa;
+  --scalar-api-reference-border-color: #d4d4d4;
+  --scalar-api-reference-border: 1px solid
+    var(--scalar-api-reference-border-color);
+  --scalar-api-reference-theme-button-1-color: #fff;
+  --scalar-api-reference-theme-button-1-hover: #ccc;
+  --scalar-api-reference-theme-button-1: red;
+  --scalar-api-reference-theme-color-1: #000;
+  --scalar-api-reference-theme-color-2: #a3a3a3;
+  --scalar-api-reference-theme-color-3: #666;
+  --scalar-api-reference-theme-color-ghost: #eee;
+  --scalar-api-reference-theme-error-color: red;
+  --scalar-api-reference-theme-font-size-4: 16px;
+  --scalar-api-reference-theme-header-height: 0;
+  --scalar-api-reference-rounded: 4px;
+  --scalar-api-reference-theme-semibold: 600;
+  --scalar-api-reference-theme-shadow-1: 0 0 4px rgba(0, 0, 0, 0.1);
+  --scalar-api-reference-theme-sidebar-width: 300px;
+  --scalar-api-reference-theme-small: 12px;
+  --scalar-api-reference-app-header-height: 100px;
+  --scalar-api-reference-col-width-1: 300px;
+  --scalar-api-reference-col-width-2: calc(50% - 150px);
+  --scalar-api-reference-col-width-3: calc(50% - 150px);
+  --scalar-api-reference-document-height: 100vh;
+  --scalar-api-reference-font-color: #000;
+  --scalar-api-reference-full-height: 100%;
+  --scalar-api-reference-sidebar-background-1: white;
+  --scalar-api-reference-sidebar-color-1: #000;
+  --scalar-api-reference-sidebar-color-2: #ccc;
+  --scalar-api-reference-sidebar-color-active: blue;
+  --scalar-api-reference-sidebar-item-hover-background: var(#ccc);
+  --scalar-api-reference-theme-background-3: #ccc;
+  --scalar-api-reference-theme-bold: 700;
+  --scalar-api-reference-border-width: 1px;
+  --scalar-api-reference-theme-color-accent: blue;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-heading-2: 24px;
+  --scalar-api-reference-theme-heading-4: 16px;
+  --scalar-api-reference-theme-micro: 10px;
+  --scalar-api-reference-theme-mini: 12px;
+  --scalar-api-reference-theme-paragraph: 16px;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-put-color: purple;
+  --scalar-api-reference-rounded-lg: 8px;
+  --scalar-api-reference-theme-regular: 14px;
+  --scalar-api-reference-theme-toc-width: 300px;
+  --scalar-api-reference-theme-post-color: blue;
+  --scalar-api-reference-theme-patch-color: orange;
+  --scalar-api-reference-theme-delete-color: red;
+  --scalar-api-reference-theme-get-color: green;
+  --scalar-api-reference-theme-put-color: purple;
+}
+
+/*
+.scalar-api-reference,
+#headlessui-portal-root,
+.dark-mode {
   --scalar-api-reference-font-sans: var(--theme-font);
   --scalar-api-reference-font-mono: var(--theme-font-code);
 
   --scalar-api-reference-sidebar-border-color: var(--theme-border-color);
   --scalar-api-reference-theme-background-1: var(--theme-background-1);
   --scalar-api-reference-theme-background-2: var(--theme-background-2);
-  --scalar-api-reference-theme-border-color: var(--theme-border-color);
-  --scalar-api-reference-theme-border: var(--theme-border);
+  --scalar-api-reference-border-color: var(--theme-border-color);
+  --scalar-api-reference-border: var(--theme-border);
   --scalar-api-reference-theme-button-1-color: var(--theme-button-1-color);
   --scalar-api-reference-theme-button-1-hover: var(--theme-button-1-hover);
   --scalar-api-reference-theme-button-1: var(--theme-button-1);
@@ -20,7 +87,7 @@
   --scalar-api-reference-theme-error-color: var(--theme-error-color);
   --scalar-api-reference-theme-font-size-4: var(--theme-font-size-4);
   --scalar-api-reference-theme-header-height: var(--theme-header-height);
-  --scalar-api-reference-theme-radius: var(--theme-radius);
+  --scalar-api-reference-rounded: var(--theme-radius);
   --scalar-api-reference-theme-semibold: var(--theme-semibold);
   --scalar-api-reference-theme-shadow-1: var(--theme-shadow-1);
   --scalar-api-reference-theme-sidebar-width: var(--theme-sidebar-width);
@@ -36,14 +103,15 @@
   --scalar-api-reference-sidebar-color-1: var(--theme-color-1);
   --scalar-api-reference-sidebar-color-2: var(--theme-color-2);
   --scalar-api-reference-sidebar-color-active: var(--theme-color-accent);
-  /* prettier-ignore */
-  --scalar-api-reference-sidebar-item-hover-background: var(--theme-background-2);
+  --scalar-api-reference-sidebar-item-hover-background: var(
+    --theme-background-2
+  );
   --scalar-api-reference-theme-background-3: var(--theme-background-3);
   --scalar-api-reference-theme-bold: var(--theme-bold);
-  --scalar-api-reference-theme-border-width: var(--theme-border-width);
+  --scalar-api-reference-border-width: var(--theme-border-width);
   --scalar-api-reference-theme-color-accent: var(--theme-color-accent);
   --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
-  --scalar-api-reference-theme-font-code: var(--theme-font-code);
+  --scalar-api-reference-font-mono: var(--theme-font-code);
   --scalar-api-reference-theme-get-color: var(--theme-get-color);
   --scalar-api-reference-theme-heading-2: var(--theme-heading-2);
   --scalar-api-reference-theme-heading-4: var(--theme-heading-4);
@@ -53,7 +121,7 @@
   --scalar-api-reference-theme-patch-color: var(--theme-patch-color);
   --scalar-api-reference-theme-post-color: var(--theme-post-color);
   --scalar-api-reference-theme-put-color: var(--theme-put-color);
-  --scalar-api-reference-theme-radius-lg: var(--theme-radius-lg);
+  --scalar-api-reference-rounded-lg: var(--theme-radius-lg);
   --scalar-api-reference-theme-regular: var(--theme-regular);
   --scalar-api-reference-theme-toc-width: var(--theme-toc-width);
   --scalar-api-reference-theme-post-color: var(--theme-post-color);
@@ -61,4 +129,4 @@
   --scalar-api-reference-theme-get-color: var(--theme-get-color);
   --scalar-api-reference-theme-delete-color: var(--theme-delete-color);
   --scalar-api-reference-theme-put-color: var(--theme-put-color);
-}
+} */

package/src/components/ApiClientModal.vue

@@ -62,7 +62,7 @@ const proxyUrl = import.meta.env.VITE_CLIENT_PROXY
   overflow: hidden;
   pointer-events: all;
   background: var(--scalar-api-reference-theme-background-1) !important;
-  border-radius: var(--scalar-api-reference-theme-radius);
+  border-radius: var(--scalar-api-reference-rounded);
   box-shadow: var(--scalar-api-reference-theme-shadow-1);
   height: 100%;
   overflow: hidden;
@@ -85,7 +85,7 @@ const proxyUrl = import.meta.env.VITE_CLIENT_PROXY
   background-color: var(--scalar-api-reference-theme-background-1);
   z-index: 10;
   position: sticky;
-  border-bottom: var(--scalar-api-reference-theme-border);
+  border-bottom: var(--scalar-api-reference-border);
   top: 0;
 }
 
@@ -108,7 +108,7 @@ TODO: Markup is missing
 .scalar-api-client__close__icon {
   width: 28px;
   height: 28px;
-  border-radius: var(--scalar-api-reference-theme-radius);
+  border-radius: var(--scalar-api-reference-rounded);
   margin-right: 12px;
   display: flex;
   justify-content: center;
@@ -179,6 +179,6 @@ TODO: Markup is missing
   display: flex;
   flex-direction: column;
   width: var(--scalar-api-reference-theme-sidebar-width);
-  border-right: 1px solid var(--scalar-api-reference-theme-border-color);
+  border-right: 1px solid var(--scalar-api-reference-border-color);
 }
 </style>

package/src/components/ApiReference.vue

@@ -9,7 +9,10 @@ import { default as ApiClientModal } from './ApiClientModal.vue'
 import { Content } from './Content'
 import Sidebar from './Sidebar.vue'
 
-const props = defineProps<ReferenceProps>()
+const props = withDefaults(defineProps<ReferenceProps>(), {
+  showSidebar: true,
+  isEditable: false,
+})
 
 /**
  * The editor component has heavy dependencies (process), let's lazy load it.
@@ -148,56 +151,17 @@ const breadCrumbs = computed(() => {
 <style src="../assets/css/variables.css"></style>
 
 <style>
-/** TODO: Move variables to main code base */
-.scalar-api-client,
-#headlessui-portal-root {
-  --scalar-api-client-post-color: var(--theme-post-color);
-  /* prettier-ignore */
-  --scalar-api-client-post-background: var(--theme-post-background);
-  /* prettier-ignore */
-  --scalar-api-client-delete-color: var(--theme-delete-color);
-  /* prettier-ignore */
-  --scalar-api-client-delete-background: var(--theme-delete-background);
-  /* prettier-ignore */
-  --scalar-api-client-patch-color: var(--theme-patch-color);
-  /* prettier-ignore */
-  --scalar-api-client-patch-background: var(--theme-patch-background);
-  --scalar-api-client-get-color: var(--theme-get-color);
-  /* prettier-ignore */
-  --scalar-api-client-get-background: var(--theme-get-background);
-  --scalar-api-client-put-color: var(--theme-put-color);
-  /* prettier-ignore */
-  --scalar-api-client-put-background: var(--theme-put-background);
-  --scalar-api-client-rounded: var(--theme-radius);
-  /* prettier-ignore */
-  --scalar-api-client-background-secondary: var(--theme-background-2);
-  --scalar-api-client-color-3: var(--theme-color-3);
-  --scalar-api-client-border: var(--theme-border);
-  --scalar-api-client-font-sans: var(--theme-font);
-  --scalar-api-client-font-mono: var(--theme-font-code);
-  --scalar-api-client-font-bold: var(--theme-bold);
-  --scalar-api-client-theme-color-1: var(--theme-color-1);
-  --scalar-api-client-theme-color-2: var(--theme-color-2);
-  /* prettier-ignore */
-  --scalar-api-client-theme-shadow-2: var(--theme-shadow-2);
-  --scalar-api-client-text-sm: var(--theme-small);
-  --scalar-api-client-text-lg: var(--large);
-  --scalar-api-client-text-base: var(--normal);
-  --scalar-api-client-fill: var(--fill);
-  --scalar-api-client-color2: var(--color2);
-  --scalar-api-client-bg3: var(--bg3);
-  --scalar-api-client-gradient: var(--gradient);
-  /* prettier-ignore */
-  --scalar-api-client-background-primary: var(--theme-background-1);
-  /* prettier-ignore */
-  --scalar-api-client-border-color: var(--theme-border-color);
-  /* prettier-ignore */
-  --scalar-api-client-background-3: var(--theme-background-3);
-  --scalar-api-client-font-semibold: var(--theme-semibold);
-  --scalar-api-client-text-xs: var(--theme-micro);
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
 }
-</style>
-<style>
+
 /** TODO: Move to components */
 .codemenu-topbar {
   background: var(--theme-background-2);
@@ -236,7 +200,7 @@ const breadCrumbs = computed(() => {
   position: relative;
   margin-left: -4px;
   margin-right: -4px;
-  border-radius: var(--scalar-api-reference-theme-radius);
+  border-radius: var(--scalar-api-reference-rounded);
   text-transform: uppercase;
 }
 .codemenu-item-key:hover {
@@ -298,14 +262,14 @@ const breadCrumbs = computed(() => {
   display: inline-block;
   text-align: right;
   line-height: 1.55;
-  font-family: var(--scalar-api-reference-theme-font-code);
+  font-family: var(--scalar-api-reference-font-mono);
   font-size: var(--scalar-api-reference-theme-mini);
   cursor: pointer;
 }
 .languages .example-item-endpoints {
   background: var(--scalar-api-reference-theme-background-2);
   width: 100%;
-  border-top: var(--scalar-api-reference-theme-border);
+  border-top: var(--scalar-api-reference-border);
 }
 .endpoint-response p {
   margin-top: 6px;
@@ -319,7 +283,7 @@ const breadCrumbs = computed(() => {
   min-width: auto;
 }
 .endpoint-response {
-  border-top: var(--scalar-api-reference-theme-border);
+  border-top: var(--scalar-api-reference-border);
   padding: 12px 0;
   font-size: var(--scalar-api-reference-theme-small);
 }
@@ -355,7 +319,7 @@ const breadCrumbs = computed(() => {
 }
 
 .reference:not(:last-of-type) {
-  border-bottom: var(--scalar-api-reference-theme-border);
+  border-bottom: var(--scalar-api-reference-border);
 }
 
 .reference-container {
@@ -369,7 +333,7 @@ const breadCrumbs = computed(() => {
 }
 
 .reference-container + .reference-container {
-  border-top: var(--scalar-api-reference-theme-border);
+  border-top: var(--scalar-api-reference-border);
 }
 
 .reference-container .copy,
@@ -447,8 +411,8 @@ const breadCrumbs = computed(() => {
   --col-width-3: var(--scalar-api-reference-theme-toc-width);
 
   /* Redifine theme border at the document level so it's not pulled off the body */
-  --theme-border: var(--scalar-api-reference-theme-border-width) solid
-    var(--scalar-api-reference-theme-border-color);
+  --theme-border: var(--scalar-api-reference-border-width) solid
+    var(--scalar-api-reference-border-color);
 
   display: grid;
 
@@ -518,7 +482,7 @@ const breadCrumbs = computed(() => {
 .layout-aside-left {
   position: relative;
   grid-area: sidebar;
-  border-right: var(--scalar-api-reference-theme-border);
+  border-right: var(--scalar-api-reference-border);
 }
 
 .layout-aside-right {
@@ -649,7 +613,7 @@ const breadCrumbs = computed(() => {
     position: sticky;
     top: 0;
     height: var(--scalar-api-reference-theme-header-height);
-    border-bottom: var(--scalar-api-reference-theme-border);
+    border-bottom: var(--scalar-api-reference-border);
 
     width: 100%;
     z-index: 10;
@@ -667,7 +631,7 @@ const breadCrumbs = computed(() => {
     /* Offset by 2px to fill screen and compensate for gap */
     height: calc(var(--scalar-api-reference-document-height) + 2px);
 
-    border-top: var(--scalar-api-reference-theme-border);
+    border-top: var(--scalar-api-reference-border);
     display: flex;
     flex-direction: column;
   }

package/src/components/Card/Card.vue

@@ -5,8 +5,8 @@
 </template>
 <style scoped>
 .card {
-  border-radius: var(--scalar-api-reference-theme-radius-lg);
+  border-radius: var(--scalar-api-reference-rounded-lg);
   overflow: hidden;
-  border: 1px solid var(--scalar-api-reference-theme-border-color);
+  border: 1px solid var(--scalar-api-reference-border-color);
 }
 </style>

package/src/components/Card/CardContent.vue

@@ -27,7 +27,7 @@ withDefaults(
 .card-content {
   overflow: auto;
   padding: 10px 12px;
-  border-bottom: 1px solid var(--scalar-api-reference-theme-border-color);
+  border-bottom: 1px solid var(--scalar-api-reference-border-color);
 }
 
 .card-content:last-of-type,

package/src/components/Card/CardFooter.vue

@@ -8,6 +8,6 @@ import CardContent from './CardContent.vue'
 </template>
 <style scoped>
 .card-footer {
-  border-top: 1px solid var(--scalar-api-reference-theme-border-color);
+  border-top: 1px solid var(--scalar-api-reference-border-color);
 }
 </style>

package/src/components/Content/Content.vue

@@ -93,7 +93,7 @@ onMounted(() => {
   background: var(--scalar-api-reference-theme-background-1);
   appearance: none;
   border: none;
-  border: 1px solid var(--scalar-api-reference-theme-border-color);
+  border: 1px solid var(--scalar-api-reference-border-color);
   margin: auto;
   padding: 8px 12px;
   border-radius: 30px;
@@ -117,7 +117,7 @@ onMounted(() => {
   margin-left: 3px;
 }
 .show-more:active {
-  box-shadow: 0 0 0 1px var(--scalar-api-reference-theme-border-color);
+  box-shadow: 0 0 0 1px var(--scalar-api-reference-border-color);
 }
 @media (max-width: 1165px) {
   .show-more {

package/src/components/Content/Introduction/BaseUrl.vue

@@ -26,7 +26,7 @@ const { copyToClipboard } = useClipboard()
   font-size: var(--scalar-api-reference-theme-mini);
   cursor: pointer;
   display: flex;
-  font-family: var(--scalar-api-reference-theme-font-code);
+  font-family: var(--scalar-api-reference-font-mono);
   flex-direction: column;
 }
 </style>

package/src/components/Content/Introduction/Introduction.vue

@@ -67,10 +67,11 @@ const standardLibrary = computed(() => {
           <template v-if="info.description">
             <MarkdownRenderer :value="info.description" />
           </template>
+          <!-- @vue-ignore -->
           <template
-            v-for="i in [...Array(8).keys()]"
+            v-for="index in [...Array(8).keys()]"
             v-else
-            :key="i">
+            :key="index">
             <span class="loading" />
           </template>
         </p>
@@ -115,7 +116,7 @@ const standardLibrary = computed(() => {
 .loading {
   background: var(--scalar-api-reference-theme-background-2);
   animation: loading-skeleton 2s infinite alternate;
-  border-radius: var(--scalar-api-reference-theme-radius);
+  border-radius: var(--scalar-api-reference-rounded);
 }
 .heading.loading {
   width: 80%;

package/src/components/Content/Introduction/LanguageSelector.vue

@@ -215,7 +215,7 @@ const getIconByLanguageKey = (languageKey: TargetId) => {
 }
 .code-languages-icon__shell {
   background: #000;
-  box-shadow: 0 0 0 1px var(--scalar-api-reference-theme-border-color);
+  box-shadow: 0 0 0 1px var(--scalar-api-reference-border-color);
 }
 .code-languages-icon__ruby {
   background: #d91404;

package/src/components/Content/MarkdownRenderer.vue

@@ -76,6 +76,14 @@ watch(
   margin: 12px 0;
 }
 
+.markdown :deep(ul) {
+  list-style: disc;
+}
+
+.markdown :deep(ol) {
+  list-style: decimal;
+}
+
 .markdown :deep(ul.contains-task-list) {
   list-style: none;
   padding-left: 0;
@@ -86,9 +94,9 @@ watch(
 }
 
 .markdown :deep(code) {
-  font-family: var(--scalar-api-reference-theme-font-code);
+  font-family: var(--scalar-api-reference-font-mono);
   background-color: var(--scalar-api-reference-theme-background-2);
-  box-shadow: 0 0 0 1px var(--scalar-api-reference-theme-border-color);
+  box-shadow: 0 0 0 1px var(--scalar-api-reference-border-color);
   font-size: var(--scalar-api-reference-theme-mini);
   border-radius: 2px;
   padding: 0 3px;
@@ -106,7 +114,7 @@ watch(
 }
 
 .markdown :deep(blockquote) {
-  border-left: 3px solid var(--scalar-api-reference-theme-border-color);
+  border-left: 3px solid var(--scalar-api-reference-border-color);
   padding-left: 12px;
 }
 
@@ -117,8 +125,8 @@ watch(
   width: 100%;
   margin: 0;
   overflow: hidden;
-  box-shadow: 0 0 0 1px var(--scalar-api-reference-theme-border-color);
-  border-radius: var(--scalar-api-reference-theme-radius);
+  box-shadow: 0 0 0 1px var(--scalar-api-reference-border-color);
+  border-radius: var(--scalar-api-reference-rounded);
 }
 
 .markdown :deep(td),
@@ -129,8 +137,8 @@ watch(
   box-sizing: border-box;
   position: relative;
   word-break: break-all;
-  border-right: var(--scalar-api-reference-theme-border);
-  border-bottom: var(--scalar-api-reference-theme-border);
+  border-right: var(--scalar-api-reference-border);
+  border-bottom: var(--scalar-api-reference-border);
 }
 
 .markdown :deep(td > *),