@clarify-labs/renderer 0.9.0 → 0.9.2

package/output/renderer.css

@@ -98,10 +98,12 @@
     --color-emerald-950: oklch(26.2% .051 172.552);
     --color-sky-50: oklch(97.7% .013 236.62);
     --color-sky-100: oklch(95.1% .026 236.824);
+    --color-sky-200: oklch(90.1% .058 230.902);
     --color-sky-300: oklch(82.8% .111 230.318);
     --color-sky-400: oklch(74.6% .16 232.661);
     --color-sky-500: oklch(68.5% .169 237.323);
     --color-sky-600: oklch(58.8% .158 241.966);
+    --color-sky-700: oklch(50% .134 242.749);
     --color-sky-900: oklch(39.1% .09 240.876);
     --color-sky-950: oklch(29.3% .066 243.157);
     --color-violet-300: oklch(81.1% .111 293.571);
@@ -113,10 +115,10 @@
     --color-rose-50: oklch(96.9% .015 12.422);
     --color-rose-100: oklch(94.1% .03 12.58);
     --color-rose-200: oklch(89.2% .058 10.001);
-    --color-rose-300: oklch(81% .117 11.638);
     --color-rose-400: oklch(71.2% .194 13.428);
     --color-rose-500: oklch(64.5% .246 16.439);
     --color-rose-600: oklch(58.6% .253 17.585);
+    --color-rose-700: oklch(51.4% .222 16.935);
     --color-rose-900: oklch(41% .159 10.272);
     --color-rose-950: oklch(27.1% .105 12.094);
     --color-zinc-50: oklch(98.5% 0 0);
@@ -685,6 +687,64 @@
     --clarify-schema-row-nested-width: calc(100% + 1rem);
     --clarify-server-url-max-width: min(36%, 16rem);
     --clarify-openapi-control-grid: minmax(0, 1fr) minmax(0, 1.2fr);
+    --clarify-openapi-variable-grid: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    --clarify-http-method-get-background: #00d2943d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-get-background: color-mix(in srgb, var(--color-emerald-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-get-text: var(--color-emerald-700);
+    --clarify-http-method-post-background: #00bcfe3d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-post-background: color-mix(in srgb, var(--color-sky-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-post-text: var(--color-sky-700);
+    --clarify-http-method-put-background: #fcbb0047;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-put-background: color-mix(in srgb, var(--color-amber-400) 28%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-put-text: var(--color-amber-700);
+    --clarify-http-method-patch-background: var(--clarify-http-method-put-background);
+    --clarify-http-method-patch-text: var(--clarify-http-method-put-text);
+    --clarify-http-method-delete-background: #ff667f3d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-delete-background: color-mix(in srgb, var(--color-rose-400) 24%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-delete-text: var(--color-rose-700);
+    --clarify-http-method-default-background: #9f9fa933;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-http-method-default-background: color-mix(in srgb, var(--color-zinc-400) 20%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-http-method-default-text: var(--color-zinc-800);
     --clarify-search-dialog-padding-block-lg: 15vh;
     --clarify-search-max-width: 36vw;
     --clarify-ui-control-font-size: .875rem;
@@ -846,6 +906,61 @@
 
   .dark, .dark .clarify-app {
     --clarify-code-border: #ffffff1f;
+    --clarify-http-method-get-background: #00d2944d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-get-background: color-mix(in srgb, var(--color-emerald-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-get-text: var(--color-emerald-200);
+    --clarify-http-method-post-background: #00bcfe4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-post-background: color-mix(in srgb, var(--color-sky-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-post-text: var(--color-sky-200);
+    --clarify-http-method-put-background: #fcbb0057;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-put-background: color-mix(in srgb, var(--color-amber-400) 34%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-put-text: var(--color-amber-200);
+    --clarify-http-method-delete-background: #ff667f4d;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-delete-background: color-mix(in srgb, var(--color-rose-400) 30%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-delete-text: var(--color-rose-200);
+    --clarify-http-method-default-background: #9f9fa942;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-http-method-default-background: color-mix(in srgb, var(--color-zinc-400) 26%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-http-method-default-text: var(--color-zinc-100);
   }
 
   .clarify-ui-control {
@@ -2865,6 +2980,30 @@
     background-color: var(--clarify-code-surface);
   }
 
