docusaurus-theme-openapi-docs 0.0.0-beta.646 → 0.0.0-beta.647

package/lib/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -12,11 +12,39 @@
 
 .openapi-tabs__code-container {
   margin-bottom: 1rem;
+
+  .openapi-tabs__code-item {
+    display: flex;
+    flex-direction: column-reverse;
+    flex: 0 0 80px;
+    align-items: center;
+    padding: 0.5rem 0 !important;
+    margin-top: 0 !important;
+    margin-right: 0.5rem;
+    border: 1px solid transparent;
+    transition: 300ms;
+
+    &:not(.active):hover {
+      border: 1px solid var(--openapi-code-tab-border-color);
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    span {
+      padding-top: 0.5rem;
+      color: var(--ifm-font-color-secondary);
+      font-size: 10px;
+      text-transform: uppercase;
+    }
+  }
 }
 
 .openapi-tabs__code-list-container {
   display: flex;
   justify-content: flex-start;
+  padding: 0.25rem;
   padding-bottom: 0.6rem;
 }
 
@@ -34,20 +62,20 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item {
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+.openapi-tabs__code-item--variant {
+  color: var(--ifm-color-secondary);
 
   &.active {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-color: var(--ifm-toc-border-color);
   }
 }
 
+.openapi-tabs__code-item--variant > span {
+  padding-top: unset !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 
@@ -55,13 +83,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
+    border-color: var(--openapi-code-tab-border-color-python);
   }
 }
 
@@ -72,13 +101,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-info);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-go);
+    border-color: var(--openapi-code-tab-border-color-go);
   }
 }
 
@@ -89,13 +119,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-js);
+    border-color: var(--openapi-code-tab-border-color-js);
   }
 }
 
@@ -106,15 +137,16 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg")
+      no-repeat;
     margin-block: auto;
     background-color: var(--bash-background-color);
     border-radius: var(--bash-border-radius);
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    border-color: var(--ifm-color-danger);
   }
 }
 
@@ -125,13 +157,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-ruby);
+    border-color: var(--openapi-code-tab-border-color-ruby);
   }
 }
 
@@ -142,13 +175,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-csharp);
+    border-color: var(--openapi-code-tab-border-color-csharp);
   }
 }
 
@@ -159,13 +193,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-nodejs);
+    border-color: var(--openapi-code-tab-border-color-nodejs);
   }
 }
 
@@ -176,13 +211,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-php);
+    border-color: var(--openapi-code-tab-border-color-php);
   }
 }
 
@@ -193,13 +229,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-java);
+    border-color: var(--openapi-code-tab-border-color-java);
   }
 }
 
@@ -210,13 +247,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-powershell);
+    border-color: var(--openapi-code-tab-border-color-powershell);
   }
 }
 

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

@@ -17,6 +17,8 @@ import clsx from "clsx";
 
 function TabList({
   action,
+  currentLanguage,
+  includeVariant,
   className,
   block,
   selectedValue,
@@ -38,10 +40,20 @@ function TabList({
     }
 
     if (action) {
-      const newLanguage = languageSet.filter(
-        (lang) => lang.language === newTabValue
-      );
-      action(newLanguage[0]);
+      let newLanguage;
+      if (currentLanguage && includeVariant) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.variant = newTabValue;
+        action.setSelectedVariant(newTabValue.toLowerCase());
+      } else {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === newTabValue
+        )[0];
+        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+      }
+      action.setLanguage(newLanguage);
     }
   };
 
@@ -101,7 +113,7 @@ function TabList({
             }
           )}
         >
-          {label ?? value}
+          <span>{label ?? value}</span>
         </li>
       ))}
     </ul>

