@scalar/api-reference 0.1.2 → 0.1.4

package/src/components/Content/ReferenceEndpoint/ExampleRequest.vue

@@ -268,7 +268,7 @@ const availableLanguages = computed(() => {
 .language-select {
   position: relative;
   padding-right: 9px;
-  border-right: 1px solid var(--scalar-api-reference-theme-border-color);
+  border-right: 1px solid var(--scalar-api-reference-border-color);
 }
 .language-select select {
   border: none;
@@ -317,13 +317,15 @@ const availableLanguages = computed(() => {
   margin-left: 6px;
   border: none;
   border-radius: 3px;
-  &:hover {
-    color: var(--scalar-api-reference-theme-color-1);
-  }
-  svg {
-    width: 13px;
-    height: 13px;
-  }
+}
+
+.copy-button:hover {
+  color: var(--scalar-api-reference-theme-color-1);
+}
+
+.copy-button svg {
+  width: 13px;
+  height: 13px;
 }
 
 .show-api-client-button {
@@ -332,7 +334,7 @@ const availableLanguages = computed(() => {
   appearance: none;
   outline: none;
   border: none;
-  border-radius: var(--scalar-api-reference-theme-radius-lg);
+  border-radius: var(--scalar-api-reference-rounded-lg);
   height: 35px;
   display: flex;
   justify-content: center;

package/src/components/Content/ReferenceEndpoint/ExampleResponses.vue

@@ -124,7 +124,7 @@ watch(selectedResponseIndex, () => {
   font-size: var(--scalar-api-reference-theme-mini);
 }
 .scalar-api-reference__empty-state {
-  border: 1px dashed var(--scalar-api-reference-theme-border-color);
+  border: 1px dashed var(--scalar-api-reference-border-color);
   width: 100%;
   text-align: center;
   font-size: var(--scalar-api-reference-theme-mini);

package/src/components/Content/ReferenceEndpoint/RequestBody.vue

@@ -30,7 +30,7 @@ defineProps<{ requestBody?: RequestBody }>()
   margin-top: 6px;
 }
 .parameter .parameter-child {
-  border: var(--scalar-api-reference-theme-border);
+  border: var(--scalar-api-reference-border);
   border-radius: 20px;
   margin-top: 12px;
   width: fit-content;
@@ -85,7 +85,7 @@ defineProps<{ requestBody?: RequestBody }>()
   transform: rotate(45deg);
 }
 .parameter-child__open > .parameter-child-trigger {
-  border-bottom: var(--scalar-api-reference-theme-border);
+  border-bottom: var(--scalar-api-reference-border);
 }
 
 .parameter {
@@ -93,13 +93,13 @@ defineProps<{ requestBody?: RequestBody }>()
   font-size: var(--scalar-api-reference-theme-small);
 }
 .parameter li {
-  border-top: var(--scalar-api-reference-theme-border);
+  border-top: var(--scalar-api-reference-border);
   padding: 12px 0;
 }
 .parameter-name {
   font-weight: 500;
   margin-right: 6px;
-  font-family: var(--scalar-api-reference-theme-font-code);
+  font-family: var(--scalar-api-reference-font-mono);
   font-size: 13px;
   color: var(--scalar-api-reference-theme-color-1);
 }

package/src/components/FindAnythingButton.vue

@@ -27,11 +27,9 @@ import FlowIcon from './Icon/FlowIcon.vue'
   padding: 0 12px;
 
   color: var(--scalar-api-reference-theme-color-3);
-  border: none;
   outline: none;
-  border-radius: var(--scalar-api-reference-theme-radius);
-  /* prettier-ignore */
-  box-shadow: 0 0 0 1px var(--scalar-api-reference-sidebar-border-color, var(--scalar-api-reference-theme-border-color));
+  border-radius: var(--scalar-api-reference-rounded);
+  border: var(--scalar-api-reference-border);
   /* prettier-ignore */
   background: var(--scalar-api-reference-sidebar-search-background, var(--scalar-api-reference-theme-background-1));
   cursor: pointer;

package/src/components/FlowButton.vue

@@ -53,7 +53,7 @@ export { useLoadButtonState }
   -webkit-appearance: none;
   height: 40px;
   padding: 0px 24px;
-  border-radius: var(--scalar-api-reference-theme-radius);
+  border-radius: var(--scalar-api-reference-rounded);
   color: var(--scalar-api-reference-theme-button-1-color);
   font-size: var(--scalar-api-reference-theme-font-size-4);
   font-weight: 500;
@@ -90,7 +90,7 @@ export { useLoadButtonState }
   background: var(--scalar-api-reference-theme-background-1);
   color: var(--scalar-api-reference-theme-color-1);
   padding: 11px 23px;
-  border: var(--scalar-api-reference-theme-border);
+  border: var(--scalar-api-reference-border);
   box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
 }
 .flow-button-outlined:hover,

package/src/components/Sidebar.vue

@@ -134,7 +134,7 @@ const {
   position: relative;
   cursor: pointer;
   /* prettier-ignore */
-  border-radius: 0 var(--scalar-api-reference-theme-radius) var(--scalar-api-reference-theme-radius) 0;
+  border-radius: 0 var(--scalar-api-reference-rounded) var(--scalar-api-reference-rounded) 0;
   flex: 1;
   padding-right: 12px;
   user-select: none;

package/src/types.ts

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

package/vite.config.ts

@@ -4,15 +4,25 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: [vue()],
   build: {
+    cssCodeSplit: true,
     minify: false,
     lib: {
-      entry: 'src/index.ts',
+      entry: ['src/index.ts', 'src/assets/css/variables.css'],
       name: '@scalar/api-reference',
       fileName: 'index',
       formats: ['es'],
     },
     rollupOptions: {
       external: ['vue'],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'index.css') {
+            return 'style.css'
+          }
+
+          return assetInfo.name ?? 'default'
+        },
+      },
     },
   },
 })