@clarify-labs/renderer 0.10.3 → 0.11.1

package/output/renderer.css

@@ -91,7 +91,6 @@
     --color-emerald-500: oklch(69.6% .17 162.48);
     --color-emerald-600: oklch(59.6% .145 163.225);
     --color-emerald-700: oklch(50.8% .118 165.612);
-    --color-emerald-800: oklch(43.2% .095 166.913);
     --color-emerald-900: oklch(37.8% .077 168.94);
     --color-sky-50: oklch(97.7% .013 236.62);
     --color-sky-100: oklch(95.1% .026 236.824);
@@ -138,6 +137,7 @@
     --container-3xl: 50rem;
     --container-4xl: 56rem;
     --container-6xl: 72rem;
+    --container-7xl: 80rem;
     --text-xs: .8125rem;
     --text-xs--line-height: 1.5rem;
     --text-sm: .875rem;
@@ -520,7 +520,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 72%, transparent);
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 84%, var(--clarify-theme-tokens-colors-background));
     }
   }
 
@@ -530,7 +530,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 58%, transparent);
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 74%, var(--clarify-theme-tokens-colors-background));
     }
   }
 
@@ -626,36 +626,9 @@
   }
 
   :root, .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 88%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 86%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  :root, .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1a;
     --clarify-code-text: var(--color-zinc-100);
     --clarify-code-control-text: var(--color-zinc-300);
@@ -684,6 +657,13 @@
   }
 
   :root, .clarify-app {
+    --clarify-code-property: #0369a1;
+    --clarify-code-string: #047857;
+    --clarify-code-number: #a16207;
+    --clarify-code-success: #047857;
+    --clarify-code-danger: #be123c;
+    --clarify-code-danger-border: #fb718547;
+    --clarify-code-danger-background: #fb71851a;
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
@@ -810,7 +790,7 @@
     --clarify-ui-menu-line-height: 1.5rem;
     --clarify-ui-description-font-size: .75rem;
     --clarify-ui-description-line-height: 1.25rem;
-    --clarify-ui-tight-letter-spacing: -.01em;
+    --clarify-ui-tight-letter-spacing: 0;
     --clarify-ui-search-field-font-size: .9375rem;
     --clarify-ui-search-field-line-height: 1.5rem;
     --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
@@ -942,37 +922,17 @@
   }
 
   .dark, .dark .clarify-app {
-    --clarify-code-background: #020617;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-background: color-mix(in srgb, #020617 94%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-surface: #0f172a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-surface: color-mix(in srgb, #0f172a 92%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
-    --clarify-code-header-background: #111827;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark, .dark .clarify-app {
-      --clarify-code-header-background: color-mix(in srgb, #111827 90%, var(--clarify-theme-tokens-colors-primary));
-    }
-  }
-
-  .dark, .dark .clarify-app {
+    --clarify-code-background: #18181b;
+    --clarify-code-surface: #202023;
+    --clarify-code-header-background: #242427;
     --clarify-code-border: #ffffff1f;
+    --clarify-code-property: #7dd3fc;
+    --clarify-code-string: #6ee7b7;
+    --clarify-code-number: #fcd34d;
+    --clarify-code-success: #6ee7b7;
+    --clarify-code-danger: #fda4af;
+    --clarify-code-danger-border: #fb718559;
+    --clarify-code-danger-background: #fb71851f;
     --clarify-http-method-get-background: #00d2944d;
   }
 
@@ -1041,6 +1001,41 @@
     --clarify-http-method-default-text: var(--color-zinc-100);
   }
 