package/lib/theme/ApiDemoPanel/Curl/index.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import sdk from "@paloaltonetworks/postman-collection";
 export interface Language {
-    highlight?: string;
+    highlight: string;
     language: string;
-    logoClass?: string;
-    variant?: string;
-    options?: {
+    logoClass: string;
+    variant: string;
+    variants: string[];
+    options: {
         [key: string]: boolean;
     };
     source?: string;

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

@@ -83,6 +83,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl"],
   },
   {
     highlight: "python",
@@ -93,6 +94,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "requests",
+    variants: ["requests", "http.client"],
   },
   {
     highlight: "go",
@@ -103,6 +105,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "native",
+    variants: ["native"],
   },
   {
     highlight: "javascript",
@@ -114,6 +117,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "axios",
+    variants: ["axios", "native", "request", "unirest"],
   },
   {
     highlight: "ruby",
@@ -124,6 +128,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "Net::HTTP",
+    variants: ["net::http"],
   },
   {
     highlight: "csharp",
@@ -134,6 +139,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "RestSharp",
+    variants: ["restsharp", "httpclient"],
   },
   {
     highlight: "php",
@@ -144,6 +150,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
   },
   {
     highlight: "java",
@@ -154,6 +161,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "OkHttp",
+    variants: ["okhttp", "unirest"],
   },
   {
     highlight: "powershell",
@@ -164,6 +172,7 @@ exports.languageSet = [
       trimRequestBody: true,
     },
     variant: "RestMethod",
+    variants: ["restmethod"],
   },
 ];
 function CodeTab({ children, hidden, className, onClick }) {
@@ -214,6 +223,7 @@ function Curl({ postman, codeSamples }) {
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
+  const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
   const [language, setLanguage] = (0, react_1.useState)(() => {
     // Return first index if only 1 user-defined language exists
     if (mergedLangs.length === 1) {
@@ -298,6 +308,33 @@ function Curl({ postman, codeSamples }) {
     auth,
     mergedLangs,
   ]);
+  (0, react_1.useEffect)(() => {
+    if (selectedVariant && selectedVariant !== language.variant) {
+      const postmanRequest = (0, buildPostmanRequest_1.default)(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      postman_code_generators_1.default.convert(
+        language.language,
+        selectedVariant,
+        postmanRequest,
+        language.options,
+        (error, snippet) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    }
+  });
   if (language === undefined) {
     return null;
   }
@@ -306,29 +343,59 @@ function Curl({ postman, codeSamples }) {
     null,
     react_1.default.createElement(
       CodeTabs_1.default,
-      { groupId: "code-samples", action: setLanguage },
+      {
+        groupId: "code-samples",
+        action: {
+          setLanguage: setLanguage,
+          setSelectedVariant: setSelectedVariant,
+        },
+        lazy: true,
+      },
       mergedLangs.map((lang) => {
         return react_1.default.createElement(
           CodeTab,
           {
             value: lang.language,
-            label: "",
-            key: lang.variant
-              ? `${lang.language}-${lang.variant}`
-              : lang.language,
+            label: lang.language,
+            key: lang.language,
             attributes: {
               className: `openapi-tabs__code-item--${lang.logoClass}`,
             },
           },
           react_1.default.createElement(
-            ApiCodeBlock_1.default,
+            CodeTabs_1.default,
             {
-              language: lang.highlight,
-              className: "openapi-demo__code-block",
-              title: `${lang.language} / ${lang.variant}`,
-              showLineNumbers: true,
+              action: {
+                setLanguage: setLanguage,
+                setSelectedVariant: setSelectedVariant,
+              },
+              includeVariant: true,
+              currentLanguage: lang.language,
+              defaultValue: selectedVariant,
+              lazy: true,
             },
-            codeText
+            lang.variants.map((variant) => {
+              return react_1.default.createElement(
+                CodeTab,
+                {
+                  value: variant.toLowerCase(),
+                  label: variant.toUpperCase(),
+                  key: `${lang.language}-${lang.variant}`,
+                  attributes: {
+                    className: `openapi-tabs__code-item--variant`,
+                  },
+                },
+                react_1.default.createElement(
+                  ApiCodeBlock_1.default,
+                  {
+                    language: lang.highlight,
+                    className: "openapi-demo__code-block",
+                    showLineNumbers: true,
+                  },
+                  codeText
+                )
+              );
+            })
           )
         );
       })

package/lib/theme/styles.scss

@@ -54,6 +54,27 @@
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
   --openapi-tree-line-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color-python: #ffdb50;
+  --openapi-code-tab-border-color-bash: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-go: var(--ifm-color-info);
+  --openapi-code-tab-border-color-js: var(--ifm-color-warning);
+  --openapi-code-tab-border-color-ruby: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-csharp: #9b4f96;
+  --openapi-code-tab-border-color-nodejs: var(--ifm-color-success);
+  --openapi-code-tab-border-color-php: #6181b6;
+  --openapi-code-tab-border-color-java: #0374bd;
+  --openapi-code-tab-border-color-powershell: #00adef;
+  --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
+  --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
+  --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);
+  --openapi-code-tab-shadow-color-ruby: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-csharp: rgba(155, 79, 150, 0.25);
+  --opeanpi-code-tab-shadow-color-nodejs: rgba(0, 164, 0, 0.25);
+  --openapi-code-tab-shadow-color-php: rgba(97, 129, 182, 0.25);
+  --openapi-code-tab-shadow-color-java: rgba(3, 116, 189, 0.25);
+  --opeanpi-code-tab-shadow-color-powershell: rgba(3, 116, 189, 0.25);
 }
 
 [data-theme="dark"] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-beta.646",
+  "version": "0.0.0-beta.647",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -49,7 +49,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.646",
+    "docusaurus-plugin-openapi-docs": "0.0.0-beta.647",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
@@ -75,5 +75,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "15ab01afc0523c9407b75c66b33e2df018af0f6d"
+  "gitHead": "358ce5cd595fdd63d86b95dbc0f58569d9a15eaf"
 }

package/src/theme/ApiDemoPanel/CodeTabs/_CodeTabs.scss

@@ -12,11 +12,39 @@
 
 .openapi-tabs__code-container {
   margin-bottom: 1rem;
+
+  .openapi-tabs__code-item {
+    display: flex;
+    flex-direction: column-reverse;
+    flex: 0 0 80px;
+    align-items: center;
+    padding: 0.5rem 0 !important;
+    margin-top: 0 !important;
+    margin-right: 0.5rem;
+    border: 1px solid transparent;
+    transition: 300ms;
+
+    &:not(.active):hover {
+      border: 1px solid var(--openapi-code-tab-border-color);
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    span {
+      padding-top: 0.5rem;
+      color: var(--ifm-font-color-secondary);
+      font-size: 10px;
+      text-transform: uppercase;
+    }
+  }
 }
 
 .openapi-tabs__code-list-container {
   display: flex;
   justify-content: flex-start;
+  padding: 0.25rem;
   padding-bottom: 0.6rem;
 }
 
@@ -34,20 +62,20 @@ body[class="ReactModal__Body--open"] {
   }
 }
 
-.openapi-tabs__code-item {
-  margin-top: 0 !important;
-  margin-right: 0.5rem;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+.openapi-tabs__code-item--variant {
+  color: var(--ifm-color-secondary);
 
   &.active {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-color: var(--ifm-toc-border-color);
   }
 }
 
+.openapi-tabs__code-item--variant > span {
+  padding-top: unset !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .openapi-tabs__code-item--python {
   color: var(--ifm-color-success);
 
@@ -55,13 +83,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/python/python-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-python);
+    border-color: var(--openapi-code-tab-border-color-python);
   }
 }
 
@@ -72,13 +101,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original-wordmark.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-info);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-go);
+    border-color: var(--openapi-code-tab-border-color-go);
   }
 }
 
@@ -89,13 +119,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-js);
+    border-color: var(--openapi-code-tab-border-color-js);
   }
 }
 
