docusaurus-theme-openapi-docs 0.0.0-beta.655 → 0.0.0-beta.656

package/lib/theme/SchemaTabs/index.js

@@ -81,60 +81,56 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
   };
 
   return (
-    <div className="tabs__container">
-      <div className="openapi-tabs__schema-container">
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow left"
-            onClick={handleLeftClick}
-          />
-        )}
-        <ul
-          ref={tabItemListContainerRef}
-          role="tablist"
-          aria-orientation="horizontal"
-          className={clsx(
-            "openapi-tabs__schema-list-container",
-            "tabs",
-            {
-              "tabs--block": block,
-            },
-            className
-          )}
-        >
-          {tabValues.map(({ value, label, attributes }) => (
-            <li
-              // TODO extract TabListItem
-              role="tab"
-              tabIndex={selectedValue === value ? 0 : -1}
-              aria-selected={selectedValue === value}
-              key={value}
-              ref={(tabControl) => tabRefs.push(tabControl)}
-              onKeyDown={handleKeydown}
-              onClick={handleTabChange}
-              {...attributes}
-              className={clsx(
-                "tabs__item",
-                "openapi-tabs__schema-item",
-                attributes?.className,
-                {
-                  active: selectedValue === value,
-                }
-              )}
-            >
-              <span className="openapi-tabs__schema-label">
-                {label ?? value}
-              </span>
-            </li>
-          ))}
-        </ul>
-        {showTabArrows && (
-          <button
-            className="openapi-tabs__arrow right"
-            onClick={handleRightClick}
-          />
+    <div className="openapi-tabs__schema-tabs-container">
+      {showTabArrows && (
+        <button
+          className="openapi-tabs__arrow left"
+          onClick={handleLeftClick}
+        />
+      )}
+      <ul
+        ref={tabItemListContainerRef}
+        role="tablist"
+        aria-orientation="horizontal"
+        className={clsx(
+          "openapi-tabs__schema-list-container",
+          "tabs",
+          {
+            "tabs--block": block,
+          },
+          className
         )}
-      </div>
+      >
+        {tabValues.map(({ value, label, attributes }) => (
+          <li
+            // TODO extract TabListItem
+            role="tab"
+            tabIndex={selectedValue === value ? 0 : -1}
+            aria-selected={selectedValue === value}
+            key={value}
+            ref={(tabControl) => tabRefs.push(tabControl)}
+            onKeyDown={handleKeydown}
+            onClick={handleTabChange}
+            {...attributes}
+            className={clsx(
+              "tabs__item",
+              "openapi-tabs__schema-item",
+              attributes?.className,
+              {
+                active: selectedValue === value,
+              }
+            )}
+          >
+            <span className="openapi-tabs__schema-label">{label ?? value}</span>
+          </li>
+        ))}
+      </ul>
+      {showTabArrows && (
+        <button
+          className="openapi-tabs__arrow right"
+          onClick={handleRightClick}
+        />
+      )}
     </div>
   );
 }
@@ -167,7 +163,7 @@ function TabContent({ lazy, children, selectedValue }) {
 function TabsComponent(props) {
   const tabs = useTabs(props);
   return (
-    <div className="tabs-container">
+    <div className="openapi-tabs__schema-container">
       <TabList {...props} {...tabs} />
       <TabContent {...props} {...tabs} />
     </div>

package/lib/theme/styles.scss

@@ -151,5 +151,10 @@
 }
 
 .openapi__heading {
-  font-size: var(--ifm-h1-font-size);
+  font-size: 2rem;
+  margin-bottom: 0.5rem !important;
+}
+
+.openapi-left-panel__container {
+  border-right: thin solid var(--ifm-toc-border-color);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-beta.655",
+  "version": "0.0.0-beta.656",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -44,7 +44,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-beta.655",
+    "docusaurus-plugin-openapi-docs": "0.0.0-beta.656",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "491fc2c4826e5461c4a90752b999d3dd28fba828"
+  "gitHead": "6c2e5c4c756a07b333560c08616ef0e87516df75"
 }

package/src/theme/ApiDemoPanel/FormItem/index.tsx

@@ -24,14 +24,7 @@ function FormItem({ label, type, required, children, className }: Props) {
         <label className="openapi-demo__form-item-label">{label}</label>
       )}
       {type && <span style={{ opacity: 0.6 }}> — {type}</span>}
-      {required && (
-        <span>
-          {" "}
-          <small>
-            <strong className="required"> required</strong>
-          </small>
-        </span>
-      )}
+      {required && <span className="openapi-schema__required">required</span>}
       <div>{children}</div>
     </div>
   );