+  .clarify-api-response {
+    --shiki-color-text: var(--clarify-ui-text-strong);
+    --shiki-token-constant: #047857;
+    --shiki-token-string: #047857;
+    --shiki-token-comment: #52525b;
+    --shiki-token-keyword: #0369a1;
+    --shiki-token-parameter: #be123c;
+    --shiki-token-function: #6d28d9;
+    --shiki-token-string-expression: #047857;
+    --shiki-token-punctuation: #52525b;
+    --clarify-code-background: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-surface: var(--clarify-theme-tokens-colors-surface);
+    --clarify-code-header-background: var(--clarify-ui-subtle-background);
+    --clarify-code-border: var(--clarify-theme-tokens-colors-border);
+    --clarify-code-text: var(--clarify-ui-text-strong);
+    --clarify-code-control-text: var(--clarify-ui-text);
+    --clarify-code-muted: var(--clarify-ui-text-soft);
+    --clarify-code-faint: var(--clarify-ui-text-faint);
+    --clarify-code-control-background: var(--clarify-ui-subtle-background);
+    --clarify-code-control-background-hover: var(--clarify-ui-hover-background);
+    --clarify-code-control-background-active: var(--clarify-ui-active-background);
+  }
+
+  .dark .clarify-api-response {
+    --shiki-color-text: var(--color-white);
+    --shiki-token-constant: var(--color-emerald-300);
+    --shiki-token-string: var(--color-emerald-300);
+    --shiki-token-comment: var(--color-zinc-500);
+    --shiki-token-keyword: var(--color-sky-300);
+    --shiki-token-parameter: var(--color-pink-300);
+    --shiki-token-function: var(--color-violet-300);
+    --shiki-token-string-expression: var(--color-emerald-300);
+    --shiki-token-punctuation: var(--color-zinc-200);
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -1773,10 +1768,6 @@
     top: calc(var(--spacing) * 14);
   }
 
-  .top-\[calc\(100\%\+0\.5rem\)\] {
-    top: calc(100% + .5rem);
-  }
-
   .top-full {
     top: 100%;
   }
@@ -1801,6 +1792,10 @@
     right: calc(var(--spacing) * 4);
   }
 
+  .right-auto {
+    right: auto;
+  }
+
   .-bottom-1 {
     bottom: calc(var(--spacing) * -1);
   }
@@ -1821,8 +1816,8 @@
     bottom: calc(var(--spacing) * 4);
   }
 
-  .bottom-\[calc\(100\%\+0\.5rem\)\] {
-    bottom: calc(100% + .5rem);
+  .bottom-auto {
+    bottom: auto;
   }
 
   .-left-3\.5 {
@@ -1861,6 +1856,14 @@
     z-index: 50;
   }
 
+  .z-60 {
+    z-index: 60;
+  }
+
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+
   .col-start-1 {
     grid-column-start: 1;
   }
@@ -1869,10 +1872,26 @@
     grid-column-start: 2;
   }
 
+  .col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .col-start-5 {
+    grid-column-start: 5;
+  }
+
   .row-start-1 {
     grid-row-start: 1;
   }
 
+  .row-start-2 {
+    grid-row-start: 2;
+  }
+
   .container {
     width: 100%;
   }
@@ -1911,10 +1930,6 @@
     margin: 0;
   }
 
-  .-mx-2 {
-    margin-inline: calc(var(--spacing) * -2);
-  }
-
   .mx-0 {
     margin-inline: 0;
   }
@@ -2319,8 +2334,12 @@
     margin-top: calc(var(--spacing) * 8);
   }
 
-  .mt-16 {
-    margin-top: calc(var(--spacing) * 16);
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
   }
 
   .-mr-0\.5 {
@@ -2335,8 +2354,8 @@
     margin-right: calc(var(--spacing) * -2);
   }
 
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
+  .mr-1 {
+    margin-right: var(--spacing);
   }
 
   .mr-auto {
@@ -2471,6 +2490,11 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -2491,6 +2515,11 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .size-10 {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+  }
+
   .size-11 {
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
@@ -2553,10 +2582,18 @@
     height: calc(var(--spacing) * 14);
   }
 
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
+
   .h-100 {
     height: calc(var(--spacing) * 100);
   }
 
+  .h-\[min\(46rem\,calc\(100dvh-1\.5rem\)\)\] {
+    height: min(46rem, 100dvh - 1.5rem);
+  }
+
   .h-auto {
     height: auto;
   }
@@ -2621,10 +2658,30 @@
     min-height: calc(var(--spacing) * 9);
   }
 
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
 
+  .min-h-44 {
+    min-height: calc(var(--spacing) * 44);
+  }
+
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
+
+  .min-h-72 {
+    min-height: calc(var(--spacing) * 72);
+  }
+
+  .min-h-96 {
+    min-height: calc(var(--spacing) * 96);
+  }
+
   .min-h-full {
     min-height: 100%;
   }
@@ -2637,10 +2694,6 @@
     width: 100% !important;
   }
 
-  .w-\(--clarify-schema-row-nested-width\) {
-    width: var(--clarify-schema-row-nested-width);
-  }
-
   .w-\(--clarify-theme-editor-width\) {
     width: var(--clarify-theme-editor-width);
   }