@@ -106,15 +137,16 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/bash/bash-plain.svg")
+      no-repeat;
     margin-block: auto;
     background-color: var(--bash-background-color);
     border-radius: var(--bash-border-radius);
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-bash);
+    border-color: var(--ifm-color-danger);
   }
 }
 
@@ -125,13 +157,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/ruby/ruby-plain.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-danger);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-ruby);
+    border-color: var(--openapi-code-tab-border-color-ruby);
   }
 }
 
@@ -142,13 +175,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/csharp/csharp-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-csharp);
+    border-color: var(--openapi-code-tab-border-color-csharp);
   }
 }
 
@@ -159,13 +193,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/nodejs/nodejs-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-nodejs);
+    border-color: var(--openapi-code-tab-border-color-nodejs);
   }
 }
 
@@ -176,13 +211,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/php/php-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-gray-500);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-php);
+    border-color: var(--openapi-code-tab-border-color-php);
   }
 }
 
@@ -193,13 +229,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/java/java-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-warning);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--openapi-code-tab-shadow-color-java);
+    border-color: var(--openapi-code-tab-border-color-java);
   }
 }
 
@@ -210,13 +247,14 @@ body[class="ReactModal__Body--open"] {
     content: "";
     width: var(--code-tab-logo-width);
     height: var(--code-tab-logo-height);
-    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg");
+    background: url("https://raw.githubusercontent.com/devicons/devicon/master/icons/windows8/windows8-original.svg")
+      no-repeat;
     margin-block: auto;
   }
 
   &.active {
-    border-bottom-color: var(--ifm-color-success);
-    background-color: var(--ifm-color-emphasis-100);
+    box-shadow: 0 0 0 3px var(--opeanpi-code-tab-shadow-color-powershell);
+    border-color: var(--openapi-code-tab-border-color-powershell);
   }
 }
 