+  .bg-\(--clarify-http-method-default-background\) {
+    background-color: var(--clarify-http-method-default-background);
+  }
+
+  .bg-\(--clarify-http-method-delete-background\) {
+    background-color: var(--clarify-http-method-delete-background);
+  }
+
+  .bg-\(--clarify-http-method-get-background\) {
+    background-color: var(--clarify-http-method-get-background);
+  }
+
+  .bg-\(--clarify-http-method-patch-background\) {
+    background-color: var(--clarify-http-method-patch-background);
+  }
+
+  .bg-\(--clarify-http-method-post-background\) {
+    background-color: var(--clarify-http-method-post-background);
+  }
+
+  .bg-\(--clarify-http-method-put-background\) {
+    background-color: var(--clarify-http-method-put-background);
+  }
+
   .bg-\(--clarify-skeleton-accent-background\) {
     background-color: var(--clarify-skeleton-accent-background);
   }
@@ -2959,16 +3098,6 @@
     }
   }
 
-  .bg-amber-400\/15 {
-    background-color: #fcbb0026;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-amber-400\/15 {
-      background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
-    }
-  }
-
   .bg-emerald-50\/50 {
     background-color: #ecfdf580;
   }
@@ -3037,16 +3166,6 @@
     background-color: var(--color-rose-400);
   }
 
-  .bg-rose-400\/15 {
-    background-color: #ff667f26;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-rose-400\/15 {
-      background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
-    }
-  }
-
   .bg-sky-50\/50 {
     background-color: #f0f9ff80;
   }
@@ -3067,16 +3186,6 @@
     }
   }
 
-  .bg-sky-400\/15 {
-    background-color: #00bcfe26;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-sky-400\/15 {
-      background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
-    }
-  }
-
   .bg-transparent {
     background-color: #0000;
   }
@@ -3097,16 +3206,6 @@
     background-color: var(--color-zinc-300);
   }
 
-  .bg-zinc-400\/15 {
-    background-color: #9f9fa926;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-zinc-400\/15 {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 15%, transparent);
-    }
-  }
-
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
@@ -3574,6 +3673,30 @@
     color: var(--clarify-error-accent-text);
   }
 
+  .text-\(--clarify-http-method-default-text\) {
+    color: var(--clarify-http-method-default-text);
+  }
+
+  .text-\(--clarify-http-method-delete-text\) {
+    color: var(--clarify-http-method-delete-text);
+  }
+
+  .text-\(--clarify-http-method-get-text\) {
+    color: var(--clarify-http-method-get-text);
+  }
+
+  .text-\(--clarify-http-method-patch-text\) {
+    color: var(--clarify-http-method-patch-text);
+  }
+
+  .text-\(--clarify-http-method-post-text\) {
+    color: var(--clarify-http-method-post-text);
+  }
+
+  .text-\(--clarify-http-method-put-text\) {
+    color: var(--clarify-http-method-put-text);
+  }
+
   .text-\(--clarify-theme-tokens-colors-background\) {
     color: var(--clarify-theme-tokens-colors-background);
   }
@@ -3726,10 +3849,6 @@
     color: var(--color-zinc-500);
   }
 
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
-
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
@@ -4386,6 +4505,10 @@
       grid-template-columns: var(--clarify-openapi-control-grid);
     }
 
+    .sm\:grid-cols-\(--clarify-openapi-variable-grid\) {
+      grid-template-columns: var(--clarify-openapi-variable-grid);
+    }
+
     .sm\:grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -4811,16 +4934,6 @@
     }
   }
 