@@ -2669,6 +2722,10 @@
     width: 66.6667%;
   }
 
+  .w-2\/5 {
+    width: 40%;
+  }
+
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -2805,6 +2862,10 @@
     max-width: var(--container-6xl);
   }
 
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+
   .max-w-32 {
     max-width: calc(var(--spacing) * 32);
   }
@@ -2817,6 +2878,10 @@
     max-width: calc(var(--spacing) * 64);
   }
 
+  .max-w-80 {
+    max-width: calc(var(--spacing) * 80);
+  }
+
   .max-w-\[82\%\] {
     max-width: 82%;
   }
@@ -2853,6 +2918,10 @@
     min-width: calc(var(--spacing) * 28);
   }
 
+  .min-w-96 {
+    min-width: calc(var(--spacing) * 96);
+  }
+
   .min-w-max {
     min-width: max-content;
   }
@@ -2877,6 +2946,14 @@
     flex-grow: 1;
   }
 
+  .table-fixed {
+    table-layout: fixed;
+  }
+
+  .border-collapse {
+    border-collapse: collapse;
+  }
+
   .origin-top {
     transform-origin: top;
   }
@@ -2900,11 +2977,20 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .translate-y-0 {
     --tw-translate-y: 0;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .-rotate-90 {
+    rotate: -90deg;
+  }
+
   .rotate-180 {
     rotate: 180deg;
   }
@@ -2954,6 +3040,14 @@
     resize: both;
   }
 
+  .resize-none {
+    resize: none;
+  }
+
+  .resize-y {
+    resize: vertical;
+  }
+
   .scroll-mt-24 {
     scroll-margin-top: calc(var(--spacing) * 24);
   }
@@ -2986,10 +3080,34 @@
     grid-template-columns: 1fr minmax(0, 2fr) 1fr;
   }
 
+  .grid-cols-\[2rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 2rem minmax(0, 1fr);
+  }
+
+  .grid-cols-\[auto_auto_minmax\(0\,1fr\)_auto_auto\] {
+    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+  }
+
   .grid-cols-\[auto_minmax\(0\,1fr\)\] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.3fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
+  }
+
+  .grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+
+  .grid-rows-\[auto_minmax\(11rem\,1fr\)\] {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
+  .grid-rows-\[minmax\(11rem\,1fr\)\] {
+    grid-template-rows: minmax(11rem, 1fr);
+  }
+
   .flex-col {
     flex-direction: column;
   }
@@ -3010,10 +3128,6 @@
     align-items: center;
   }
 
-  .items-end {
-    align-items: flex-end;
-  }
-
   .items-start {
     align-items: flex-start;
   }
@@ -3058,6 +3172,10 @@
     gap: calc(var(--spacing) * 2);
   }
 
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -3112,6 +3230,10 @@
     margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
+
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -3291,11 +3413,21 @@
     border-right-width: 1px;
   }
 
+  .\!border-b-0 {
+    border-bottom-style: var(--tw-border-style) !important;
+    border-bottom-width: 0 !important;
+  }
+
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
 
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -3315,6 +3447,10 @@
     border-color: var(--clarify-code-border);
   }
 
+  .border-\(--clarify-code-danger-border\) {
+    border-color: var(--clarify-code-danger-border);
+  }
+
   .border-\(--clarify-error-accent-text\) {
     border-color: var(--clarify-error-accent-text);
   }
@@ -3433,6 +3569,14 @@
     background-color: var(--clarify-code-control-background);
   }
 
+  .bg-\(--clarify-code-danger\) {
+    background-color: var(--clarify-code-danger);
+  }
+
+  .bg-\(--clarify-code-danger-background\) {
+    background-color: var(--clarify-code-danger-background);
+  }
+
   .bg-\(--clarify-code-faint\) {
     background-color: var(--clarify-code-faint);
   }
@@ -3441,6 +3585,10 @@
     background-color: var(--clarify-code-header-background);
   }
 
+  .bg-\(--clarify-code-success\) {
+    background-color: var(--clarify-code-success);
+  }
+
   .bg-\(--clarify-code-surface\) {
     background-color: var(--clarify-code-surface);
   }
@@ -3545,6 +3693,10 @@
     background-color: var(--clarify-ui-active-background);
   }
 
+  .bg-\(--clarify-ui-overlay-background\) {
+    background-color: var(--clarify-ui-overlay-background);
+  }
+
   .bg-\(--clarify-ui-subtle-background\) {
     background-color: var(--clarify-ui-subtle-background);
   }
