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

package/lib/theme/ApiDemoPanel/FormItem/index.js

@@ -33,17 +33,8 @@ function FormItem({ label, type, required, children, className }) {
     required &&
       react_1.default.createElement(
         "span",
-        null,
-        " ",
-        react_1.default.createElement(
-          "small",
-          null,
-          react_1.default.createElement(
-            "strong",
-            { className: "required" },
-            " required"
-          )
-        )
+        { className: "openapi-schema__required" },
+        "required"
       ),
     react_1.default.createElement("div", null, children)
   );

package/lib/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/lib/theme/ApiDemoPanel/MethodEndpoint/index.js

@@ -58,20 +58,25 @@ function MethodEndpoint({ method, path }) {
     });
   };
   return react_1.default.createElement(
-    "pre",
-    { className: "openapi__method-endpoint" },
+    react_1.default.Fragment,
+    null,
     react_1.default.createElement(
-      "span",
-      { className: "badge badge--" + colorForMethod(method) },
-      method.toUpperCase()
+      "pre",
+      { className: "openapi__method-endpoint" },
+      react_1.default.createElement(
+        "span",
+        { className: "badge badge--" + colorForMethod(method) },
+        method.toUpperCase()
+      ),
+      " ",
+      react_1.default.createElement(
+        "h2",
+        { className: "openapi__method-endpoint-path" },
+        renderServerUrl(),
+        `${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`
+      )
     ),
-    " ",
-    react_1.default.createElement(
-      "span",
-      null,
-      renderServerUrl(),
-      `${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`
-    )
+    react_1.default.createElement("div", { className: "openapi__divider" })
   );
 }
 exports.default = MethodEndpoint;

package/lib/theme/ApiDemoPanel/Request/index.js

@@ -306,21 +306,11 @@ function Request({ item }) {
                 },
               },
               "Body",
-              " ",
               requestBodyRequired &&
                 react_1.default.createElement(
                   "span",
-                  null,
-                  react_1.default.createElement(
-                    "small",
-                    null,
-                    react_1.default.createElement(
-                      "strong",
-                      { className: "request-body required" },
-                      " ",
-                      "required"
-                    )
-                  )
+                  { className: "openapi-schema__required" },
+                  "\u00A0required"
                 )
             ),
             react_1.default.createElement(

package/lib/theme/ApiItem/index.js

@@ -128,12 +128,12 @@ function ApiItem(props) {
               { className: (0, clsx_1.default)("row", "theme-api-markdown") },
               react_1.default.createElement(
                 "div",
-                { className: "col col--7" },
+                { className: "col col--7 openapi-left-panel__container" },
                 react_1.default.createElement(MDXComponent, null)
               ),
               react_1.default.createElement(
                 "div",
-                { className: "col col--5" },
+                { className: "col col--5 openapi-right-panel__container" },
                 react_1.default.createElement(
                   BrowserOnly_1.default,
                   {

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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);

package/lib/theme/SchemaItem/index.js

@@ -9,6 +9,7 @@ import React from "react";
 
 import CodeBlock from "@theme/CodeBlock";
 /* eslint-disable import/no-extraneous-dependencies*/
+import clsx from "clsx";
 import { createDescription } from "docusaurus-theme-openapi-docs/lib/markdown/createDescription";
 /* eslint-disable import/no-extraneous-dependencies*/
 import { guard } from "docusaurus-theme-openapi-docs/lib/markdown/utils";
@@ -37,21 +38,15 @@ function SchemaItem({
 
   const renderRequired = guard(
     Array.isArray(required) ? required.includes(name) : required,
-    () => (
-      <span className="badge badge--danger openapi-schema__required">
-        required
-      </span>
-    )
+    () => <span className="openapi-schema__required">required</span>
   );
 
   const renderDeprecated = guard(deprecated, () => (
-    <span className="badge badge--warning openapi-schema__deprecated">
-      deprecated
-    </span>
+    <span className="openapi-schema__deprecated">deprecated</span>
   ));
 
   const renderNullable = guard(nullable, () => (
-    <span className="badge badge--info openapi-schema__nullable">nullable</span>
+    <span className="openapi-schema__nullable">nullable</span>
   ));
 
   const renderSchemaDescription = guard(schemaDescription, (description) => (
@@ -96,7 +91,11 @@ function SchemaItem({
   const schemaContent = (
     <div>
       <span className="openapi-schema__container">
-        <strong className={deprecated && "openapi-schema__strikethrough"}>
+        <strong
+          className={clsx("openapi-schema__property", {
+            "openapi-schema__strikethrough": deprecated,
+          })}
+        >
           {name}
         </strong>
         <span className="openapi-schema__name"> {schemaName}</span>

package/lib/theme/SchemaTabs/_SchemaTabs.scss

@@ -5,30 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.openapi-tabs__schema-container {
+  margin-top: 1rem;
+}
+
 .openapi-tabs__schema-item {
   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-family: var(--ifm-font-family-monospace);
+  font-size: 10px;
+  white-space: nowrap;
+  transition: 300ms;
 
-.openapi-tabs__schema-item:not(.active) {
-  opacity: 0.65;
-}
+  &:hover {
+    background-color: transparent;
+    border: 1px solid var(--ifm-toc-border-color);
+  }
 
-.openapi-tabs__schema-item:hover {
-  opacity: 1;
-  background-color: var(--ifm-color-emphasis-100);
-}
+  &.active {
+    border: 1px solid var(--ifm-color-primary);
+    color: var(--ifm-color-primary);
+  }
 
-.openapi-tabs__schema-item:last-child {
-  margin-right: 0 !important;
+  &:last-child {
+    margin-right: 0 !important;
+  }
 }
 
 .openapi-tabs__schema-list-container {
@@ -49,7 +56,7 @@
   white-space: nowrap;
 }
 
-.openapi-tabs__schema-container {
+.openapi-tabs__schema-tabs-container {
   width: 100%;
   display: flex;
   align-items: center;