-  .dark\:bg-amber-400\/20:where(.dark, .dark *) {
-    background-color: #fcbb0033;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-amber-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-amber-500\/10:where(.dark, .dark *) {
     background-color: #f99c001a;
   }
@@ -4861,16 +4974,6 @@
     }
   }
 
-  .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
-    background-color: #00d29433;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-red-500\/10:where(.dark, .dark *) {
     background-color: #fb2c361a;
   }
@@ -4901,16 +5004,6 @@
     }
   }
 
-  .dark\:bg-rose-400\/20:where(.dark, .dark *) {
-    background-color: #ff667f33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-rose-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-sky-400\/5:where(.dark, .dark *) {
     background-color: #00bcfe0d;
   }
@@ -4921,16 +5014,6 @@
     }
   }
 
-  .dark\:bg-sky-400\/20:where(.dark, .dark *) {
-    background-color: #00bcfe33;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-sky-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-white:where(.dark, .dark *) {
     background-color: var(--color-white);
   }
@@ -4955,16 +5038,6 @@
     }
   }
 
-  .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
-    background-color: #9f9fa933;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
-    }
-  }
-
   .dark\:bg-zinc-600:where(.dark, .dark *) {
     background-color: var(--color-zinc-600);
   }
@@ -5041,10 +5114,6 @@
     color: var(--color-amber-200);
   }
 
-  .dark\:text-amber-300:where(.dark, .dark *) {
-    color: var(--color-amber-300);
-  }
-
   .dark\:text-amber-400:where(.dark, .dark *) {
     color: var(--color-amber-400);
   }
@@ -5073,10 +5142,6 @@
     color: var(--color-rose-100);
   }
 
-  .dark\:text-rose-300:where(.dark, .dark *) {
-    color: var(--color-rose-300);
-  }
-
   .dark\:text-rose-400:where(.dark, .dark *) {
     color: var(--color-rose-400);
   }
@@ -5089,10 +5154,6 @@
     color: var(--color-sky-100);
   }
 
-  .dark\:text-sky-300:where(.dark, .dark *) {
-    color: var(--color-sky-300);
-  }
-
   .dark\:text-sky-400:where(.dark, .dark *) {
     color: var(--color-sky-400);
   }

package/output/server.cjs

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_PageActions = require("./PageActions-DOKkt2zo.cjs");
-const require_ClarifyShell = require("./ClarifyShell-B74Fq4UU.cjs");
+const require_PageActions = require("./PageActions-B08cDCzq.cjs");
+const require_ClarifyShell = require("./ClarifyShell-DdYRgrfY.cjs");
 let react = require("react");
 let react_router_dom = require("react-router-dom");
 let react_jsx_runtime = require("react/jsx-runtime");

package/output/server.js

@@ -1,5 +1,5 @@
-import { E as prefixHref } from "./PageActions-BwY7ierv.js";
-import { t as ClarifyShell } from "./ClarifyShell-BPv2bxI4.js";
+import { E as prefixHref } from "./PageActions-tmnpzi23.js";
+import { t as ClarifyShell } from "./ClarifyShell-C38EkErX.js";
 import { StrictMode } from "react";
 import { StaticRouter } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";

package/output/shell/Header.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { Config, NavigationNode, NavigationTab, RouteItem } from '../types';
 export declare const Header: import('react').ForwardRefExoticComponent<Omit<Omit<import('framer-motion').HTMLMotionProps<"header">, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & {
     config: Config;
@@ -7,4 +8,5 @@ export declare const Header: import('react').ForwardRefExoticComponent<Omit<Omit
     currentLocale?: string;
     currentRoute?: RouteItem;
     banner?: React.ReactNode;
+    topAreaRef?: RefObject<HTMLDivElement | null>;
 } & import('react').RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarify-labs/renderer",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "license": "AGPL-3.0-only",
   "type": "module",
   "repository": {