@@ -3901,6 +4053,10 @@
     padding-inline: calc(var(--spacing) * 3);
   }
 
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -3913,10 +4069,6 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
-  .py-0 {
-    padding-block: 0;
-  }
-
   .py-0\.5 {
     padding-block: calc(var(--spacing) * .5);
   }
@@ -3945,6 +4097,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -3961,6 +4117,10 @@
     padding-top: calc(var(--spacing) * .5);
   }
 
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -3989,6 +4149,10 @@
     padding-top: calc(var(--spacing) * 26);
   }
 
+  .pr-1 {
+    padding-right: var(--spacing);
+  }
+
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -4057,10 +4221,6 @@
     text-align: left;
   }
 
-  .text-right {
-    text-align: right;
-  }
-
   .align-baseline {
     vertical-align: baseline;
   }
@@ -4069,6 +4229,10 @@
     vertical-align: middle;
   }
 
+  .align-top {
+    vertical-align: top;
+  }
+
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -4220,6 +4384,10 @@
     overflow-wrap: break-word;
   }
 
+  .break-all {
+    word-break: break-all;
+  }
+
   .whitespace-normal {
     white-space: normal;
   }
@@ -4240,6 +4408,10 @@
     color: var(--clarify-code-control-text);
   }
 
+  .text-\(--clarify-code-danger\) {
+    color: var(--clarify-code-danger);
+  }
+
   .text-\(--clarify-code-faint\) {
     color: var(--clarify-code-faint);
   }
@@ -4248,6 +4420,14 @@
     color: var(--clarify-code-muted);
   }
 
+  .text-\(--clarify-code-property\) {
+    color: var(--clarify-code-property);
+  }
+
+  .text-\(--clarify-code-success\) {
+    color: var(--clarify-code-success);
+  }
+
   .text-\(--clarify-code-text\) {
     color: var(--clarify-code-text);
   }
@@ -4352,10 +4532,6 @@
     color: var(--color-emerald-700);
   }
 
-  .text-emerald-800 {
-    color: var(--color-emerald-800);
-  }
-
   .text-emerald-900 {
     color: var(--color-emerald-900);
   }
@@ -4448,6 +4624,10 @@
     text-decoration-line: underline;
   }
 
+  .accent-\(--clarify-theme-tokens-colors-primary\) {
+    accent-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -4678,6 +4858,10 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  .filter {
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .backdrop-blur {
     --tw-backdrop-blur: blur(8px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -4783,6 +4967,66 @@
     --anchor-gap: calc(var(--spacing) * 2);
   }
 
+  .\[--clarify-theme-tokens-radius-lg\:6px\] {
+    --clarify-theme-tokens-radius-lg: 6px;
+  }
+
+  .\[--clarify-theme-tokens-radius-md\:4px\] {
+    --clarify-theme-tokens-radius-md: 4px;
+  }
+
+  .\[--clarify-theme-tokens-radius-sm\:2px\] {
+    --clarify-theme-tokens-radius-sm: 2px;
+  }
+
+  .\[--clarify-theme-tokens-radius-xl\:8px\] {
+    --clarify-theme-tokens-radius-xl: 8px;
+  }
+
+  .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+    --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_10\%\,transparent\)\] {
+      --clarify-ui-accent-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 10%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+    --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-accent-border\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_22\%\,transparent\)\] {
+      --clarify-ui-accent-border: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 22%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-accent-text\:var\(--clarify-theme-tokens-colors-foreground\)\] {
+    --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+    --clarify-ui-active-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-active-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_12\%\,transparent\)\] {
+      --clarify-ui-active-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 12%,transparent);
+    }
+  }
+
+  .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+    --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[--clarify-ui-subtle-background\:color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\] {
+      --clarify-ui-subtle-background: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
+    }
+  }
+
   .\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\] {
     --tw-prose-links-hover: var(--clarify-ui-accent-text);
   }
@@ -4807,11 +5051,29 @@
     margin: 0;
   }
 