package/src/theme/ApiDemoPanel/MethodEndpoint/_MethodEndpoint.scss

@@ -1,6 +1,22 @@
 .openapi__method-endpoint {
+  display: flex;
+  align-items: center;
   max-width: 100%;
   width: fit-content;
   padding: 0.65rem;
   border: 1px solid var(--ifm-toc-border-color);
 }
+
+.openapi__method-endpoint-path {
+  margin-bottom: 0;
+  margin-left: 0.5rem;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.openapi__divider {
+  width: 100%;
+  margin: 1.5rem 0;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}

package/src/theme/ApiDemoPanel/MethodEndpoint/index.tsx

@@ -67,15 +67,18 @@ function MethodEndpoint({ method, path }: Props) {
   };
 
   return (
-    <pre className="openapi__method-endpoint">
-      <span className={"badge badge--" + colorForMethod(method)}>
-        {method.toUpperCase()}
-      </span>{" "}
-      <span>
-        {renderServerUrl()}
-        {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
-      </span>
-    </pre>
+    <>
+      <pre className="openapi__method-endpoint">
+        <span className={"badge badge--" + colorForMethod(method)}>
+          {method.toUpperCase()}
+        </span>{" "}
+        <h2 className="openapi__method-endpoint-path">
+          {renderServerUrl()}
+          {`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
+        </h2>
+      </pre>
+      <div className="openapi__divider" />
+    </>
   );
 }
 

package/src/theme/ApiDemoPanel/Request/index.tsx

@@ -238,15 +238,10 @@ function Request({ item }: { item: NonNullable<ApiItem> }) {
                   setExpandBody(!expandBody);
                 }}
               >
-                Body{" "}
+                Body
                 {requestBodyRequired && (
-                  <span>
-                    <small>
-                      <strong className="request-body required">
-                        {" "}
-                        required
-                      </strong>
-                    </small>
+                  <span className="openapi-schema__required">
+                    &nbsp;required
                   </span>
                 )}
               </summary>

package/src/theme/ApiItem/index.tsx

@@ -134,10 +134,10 @@ export default function ApiItem(props: Props): JSX.Element {
           <DocItemLayout>
             <Provider store={store2}>
               <div className={clsx("row", "theme-api-markdown")}>
-                <div className="col col--7">
+                <div className="col col--7 openapi-left-panel__container">
                   <MDXComponent />
                 </div>
-                <div className="col col--5">
+                <div className="col col--5 openapi-right-panel__container">
                   <BrowserOnly fallback={<div>Loading...</div>}>
                     {() => {
                       return <ApiDemoPanel item={api} infoPath={infoPath} />;

package/src/theme/ApiTabs/_ApiTabs.scss

@@ -9,39 +9,44 @@
   margin-bottom: var(--ifm-leading);
 }
 
+.openapi-tabs__response-header {
+  margin-bottom: 0;
+}
+
 .openapi-tabs__response-code-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
+  padding: 0.35rem 0.85rem;
   border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-weight: var(--ifm-font-weight-normal);
-
-  &.success {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-success);
-    }
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 12px;
+  transition: 300ms;
+  color: var(--ifm-font-color-secondary);
+
+  &.success.active {
+    background-color: var(--ifm-color-success);
+    color: var(--ifm-color-white);
   }
 
-  &.danger {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-danger);
-    }
+  &.danger.active {
+    background-color: var(--ifm-color-danger);
+    color: var(--ifm-color-white);
   }
 
-  &.info {
-    .openapi-tabs__response-dot {
-      background-color: var(--ifm-color-info);
-    }
+  &.info.active {
+    background-color: var(--ifm-color-info);
+    color: var(--ifm-color-white);
   }
 
-  &.active {
+  &.active,
+  &:hover {
     opacity: 1;
-    background-color: var(--ifm-color-emphasis-100);
+  }
+
+  &:hover:not(.active) {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
   }
 }
 
@@ -59,7 +64,9 @@
 
 /* Open API Response Code Tabs */
 .openapi-tabs__response-header-section {
+  border-top: 1px solid var(--ifm-toc-border-color);
   margin-top: 2rem;
+  padding-top: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

package/src/theme/ApiTabs/index.js

@@ -12,6 +12,7 @@ import {
   useTabs,
 } from "@docusaurus/theme-common/internal";
 import useIsBrowser from "@docusaurus/useIsBrowser";
+import Heading from "@theme/Heading";
 import clsx from "clsx";
 
 function TabList({ className, block, selectedValue, selectValue, tabValues }) {
@@ -83,7 +84,9 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
 
   return (
     <div className="openapi-tabs__response-header-section">
-      <strong>Responses</strong>
+      <Heading as="h2" id="responses" className="openapi-tabs__response-header">
+        Responses
+      </Heading>
       <div className="openapi-tabs__response-container">
         {showTabArrows && (
           <button
@@ -129,7 +132,6 @@ function TabList({ className, block, selectedValue, selectValue, tabValues }) {
                 }
               )}
             >
-              <div className="openapi-tabs__response-dot" />
               {label ?? value}
             </li>
           ))}
@@ -173,7 +175,6 @@ function TabsComponent(props) {
   return (
     <div className="openapi-tabs__container">
       <TabList {...props} {...tabs} />
-      <hr />
       <TabContent {...props} {...tabs} />
     </div>
   );

package/src/theme/DiscriminatorTabs/_DiscriminatorTabs.scss

@@ -8,25 +8,24 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 1.8rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  border: 1px solid var(--ifm-color-primary);
-  border-radius: var(--ifm-global-radius);
-  color: var(--ifm-color-primary);
-  font-size: 12px;
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 10px;
+  font-family: var(--ifm-font-family-monospace);
+  white-space: nowrap;
+  transition: 300ms;
 
-  &:not(.active) {
-    opacity: 0.65;
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
   }
 
   &.active {
-    background-color: var(--ifm-color-emphasis-100);
-  }
-
-  &:hover {
-    opacity: 1;
-    background-color: var(--ifm-color-emphasis-100);
+    border: 1px solid var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
   }
 
   &:last-child {

package/src/theme/Markdown/Details/_Details.scss

@@ -1,5 +1,34 @@
 /* Markdown Details Styling */
 
+/* Top-Level Details Styling */
+.openapi-left-panel__container > .openapi-markdown__details > summary,
+.openapi-markdown__details.mime > summary,
+.openapi-markdown__details.response > summary {
+  text-transform: uppercase;
+  font-size: 12px;
+}
+
+.openapi-left-panel__container > .openapi-markdown__details,
+.openapi-markdown__details.mime,
+.openapi-markdown__details.response {
+  margin-bottom: 1rem !important;
+}
+
+.openapi-markdown__details-summary-header-params,
+.openapi-markdown__details-summary-header-body {
+  font-size: 12px;
+  margin-bottom: 0;
+}
+/* End of Top-Level Details Styling */
+
+/* Top-Level Details Caret Styling */
+.openapi-left-panel__container > .openapi-markdown__details > summary::before,
+.openapi-markdown__details.mime > summary::before,
+.openapi-markdown__details.response > summary::before {
+  top: 0.1rem;
+}
+/* End of Top-Level Details Caret Styling */
+
 .openapi-markdown__details {
   margin: unset !important;
   background-color: transparent;
@@ -37,11 +66,6 @@
   transform: rotate(180deg) !important;
 }
 
-.theme-api-markdown .tabs__item {
-  padding-bottom: unset;
-  padding-top: unset;
-}
-
 .openapi-markdown__details > div > div {
   padding-top: unset !important;
   border-top: unset !important;
@@ -51,12 +75,17 @@
   margin-bottom: 0;
 }
 
+.openapi-markdown__details-summary-mime {
+  display: flex;
+}
+
 /* Hide defaul details marker by default */
 details summary::-webkit-details-marker {
   display: none;
 }
 
 .openapi-security__details {
+  font-size: 12px;
   margin-bottom: 1rem;
   background-color: transparent;
   color: var(--ifm-font-color-base);
@@ -69,16 +98,20 @@ details summary::-webkit-details-marker {
 
 .openapi-security__details pre {
   margin-bottom: unset;
+  border-top-left-radius: 0;
+  border-top: thin solid var(--ifm-toc-border-color);
+  border-top-right-radius: 0;
 }
 
 .openapi-security__summary-header {
+  font-size: 12px;
+  text-transform: uppercase;
   margin-bottom: unset;
 }
 
 .openapi-security__summary-container {
   padding: 1rem;
   list-style-type: none;
-  border-bottom: thin solid var(--ifm-toc-border-color);
 
   &:hover {
     cursor: pointer;

package/src/theme/MimeTabs/_MimeTabs.scss

@@ -8,7 +8,7 @@
 .openapi-tabs__mime-container {
   display: flex;
   align-items: center;
-  max-width: 390px;
+  margin-top: 1rem;
   overflow: hidden;
 }
 
@@ -16,18 +16,23 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 2rem;
+  padding: 0.35rem 0.7rem;
+  border: 1px solid transparent;
   margin-top: 0 !important;
   margin-right: 0.5rem;
-  font-weight: var(--ifm-font-weight-normal);
-  font-size: 12px;
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 10px;
+  text-transform: uppercase;
   white-space: nowrap;
+  transition: 300ms;
+
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
 
   &.active {
-    background-color: var(--ifm-color-emphasis-100);
-    border-bottom-color: var(--ifm-tabs-color-active-border);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border: 1px solid var(--ifm-tabs-color-active-border);
     color: var(--ifm-tabs-color-active);
   }
 

package/src/theme/ParamsItem/_ParamsItem.scss

@@ -19,14 +19,12 @@
     content: "";
     display: inline-block;
   }
-}
-
-.openapi-params__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
 
-.openapi-params__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
+  &:hover {
+    .openapi-schema__property {
+      color: var(--ifm-color-primary);
+    }
+  }
 }
 
 .openapi-schema__type {
@@ -35,10 +33,14 @@
 }
 
 .openapi-schema__required {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
   color: var(--openapi-required);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
+  text-transform: uppercase;
 }
 
 .openapi-schema__divider {

package/src/theme/ParamsItem/index.js

@@ -37,9 +37,7 @@ function ParamsItem({
   ));
 
   const renderSchemaRequired = guard(required, () => (
-    <span className="badge badge--danger openapi-schema__required">
-      required
-    </span>
+    <span className="openapi-schema__required">required</span>
   ));
 
   const renderSchema = guard(getQualifierMessage(schema), (message) => (
@@ -121,7 +119,7 @@ function ParamsItem({
   return (
     <div className="openapi-params__list-item">
       <span className="openapi-schema__container">
-        <strong>{name}</strong>
+        <strong className="openapi-schema__property">{name}</strong>
         {renderSchemaName}
         {required && <span className="openapi-schema__divider"></span>}
         {renderSchemaRequired}

package/src/theme/SchemaItem/_SchemaItem.scss

@@ -1,3 +1,11 @@
+.openapi-schema__container {
+  &:hover {
+    .openapi-schema__property {
+      color: var(--ifm-color-primary);
+    }
+  }
+}
+
 .openapi-schema__list-item {
   list-style: none;
   position: relative;
@@ -21,44 +29,54 @@
   }
 }
 
-.openapi-schema__list-item:hover {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
-.openapi-schema__list-item:focus {
-  background-color: var(--ifm-menu-color-background-active);
-}
-
 .openapi-schema__name {
   opacity: 0.6;
   padding-left: 0.3rem;
 }
 
 .openapi-schema__required {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-required);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__deprecated {
+  display: flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-deprecated);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__nullable {
+  display: flex;
+  align-items: center;
+  font-size: 10.5px;
+  font-weight: bold;
+  text-transform: uppercase;
   color: var(--openapi-nullable);
   margin-left: 1%;
   background-color: transparent;
-  font-size: 10.5px;
 }
 
 .openapi-schema__strikethrough {
   text-decoration: line-through;
 }
 
+.openapi-schema__property {
+  margin-top: 1.25px;
+  font-family: var(--ifm-font-family-monospace);
+  transition: 300ms;
+}
+
 .openapi-schema__divider {
   flex-grow: 1;
   border-bottom: thin solid var(--ifm-toc-border-color);