package/src/theme/ApiDemoPanel/CodeTabs/index.js

@@ -17,6 +17,8 @@ import clsx from "clsx";
 
 function TabList({
   action,
+  currentLanguage,
+  includeVariant,
   className,
   block,
   selectedValue,
@@ -38,10 +40,20 @@ function TabList({
     }
 
     if (action) {
-      const newLanguage = languageSet.filter(
-        (lang) => lang.language === newTabValue
-      );
-      action(newLanguage[0]);
+      let newLanguage;
+      if (currentLanguage && includeVariant) {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === currentLanguage
+        )[0];
+        newLanguage.variant = newTabValue;
+        action.setSelectedVariant(newTabValue.toLowerCase());
+      } else {
+        newLanguage = languageSet.filter(
+          (lang) => lang.language === newTabValue
+        )[0];
+        action.setSelectedVariant(newLanguage.variant.toLowerCase());
+      }
+      action.setLanguage(newLanguage);
     }
   };
 
@@ -101,7 +113,7 @@ function TabList({
             }
           )}
         >
-          {label ?? value}
+          <span>{label ?? value}</span>
         </li>
       ))}
     </ul>

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

@@ -17,11 +17,12 @@ import { useTypedSelector } from "@theme/ApiItem/hooks";
 import merge from "lodash/merge";
 
 export interface Language {
-  highlight?: string;
+  highlight: string;
   language: string;
-  logoClass?: string;
-  variant?: string;
-  options?: { [key: string]: boolean };
+  logoClass: string;
+  variant: string;
+  variants: string[];
+  options: { [key: string]: boolean };
   source?: string;
 }
 
@@ -36,6 +37,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl"],
   },
   {
     highlight: "python",
@@ -46,6 +48,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "requests",
+    variants: ["requests", "http.client"],
   },
   {
     highlight: "go",
@@ -56,6 +59,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "native",
+    variants: ["native"],
   },
   {
     highlight: "javascript",
@@ -67,6 +71,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "axios",
+    variants: ["axios", "native", "request", "unirest"],
   },
   {
     highlight: "ruby",
@@ -77,6 +82,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "Net::HTTP",
+    variants: ["net::http"],
   },
   {
     highlight: "csharp",
@@ -87,6 +93,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestSharp",
+    variants: ["restsharp", "httpclient"],
   },
   {
     highlight: "php",
@@ -97,6 +104,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "cURL",
+    variants: ["curl", "guzzle", "pecl_http", "http_request2"],
   },
   {
     highlight: "java",
@@ -107,6 +115,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "OkHttp",
+    variants: ["okhttp", "unirest"],
   },
   {
     highlight: "powershell",
@@ -117,6 +126,7 @@ export const languageSet: Language[] = [
       trimRequestBody: true,
     },
     variant: "RestMethod",
+    variants: ["restmethod"],
   },
 ];
 