+  .group-open\:rotate-0:is(:where(.group):is([open], :popover-open, :open) *) {
+    rotate: 0deg;
+  }
+
+  .group-open\:border-b:is(:where(.group):is([open], :popover-open, :open) *) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .group-open\:border-\(--clarify-theme-tokens-colors-border\):is(:where(.group):is([open], :popover-open, :open) *) {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
   .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
     opacity: 1;
   }
 
   @media (hover: hover) {
+    .group-hover\:-translate-x-0\.5:is(:where(.group):hover *) {
+      --tw-translate-x: calc(var(--spacing) * -.5);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+
     .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
       --tw-translate-x: calc(var(--spacing) * .5);
       translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -4863,6 +5125,48 @@
     opacity: 1;
   }
 
+  .file\:mr-2::file-selector-button {
+    margin-right: calc(var(--spacing) * 2);
+  }
+
+  .file\:rounded-\(--clarify-theme-tokens-radius-md\)::file-selector-button {
+    border-radius: var(--clarify-theme-tokens-radius-md);
+  }
+
+  .file\:border::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .file\:border-\(--clarify-theme-tokens-colors-border\)::file-selector-button {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  .file\:bg-\(--clarify-ui-subtle-background\)::file-selector-button {
+    background-color: var(--clarify-ui-subtle-background);
+  }
+
+  .file\:px-2::file-selector-button {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .file\:py-1::file-selector-button {
+    padding-block: var(--spacing);
+  }
+
+  .file\:text-xs::file-selector-button {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
+  .file\:text-\(--clarify-ui-text-strong\)::file-selector-button {
+    color: var(--clarify-ui-text-strong);
+  }
+
+  .placeholder\:text-\(--clarify-code-faint\)::placeholder {
+    color: var(--clarify-code-faint);
+  }
+
   .placeholder\:text-\(--clarify-ui-text-faint\)::placeholder {
     color: var(--clarify-ui-text-faint);
   }
@@ -4888,10 +5192,38 @@
     margin-bottom: 0;
   }
 
+  .open\:grid:is([open], :popover-open, :open) {
+    display: grid;
+  }
+
+  .open\:min-h-55:is([open], :popover-open, :open) {
+    min-height: calc(var(--spacing) * 55);
+  }
+
+  .open\:shrink:is([open], :popover-open, :open) {
+    flex-shrink: 1;
+  }
+
+  .open\:grow:is([open], :popover-open, :open) {
+    flex-grow: 1;
+  }
+
+  .open\:basis-55:is([open], :popover-open, :open) {
+    flex-basis: calc(var(--spacing) * 55);
+  }
+
+  .open\:grid-rows-\[auto_minmax\(11rem\,1fr\)\]:is([open], :popover-open, :open) {
+    grid-template-rows: auto minmax(11rem, 1fr);
+  }
+
   .empty\:hidden:empty {
     display: none;
   }
 
+  .focus-within\:bg-\(--clarify-ui-hover-background\):focus-within {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus-within\:opacity-100:focus-within {
     opacity: 1;
   }
@@ -4914,8 +5246,8 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
 
-    .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
-      border-color: var(--clarify-theme-tokens-colors-primary);
+    .hover\:border-\(--clarify-code-border\):hover {
+      border-color: var(--clarify-code-border);
     }
 
     .hover\:border-\(--clarify-ui-accent-border\):hover {
@@ -4926,14 +5258,8 @@
       border-color: var(--clarify-ui-text-faint);
     }
 
-    .hover\:border-white\/20:hover {
-      border-color: #fff3;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-white\/20:hover {
-        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-      }
+    .hover\:bg-\(--clarify-code-control-background\):hover {
+      background-color: var(--clarify-code-control-background);
     }
 
     .hover\:bg-\(--clarify-code-control-background-hover\):hover {
@@ -4944,6 +5270,10 @@
       background-color: var(--clarify-theme-tokens-colors-background);
     }
 
+    .hover\:bg-\(--clarify-theme-tokens-colors-foreground\):hover {
+      background-color: var(--clarify-theme-tokens-colors-foreground);
+    }
+
     .hover\:bg-\(--clarify-ui-accent-background\):hover {
       background-color: var(--clarify-ui-accent-background);
     }
@@ -4966,6 +5296,10 @@
       color: var(--clarify-code-text);
     }
 
+    .hover\:text-\(--clarify-theme-tokens-colors-background\):hover {
+      color: var(--clarify-theme-tokens-colors-background);
+    }
+
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
       color: var(--clarify-theme-tokens-colors-foreground);
     }
@@ -4974,10 +5308,6 @@
       color: var(--clarify-ui-text-strong);
     }
 
-    .hover\:text-emerald-700:hover {
-      color: var(--color-emerald-700);
-    }
-
     .hover\:text-inherit:hover {
       color: inherit;
     }
@@ -4986,6 +5316,10 @@
       opacity: .8;
     }
 
+    .hover\:opacity-85:hover {
+      opacity: .85;
+    }
+
     .hover\:opacity-90:hover {
       opacity: .9;
     }
@@ -5026,6 +5360,10 @@
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
+  .focus\:bg-\(--clarify-ui-hover-background\):focus {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
   .focus\:text-\(--clarify-code-text\):focus {
     color: var(--clarify-code-text);
   }
@@ -5034,11 +5372,20 @@
     opacity: 1;
   }
 
+  .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .focus\:ring-2:focus {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus\:ring-\(--clarify-theme-tokens-colors-primary\):focus {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .focus\:ring-\(--clarify-ui-accent-border\):focus {
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
@@ -5048,11 +5395,27 @@
     outline-style: none;
   }
 
+  .focus\:ring-inset:focus {
+    --tw-ring-inset: inset;
+  }
+
+  .focus-visible\:bg-\(--clarify-ui-hover-background\):focus-visible {
+    background-color: var(--clarify-ui-hover-background);
+  }
+
+  .focus-visible\:opacity-100:focus-visible {
+    opacity: 1;
+  }
+
   .focus-visible\:ring-2:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus-visible\:ring-\(--clarify-theme-tokens-colors-foreground\):focus-visible {
+    --tw-ring-color: var(--clarify-theme-tokens-colors-foreground);
+  }
+
   .focus-visible\:ring-\(--clarify-theme-tokens-colors-primary\):focus-visible {
     --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -5093,6 +5456,22 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+
+  .disabled\:cursor-wait:disabled {
+    cursor: wait;
+  }
+
+  .disabled\:opacity-60:disabled {
+    opacity: .6;
+  }
+
+  .aria-invalid\:text-\(--clarify-error-accent-text\)[aria-invalid="true"] {
+    color: var(--clarify-error-accent-text);
+  }
+
   .data-closed\:-translate-x-full[data-closed] {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5109,6 +5488,10 @@
     opacity: 0;
   }
 
+  .data-disabled\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
+
   .data-enter\:duration-100[data-enter] {
     --tw-duration: .1s;
     transition-duration: .1s;
@@ -5159,18 +5542,8 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-\(--clarify-ui-accent-border\)[data-open] {
-    border-color: var(--clarify-ui-accent-border);
-  }
-
-  .data-open\:border-white\/20[data-open] {
-    border-color: #fff3;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:border-white\/20[data-open] {
-      border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-    }
+  .data-open\:border-\(--clarify-code-border\)[data-open] {
+    border-color: var(--clarify-code-border);
   }
 
   .data-open\:bg-\(--clarify-code-control-background-active\)[data-open] {
@@ -5227,6 +5600,14 @@
       right: calc(var(--spacing) * 3);
     }
 
+    .sm\:col-start-3 {
+      grid-column-start: 3;
+    }
+
+    .sm\:row-start-1 {
+      grid-row-start: 1;
+    }
+
     .sm\:mt-5 {
       margin-top: calc(var(--spacing) * 5);
     }
@@ -5243,6 +5624,10 @@
       display: inline;
     }
 
+    .sm\:h-\[min\(46rem\,calc\(100dvh-3rem\)\)\] {
+      height: min(46rem, 100dvh - 3rem);
+    }
+
     .sm\:w-auto {
       width: auto;
     }
@@ -5263,10 +5648,6 @@
       min-width: calc(var(--spacing) * 16);
     }
 
-    .sm\:grid-cols-\(--clarify-openapi-control-grid\) {
-      grid-template-columns: var(--clarify-openapi-control-grid);
-    }
-
     .sm\:grid-cols-\(--clarify-openapi-variable-grid\) {
       grid-template-columns: var(--clarify-openapi-variable-grid);
     }
@@ -5279,14 +5660,30 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 
+    .sm\:grid-cols-\[2rem_minmax\(0\,1fr\)_minmax\(0\,1fr\)\] {
+      grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
     .sm\:flex-row {
       flex-direction: row;
     }
 
+    .sm\:items-end {
+      align-items: flex-end;
+    }
+
     .sm\:items-start {
       align-items: flex-start;
     }
 
+    .sm\:items-stretch {
+      align-items: stretch;
+    }
+
     .sm\:justify-between {
       justify-content: space-between;
     }
@@ -5295,10 +5692,6 @@
       justify-content: flex-end;
     }
 
-    .sm\:justify-start {
-      justify-content: flex-start;
-    }
-
     .sm\:gap-2 {
       gap: calc(var(--spacing) * 2);
     }
@@ -5307,10 +5700,23 @@
       gap: calc(var(--spacing) * 4);
     }
 
+    .sm\:self-end {
+      align-self: flex-end;
+    }
+
+    .sm\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
     .sm\:p-5 {
       padding: calc(var(--spacing) * 5);
     }
 
+    .sm\:p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
+
     .sm\:p-8 {
       padding: calc(var(--spacing) * 8);
     }
@@ -5343,10 +5749,6 @@
       text-align: center;
     }
 