@@ -173,7 +183,7 @@ function Curl({ postman, codeSamples }: Props) {
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
-
+  const [selectedVariant, setSelectedVariant] = useState();
   const [language, setLanguage] = useState(() => {
     // Return first index if only 1 user-defined language exists
     if (mergedLangs.length === 1) {
@@ -182,7 +192,6 @@ function Curl({ postman, codeSamples }: Props) {
     // Fall back to language in localStorage or first user-defined language
     return defaultLang[0] ?? mergedLangs[0];
   });
-
   const [codeText, setCodeText] = useState("");
 
   useEffect(() => {
@@ -198,7 +207,6 @@ function Curl({ postman, codeSamples }: Props) {
         server,
         auth,
       });
-
       codegen.convert(
         language.language,
         language.variant,
@@ -264,36 +272,90 @@ function Curl({ postman, codeSamples }: Props) {
     mergedLangs,
   ]);
 
+  useEffect(() => {
+    if (selectedVariant && selectedVariant !== language.variant) {
+      const postmanRequest = buildPostmanRequest(postman, {
+        queryParams,
+        pathParams,
+        cookieParams,
+        contentType,
+        accept,
+        headerParams,
+        body,
+        server,
+        auth,
+      });
+      codegen.convert(
+        language.language,
+        selectedVariant,
+        postmanRequest,
+        language.options,
+        (error: any, snippet: string) => {
+          if (error) {
+            return;
+          }
+          setCodeText(snippet);
+        }
+      );
+    }
+  });
+
   if (language === undefined) {
     return null;
   }
 
   return (
     <>
-      <CodeTabs groupId="code-samples" action={setLanguage}>
+      <CodeTabs
+        groupId="code-samples"
+        action={{
+          setLanguage: setLanguage,
+          setSelectedVariant: setSelectedVariant,
+        }}
+        lazy
+      >
         {mergedLangs.map((lang) => {
           return (
             <CodeTab
               value={lang.language}
-              label={""}
-              key={
-                lang.variant
-                  ? `${lang.language}-${lang.variant}`
-                  : lang.language
-              }
+              label={lang.language}
+              key={lang.language}
               attributes={{
                 className: `openapi-tabs__code-item--${lang.logoClass}`,
               }}
             >
-              {/* @ts-ignore */}
-              <ApiCodeBlock
-                language={lang.highlight}
-                className="openapi-demo__code-block"
-                title={`${lang.language} / ${lang.variant}`}
-                showLineNumbers={true}
+              <CodeTabs
+                action={{
+                  setLanguage: setLanguage,
+                  setSelectedVariant: setSelectedVariant,
+                }}
+                includeVariant={true}
+                currentLanguage={lang.language}
+                defaultValue={selectedVariant}
+                lazy
               >
-                {codeText}
-              </ApiCodeBlock>
+                {lang.variants.map((variant) => {
+                  return (
+                    <CodeTab
+                      value={variant.toLowerCase()}
+                      label={variant.toUpperCase()}
+                      key={`${lang.language}-${lang.variant}`}
+                      attributes={{
+                        className: `openapi-tabs__code-item--variant`,
+                      }}
+                    >
+                      {/* @ts-ignore */}
+                      <ApiCodeBlock
+                        language={lang.highlight}
+                        className="openapi-demo__code-block"
+                        showLineNumbers={true}
+                      >
+                        {codeText}
+                      </ApiCodeBlock>
+                    </CodeTab>
+                  );
+                })}
+              </CodeTabs>
             </CodeTab>
           );
         })}

package/src/theme/styles.scss

@@ -54,6 +54,27 @@
   --openapi-input-border: var(--ifm-color-primary);
   --openapi-input-background: var(--openapi-card-background-color);
   --openapi-tree-line-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color: var(--ifm-toc-border-color);
+  --openapi-code-tab-border-color-python: #ffdb50;
+  --openapi-code-tab-border-color-bash: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-go: var(--ifm-color-info);
+  --openapi-code-tab-border-color-js: var(--ifm-color-warning);
+  --openapi-code-tab-border-color-ruby: var(--ifm-color-danger);
+  --openapi-code-tab-border-color-csharp: #9b4f96;
+  --openapi-code-tab-border-color-nodejs: var(--ifm-color-success);
+  --openapi-code-tab-border-color-php: #6181b6;
+  --openapi-code-tab-border-color-java: #0374bd;
+  --openapi-code-tab-border-color-powershell: #00adef;
+  --openapi-code-tab-shadow-color-python: rgba(255, 219, 80, 0.25);
+  --openapi-code-tab-shadow-color-bash: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-go: rgba(84, 199, 236, 0.25);
+  --openapi-code-tab-shadow-color-js: rgba(255, 186, 0, 0.25);
+  --openapi-code-tab-shadow-color-ruby: rgba(250, 56, 62, 0.25);
+  --openapi-code-tab-shadow-color-csharp: rgba(155, 79, 150, 0.25);
+  --opeanpi-code-tab-shadow-color-nodejs: rgba(0, 164, 0, 0.25);
+  --openapi-code-tab-shadow-color-php: rgba(97, 129, 182, 0.25);
+  --openapi-code-tab-shadow-color-java: rgba(3, 116, 189, 0.25);
+  --opeanpi-code-tab-shadow-color-powershell: rgba(3, 116, 189, 0.25);
 }
 
 [data-theme="dark"] {