-    .sm\:text-left {
-      text-align: left;
-    }
-
     .sm\:text-2xl\/8 {
       font-size: var(--text-2xl);
       line-height: calc(var(--spacing) * 8);
@@ -5419,8 +5821,24 @@
       z-index: 50;
     }
 
-    .lg\:mt-24 {
-      margin-top: calc(var(--spacing) * 24);
+    .lg\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+
+    .lg\:col-start-4 {
+      grid-column-start: 4;
+    }
+
+    .lg\:col-start-5 {
+      grid-column-start: 5;
+    }
+
+    .lg\:col-start-6 {
+      grid-column-start: 6;
+    }
+
+    .lg\:row-start-1 {
+      grid-row-start: 1;
     }
 
     .lg\:block {
@@ -5467,6 +5885,14 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .lg\:grid-cols-\[auto_auto_minmax\(0\,1fr\)_minmax\(0\,14rem\)_auto_auto\] {
+      grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 14rem) auto auto;
+    }
+
+    .lg\:grid-cols-\[minmax\(0\,1\.12fr\)_minmax\(22rem\,0\.88fr\)\] {
+      grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
+    }
+
     .lg\:self-stretch {
       align-self: stretch;
     }
@@ -5475,6 +5901,16 @@
       overflow-y: auto;
     }
 
+    .lg\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .lg\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
     .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
       background-color: var(--clarify-theme-tokens-colors-background);
     }
@@ -5491,6 +5927,10 @@
       padding-block: var(--clarify-search-dialog-padding-block-lg);
     }
 
+    .lg\:pt-0 {
+      padding-top: 0;
+    }
+
     .lg\:pt-10 {
       padding-top: calc(var(--spacing) * 10);
     }
@@ -5565,6 +6005,24 @@
       justify-content: flex-end;
     }
 
+    .\@3xl\:border-t-0 {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0;
+    }
+
+    .\@3xl\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+
+    .\@3xl\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+
+    .\@3xl\:pl-8 {
+      padding-left: calc(var(--spacing) * 8);
+    }
+
     .\@3xl\:text-right {
       text-align: right;
     }
@@ -5732,16 +6190,6 @@
     }
   }
 
-  .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-    background-color: #00d29426;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
-    }
-  }
-
   .dark\:bg-red-500\/10:where(.dark, .dark *) {
     background-color: #fb2c361a;
   }
@@ -6134,10 +6582,6 @@
       }
     }
 
-    .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
-      color: var(--color-emerald-200);
-    }
-
     .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
       opacity: .8;
     }
@@ -6203,6 +6647,40 @@
     display: none;
   }
 
+  :is(.\*\:\[\[role\=tooltip\]\]\:w-80 > *)[role="tooltip"] {
+    width: calc(var(--spacing) * 80);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:max-w-\[min\(20rem\,calc\(100vw-2rem\)\)\] > *)[role="tooltip"] {
+    max-width: min(20rem, 100vw - 2rem);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:border > *)[role="tooltip"] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:border-\(--clarify-theme-tokens-colors-border\) > *)[role="tooltip"] {
+    border-color: var(--clarify-theme-tokens-colors-border);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:bg-\(--clarify-theme-tokens-colors-surface\) > *)[role="tooltip"] {
+    background-color: var(--clarify-theme-tokens-colors-surface);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:p-3 > *)[role="tooltip"] {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:text-\(--clarify-ui-text\) > *)[role="tooltip"] {
+    color: var(--clarify-ui-text);
+  }
+
+  :is(.\*\:\[\[role\=tooltip\]\]\:shadow-xl > *)[role="tooltip"] {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
     width: 100%;
   }