@clarify-labs/renderer 0.7.0 → 0.7.2

package/output/renderer.css

@@ -504,7 +504,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 88%, transparent);
+      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 90%, transparent);
     }
   }
 
@@ -514,7 +514,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) 68%, transparent);
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 72%, transparent);
     }
   }
 
@@ -524,7 +524,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) 54%, transparent);
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 58%, transparent);
     }
   }
 
@@ -534,7 +534,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
+      --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 6%, transparent);
     }
   }
 
@@ -544,7 +544,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
+      --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 12%, transparent);
     }
   }
 
@@ -554,7 +554,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 4%, transparent);
+      --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
     }
   }
 
@@ -564,7 +564,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 25%, transparent);
+      --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 28%, transparent);
     }
   }
 
@@ -575,7 +575,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 9%, transparent);
+      --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
     }
   }
 
@@ -585,7 +585,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     :root, .clarify-app {
-      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 22%, transparent);
     }
   }
 
@@ -600,12 +600,50 @@
   }
 
   :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-border: #ffffff1a;
+    --clarify-code-text: var(--color-zinc-100);
+    --clarify-code-muted: var(--color-zinc-400);
+    --clarify-code-faint: var(--color-zinc-500);
+    --clarify-code-control-background: #ffffff0f;
+    --clarify-code-control-background-hover: #ffffff1a;
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
     --clarify-layout-sidebar-grid-wide: 20rem minmax(0, 1fr);
     --clarify-sidebar-height: calc(100vh - 3.5rem);
+    --clarify-sidebar-height-with-banner: calc(100vh - 6.5rem);
     --clarify-sidebar-height-with-tabs: calc(100vh - 7rem);
+    --clarify-sidebar-height-with-tabs-and-banner: calc(100vh - 10rem);
     --clarify-popover-max-width: min(32rem, calc(100vw - 2rem));
     --clarify-code-header-min-height: calc(3rem + 1px);
     --clarify-feedback-actions-grid: 1fr 1px 1fr;
@@ -666,6 +704,36 @@
     --clarify-preview-count-badge-line-height: var(--clarify-ui-description-line-height);
   }
 
+  .dark, .dark .clarify-app {
+    --clarify-ui-text: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 92%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-text-soft: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 74%, transparent);
+    }
+  }
+
+  .dark, .dark .clarify-app {
+    --clarify-ui-text-faint: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 60%, transparent);
+    }
+  }
+
   .dark, .dark .clarify-app {
     --clarify-ui-hover-background: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -732,7 +800,7 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .dark, .dark .clarify-app {
-      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 28%, transparent);
+      --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 30%, transparent);
     }
   }
 
@@ -746,6 +814,40 @@
     }
   }
 
+  .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-border: #ffffff1f;
+  }
+
   .clarify-ui-control {
     color: var(--clarify-ui-text);
     font-size: var(--clarify-ui-control-font-size);
@@ -774,13 +876,23 @@
     transition-property: max-height, opacity, transform;
   }
 
+  .clarify-code-copy-copied {
+    border-color: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .clarify-code-copy-copied {
+      border-color: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 48%, var(--clarify-code-border));
+    }
+  }
+
   .clarify-code-copy-copied {
     background: var(--clarify-theme-tokens-colors-primary);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
     .clarify-code-copy-copied {
-      background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 12%, transparent);
+      background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 28%, var(--clarify-code-control-background));
     }
   }
 
@@ -790,10 +902,28 @@
 
   @supports (color: color-mix(in lab, red, red)) {
     .clarify-code-copy-copied {
-      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 24%, transparent);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 42%, transparent);
     }
   }
 
+  .clarify-mdx-page .clarify-page-title-row:first-child {
+    margin-bottom: 1rem;
+  }
+
+  .clarify-mdx-page .clarify-prose > .clarify-page-title-row:first-child .clarify-page-title, .clarify-openapi-header .clarify-page-title {
+    letter-spacing: -.04em;
+    max-width: 48rem;
+    font-size: clamp(2rem, 5vw, 3rem);
+    line-height: 1.05;
+  }
+
+  .clarify-mdx-page .clarify-prose > .clarify-page-title-row:first-child + p, .clarify-openapi-header .lead {
+    max-width: 44rem;
+    color: var(--clarify-ui-text-soft);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+
   .clarify-hero-pattern-mask:is(.dark *) {
     -webkit-mask-image: linear-gradient(#fff, #0000);
     mask-image: linear-gradient(#fff, #0000);
@@ -879,6 +1009,10 @@
     color: var(--clarify-ui-text-soft);
   }
 
+  .clarify-content-actions-primary {
+    max-width: min(11rem, 100vw - 7rem);
+  }
+
   .clarify-footer-link:hover, .clarify-footer-social:hover {
     color: var(--clarify-ui-text-strong);
   }
@@ -922,7 +1056,7 @@
     color: var(--clarify-ui-text-soft);
     font-size: var(--clarify-ui-navigation-section-font-size);
     line-height: var(--clarify-ui-navigation-section-line-height);
-    font-weight: 500;
+    font-weight: normal;
   }
 
   .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
@@ -1227,10 +1361,6 @@
     top: calc(var(--spacing) * 14);
   }
 
-  .top-16 {
-    top: calc(var(--spacing) * 16);
-  }
-
   .top-px {
     top: 1px;
   }
@@ -1428,26 +1558,62 @@
   }
 
   .prose {
-    --tw-prose-invert-body: oklch(70.5% .015 286.067);
-    --tw-prose-invert-headings: #fff;
-    --tw-prose-invert-links: oklch(76.5% .177 163.223);
-    --tw-prose-invert-links-hover: oklch(69.6% .17 162.48);
-    --tw-prose-invert-links-underline: oklab(69.6% -.162114 .0511766 / .3);
-    --tw-prose-invert-bold: #fff;
-    --tw-prose-invert-counters: oklch(70.5% .015 286.067);
-    --tw-prose-invert-bullets: oklch(44.2% .017 285.786);
-    --tw-prose-invert-hr: oklab(100% 0 5.96046e-8 / .05);
-    --tw-prose-invert-quotes: oklch(96.7% .001 286.375);
-    --tw-prose-invert-quote-borders: oklch(37% .013 285.805);
-    --tw-prose-invert-captions: oklch(70.5% .015 286.067);
-    --tw-prose-invert-code: #fff;
-    --tw-prose-invert-code-bg: oklab(37% .00354074 -.0125085 / .15);
-    --tw-prose-invert-code-ring: oklab(100% 0 5.96046e-8 / .1);
-    --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
-    --tw-prose-invert-td-borders: oklch(37% .013 285.805);
+    --tw-prose-invert-body: var(--clarify-ui-text-soft);
+    --tw-prose-invert-headings: var(--clarify-ui-text-strong);
+    --tw-prose-invert-links: var(--clarify-ui-accent-text);
+    --tw-prose-invert-links-hover: var(--clarify-theme-tokens-colors-accent);
+    --tw-prose-invert-links-underline: var(--clarify-theme-tokens-colors-accent);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-links-underline: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 35%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-bold: var(--clarify-ui-text-strong);
+    --tw-prose-invert-counters: var(--clarify-ui-text-faint);
+    --tw-prose-invert-bullets: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-bullets: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 28%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-hr: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-hr: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 70%, transparent);
+    }
+  }
+
+  .prose {
+    --tw-prose-invert-quotes: var(--clarify-ui-text);
+    --tw-prose-invert-quote-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-captions: var(--clarify-ui-text-faint);
+    --tw-prose-invert-code: var(--clarify-ui-text-strong);
+    --tw-prose-invert-code-bg: var(--clarify-theme-tokens-colors-code-background);
+    --tw-prose-invert-code-ring: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-th-borders: var(--clarify-theme-tokens-colors-border);
+    --tw-prose-invert-td-borders: var(--clarify-theme-tokens-colors-border);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .prose {
+      --tw-prose-invert-td-borders: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 78%, transparent);
+    }
+  }
+
+  .prose {
     color: var(--tw-prose-body);
-    font-size: 1rem;
-    line-height: 1.75rem;
+    font-size: .9375rem;
+    line-height: 1.625rem;
   }
 
   .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
@@ -1456,7 +1622,7 @@
   }
 
   .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-size: 1.125rem;
+    font-size: 1rem;
     line-height: 1.75rem;
   }
 
@@ -1526,7 +1692,8 @@
 
   .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-headings);
-    margin-bottom: .5rem;
+    letter-spacing: -.025em;
+    margin-bottom: .75rem;
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 2rem;
@@ -1536,18 +1703,18 @@
     color: var(--tw-prose-headings);
     margin-top: 4rem;
     margin-bottom: .5rem;
-    font-size: 1.125rem;
+    font-size: 1.0625rem;
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: 1.625rem;
   }
 
   .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     color: var(--tw-prose-headings);
     margin-top: 2.5rem;
     margin-bottom: .5rem;
-    font-size: 1rem;
+    font-size: .875rem;
     font-weight: 600;
-    line-height: 1.75rem;
+    line-height: 1.5rem;
   }
 
   .prose :where(img, video, figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
@@ -1635,6 +1802,12 @@
     margin-top: 0;
   }
 
+  .prose :where(.prose > h1:first-child + p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    color: var(--clarify-ui-text-soft);
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+
   .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     margin-top: 0 !important;
   }
@@ -1679,6 +1852,10 @@
     margin-top: calc(var(--spacing) * 8);
   }
 
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
+
   .-mr-0\.5 {
     margin-right: calc(var(--spacing) * -.5);
   }
@@ -1937,6 +2114,10 @@
     min-height: calc(var(--spacing) * 11);
   }
 
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
+
   .min-h-full {
     min-height: 100%;
   }
@@ -2005,6 +2186,10 @@
     width: 83.3333%;
   }
 
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -2179,11 +2364,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .-translate-y-1\.5 {
-    --tw-translate-y: calc(var(--spacing) * -1.5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2194,11 +2374,6 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .translate-y-1\.5 {
-    --tw-translate-y: calc(var(--spacing) * 1.5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-
   .rotate-180 {
     rotate: 180deg;
   }
@@ -2300,8 +2475,8 @@
     justify-content: flex-end;
   }
 
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * .5);
+  .justify-start {
+    justify-content: flex-start;
   }
 
   .gap-1 {
@@ -2362,12 +2537,6 @@
     margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  :where(.space-y-6 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-  }
-
   :where(.space-y-8 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
@@ -2564,6 +2733,10 @@
     border-left-width: 1px;
   }
 
+  .border-\(--clarify-code-border\) {
+    border-color: var(--clarify-code-border);
+  }
+
   .border-\(--clarify-error-accent-text\) {
     border-color: var(--clarify-error-accent-text);
   }
@@ -2642,22 +2815,28 @@
     }
   }
 
-  .border-zinc-700 {
-    border-color: var(--color-zinc-700);
-  }
-
   .border-t-transparent {
     border-top-color: #0000;
   }
 
-  .border-b-white\/7\.5 {
-    border-bottom-color: #ffffff13;
+  .bg-\(--clarify-code-background\) {
+    background-color: var(--clarify-code-background);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-b-white\/7\.5 {
-      border-bottom-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
-    }
+  .bg-\(--clarify-code-control-background\) {
+    background-color: var(--clarify-code-control-background);
+  }
+
+  .bg-\(--clarify-code-faint\) {
+    background-color: var(--clarify-code-faint);
+  }
+
+  .bg-\(--clarify-code-header-background\) {
+    background-color: var(--clarify-code-header-background);
+  }
+
+  .bg-\(--clarify-code-surface\) {
+    background-color: var(--clarify-code-surface);
   }
 
   .bg-\(--clarify-skeleton-accent-background\) {
@@ -2694,17 +2873,7 @@
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
-    background-color: var(--clarify-theme-tokens-colors-surface);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
-      background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
-    }
-  }
-
-  .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
+  .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/95 {
     background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
@@ -2764,16 +2933,6 @@
     }
   }
 
-  .bg-black\/30 {
-    background-color: #0000004d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-black\/30 {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
-
   .bg-emerald-50\/50 {
     background-color: #ecfdf580;
   }
@@ -2890,16 +3049,6 @@
     background-color: var(--color-white);
   }
 
-  .bg-white\/5 {
-    background-color: #ffffff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-white\/5 {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-  }
-
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
@@ -2922,18 +3071,6 @@
     }
   }
 
-  .bg-zinc-500 {
-    background-color: var(--color-zinc-500);
-  }
-
-  .bg-zinc-800 {
-    background-color: var(--color-zinc-800);
-  }
-
-  .bg-zinc-900 {
-    background-color: var(--color-zinc-900);
-  }
-
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
@@ -2970,6 +3107,10 @@
     fill: var(--color-white);
   }
 
+  .stroke-\(--clarify-code-muted\) {
+    stroke: var(--clarify-code-muted);
+  }
+
   .stroke-\(--clarify-theme-tokens-colors-foreground\) {
     stroke: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -2978,6 +3119,10 @@
     stroke: var(--clarify-theme-tokens-colors-muted);
   }
 
+  .stroke-\(--clarify-theme-tokens-colors-primary\) {
+    stroke: var(--clarify-theme-tokens-colors-primary);
+  }
+
   .stroke-\(--clarify-ui-accent-text\) {
     stroke: var(--clarify-ui-accent-text);
   }
@@ -3000,10 +3145,6 @@
     stroke: var(--color-white);
   }
 
-  .stroke-zinc-500 {
-    stroke: var(--color-zinc-500);
-  }
-
   .stroke-2 {
     stroke-width: 2px;
   }
@@ -3148,6 +3289,10 @@
     padding-top: calc(var(--spacing) * 16);
   }
 
+  .pt-\[6\.5rem\] {
+    padding-top: 6.5rem;
+  }
+
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
@@ -3156,6 +3301,10 @@
     padding-right: calc(var(--spacing) * 4);
   }
 
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+
   .pr-9 {
     padding-right: calc(var(--spacing) * 9);
   }
@@ -3168,6 +3317,10 @@
     padding-bottom: calc(var(--spacing) * 6);
   }
 
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -3192,10 +3345,6 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-7 {
-    padding-left: calc(var(--spacing) * 7);
-  }
-
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -3239,6 +3388,11 @@
     line-height: calc(var(--spacing) * 9);
   }
 
+  .text-\[11px\]\/4 {
+    font-size: 11px;
+    line-height: calc(var(--spacing) * 4);
+  }
+
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -3364,6 +3518,18 @@
     white-space: pre-wrap;
   }
 
+  .text-\(--clarify-code-faint\) {
+    color: var(--clarify-code-faint);
+  }
+
+  .text-\(--clarify-code-muted\) {
+    color: var(--clarify-code-muted);
+  }
+
+  .text-\(--clarify-code-text\) {
+    color: var(--clarify-code-text);
+  }
+
   .text-\(--clarify-error-accent-text\) {
     color: var(--clarify-error-accent-text);
   }
@@ -3396,6 +3562,10 @@
     color: var(--clarify-ui-text-faint);
   }
 
+  .text-\(--clarify-ui-text-foreground\) {
+    color: var(--clarify-ui-text-foreground);
+  }
+
   .text-\(--clarify-ui-text-soft\) {
     color: var(--clarify-ui-text-soft);
   }
@@ -3424,10 +3594,6 @@
     color: var(--color-amber-950);
   }
 
-  .text-emerald-300 {
-    color: var(--color-emerald-300);
-  }
-
   .text-emerald-400 {
     color: var(--color-emerald-400);
   }
@@ -3508,10 +3674,6 @@
     color: var(--color-white);
   }
 
-  .text-zinc-100 {
-    color: var(--color-zinc-100);
-  }
-
   .text-zinc-300 {
     color: var(--color-zinc-300);
   }
@@ -3681,6 +3843,10 @@
     }
   }
 
+  .ring-\(--clarify-code-border\) {
+    --tw-ring-color: var(--clarify-code-border);
+  }
+
   .ring-\(--clarify-theme-tokens-colors-border\) {
     --tw-ring-color: var(--clarify-theme-tokens-colors-border);
   }
@@ -3705,16 +3871,6 @@
     --tw-ring-color: var(--color-sky-300);
   }
 
-  .ring-white\/10 {
-    --tw-ring-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .ring-white\/10 {
-      --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -3874,8 +4030,8 @@
       opacity: 1;
     }
 
-    .group-hover\/button\:stroke-zinc-400:is(:where(.group\/button):hover *) {
-      stroke: var(--color-zinc-400);
+    .group-hover\/button\:stroke-\(--clarify-code-text\):is(:where(.group\/button):hover *) {
+      stroke: var(--clarify-code-text);
     }
   }
 
@@ -3931,6 +4087,10 @@
       border-color: var(--clarify-ui-text-faint);
     }
 
+    .hover\:bg-\(--clarify-code-control-background-hover\):hover {
+      background-color: var(--clarify-code-control-background-hover);
+    }
+
     .hover\:bg-\(--clarify-theme-tokens-colors-background\):hover {
       background-color: var(--clarify-theme-tokens-colors-background);
     }
@@ -3943,24 +4103,8 @@
       background-color: var(--clarify-ui-hover-background);
     }
 
-    .hover\:bg-black\/50:hover {
-      background-color: #00000080;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-black\/50:hover {
-        background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-      }
-    }
-
-    .hover\:bg-white\/7\.5:hover {
-      background-color: #ffffff13;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-white\/7\.5:hover {
-        background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
-      }
+    .hover\:text-\(--clarify-code-text\):hover {
+      color: var(--clarify-code-text);
     }
 
     .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
@@ -3979,14 +4123,6 @@
       color: inherit;
     }
 
-    .hover\:text-zinc-200:hover {
-      color: var(--color-zinc-200);
-    }
-
-    .hover\:text-zinc-300:hover {
-      color: var(--color-zinc-300);
-    }
-
     .hover\:opacity-80:hover {
       opacity: .8;
     }
@@ -4013,22 +4149,16 @@
     border-color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .focus\:bg-\(--clarify-theme-tokens-colors-surface\):focus {
-    background-color: var(--clarify-theme-tokens-colors-surface);
-  }
-
-  .focus\:bg-black\/50:focus {
-    background-color: #00000080;
+  .focus\:bg-\(--clarify-code-control-background-hover\):focus {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus\:bg-black\/50:focus {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
+  .focus\:bg-\(--clarify-theme-tokens-colors-surface\):focus {
+    background-color: var(--clarify-theme-tokens-colors-surface);
   }
 
-  .focus\:text-zinc-200:focus {
-    color: var(--color-zinc-200);
+  .focus\:text-\(--clarify-code-text\):focus {
+    color: var(--clarify-code-text);
   }
 
   .focus\:opacity-100:focus {
@@ -4044,16 +4174,6 @@
     --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
-  .focus\:ring-emerald-400\/25:focus {
-    --tw-ring-color: #00d29440;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .focus\:ring-emerald-400\/25:focus {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
-    }
-  }
-
   .focus\:outline-none:focus {
     --tw-outline-style: none;
     outline-style: none;
@@ -4113,22 +4233,16 @@
     transition-timing-function: var(--ease-out);
   }
 
-  .data-focus\:bg-\(--clarify-ui-hover-background\)[data-focus] {
-    background-color: var(--clarify-ui-hover-background);
+  .data-focus\:bg-\(--clarify-code-control-background-hover\)[data-focus] {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  .data-focus\:bg-white\/10[data-focus] {
-    background-color: #ffffff1a;
+  .data-focus\:bg-\(--clarify-ui-hover-background\)[data-focus] {
+    background-color: var(--clarify-ui-hover-background);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-focus\:bg-white\/10[data-focus] {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
-  .data-focus\:text-white[data-focus] {
-    color: var(--color-white);
+  .data-focus\:text-\(--clarify-code-text\)[data-focus] {
+    color: var(--clarify-code-text);
   }
 
   .data-leave\:pointer-events-none[data-leave] {
@@ -4154,18 +4268,12 @@
     border-color: var(--clarify-ui-text-faint);
   }
 
-  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
-    background-color: var(--clarify-ui-hover-background);
-  }
-
-  .data-open\:bg-white\/10[data-open] {
-    background-color: #ffffff1a;
+  .data-open\:bg-\(--clarify-code-control-background-hover\)[data-open] {
+    background-color: var(--clarify-code-control-background-hover);
   }
 
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:bg-white\/10[data-open] {
-      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
+  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
+    background-color: var(--clarify-ui-hover-background);
   }
 
   .data-open\:ring-2[data-open] {
@@ -4173,24 +4281,14 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .data-open\:ring-emerald-400\/25[data-open] {
-    --tw-ring-color: #00d29440;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .data-open\:ring-emerald-400\/25[data-open] {
-      --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
-    }
+  .data-open\:ring-\(--clarify-ui-accent-border\)[data-open] {
+    --tw-ring-color: var(--clarify-ui-accent-border);
   }
 
   .data-selected\:text-\(--clarify-theme-tokens-colors-primary\)[data-selected] {
     color: var(--clarify-theme-tokens-colors-primary);
   }
 
-  .data-selected\:text-emerald-300[data-selected] {
-    color: var(--color-emerald-300);
-  }
-
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
     --tw-outline-style: none;
     outline-style: none;
@@ -4260,6 +4358,10 @@
       justify-content: space-between;
     }
 
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+
     .sm\:justify-start {
       justify-content: flex-start;
     }
@@ -4276,6 +4378,10 @@
       padding-inline: calc(var(--spacing) * 1.5);
     }
 
+    .sm\:px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+
     .sm\:px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
@@ -4292,6 +4398,10 @@
       padding-block: calc(var(--spacing) * 20);
     }
 
+    .sm\:pr-0 {
+      padding-right: 0;
+    }
+
     .sm\:pb-10 {
       padding-bottom: calc(var(--spacing) * 10);
     }
@@ -4304,6 +4414,16 @@
       font-size: var(--text-2xl);
       line-height: calc(var(--spacing) * 8);
     }
+
+    .sm\:opacity-0 {
+      opacity: 0;
+    }
+
+    @media (hover: hover) {
+      .sm\:group-hover\:opacity-100:is(:where(.group):hover *) {
+        opacity: 1;
+      }
+    }
   }
 
   @media (min-width: 48rem) {
@@ -4358,8 +4478,12 @@
       top: calc(var(--spacing) * 28);
     }
 
-    .lg\:top-30 {
-      top: calc(var(--spacing) * 30);
+    .lg\:top-40 {
+      top: calc(var(--spacing) * 40);
+    }
+
+    .lg\:top-\[6\.5rem\] {
+      top: 6.5rem;
     }
 
     .lg\:z-30 {
@@ -4390,10 +4514,18 @@
       height: var(--clarify-sidebar-height);
     }
 
+    .lg\:h-\(--clarify-sidebar-height-with-banner\) {
+      height: var(--clarify-sidebar-height-with-banner);
+    }
+
     .lg\:h-\(--clarify-sidebar-height-with-tabs\) {
       height: var(--clarify-sidebar-height-with-tabs);
     }
 
+    .lg\:h-\(--clarify-sidebar-height-with-tabs-and-banner\) {
+      height: var(--clarify-sidebar-height-with-tabs-and-banner);
+    }
+
     .lg\:grid-cols-\(--clarify-layout-sidebar-grid\) {
       grid-template-columns: var(--clarify-layout-sidebar-grid);
     }
@@ -4410,8 +4542,8 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .lg\:self-start {
-      align-self: flex-start;
+    .lg\:self-stretch {
+      align-self: stretch;
     }
 
     .lg\:overflow-y-auto {
@@ -4434,14 +4566,18 @@
       padding-block: var(--clarify-search-dialog-padding-block-lg);
     }
 
-    .lg\:pt-6 {
-      padding-top: calc(var(--spacing) * 6);
+    .lg\:pt-10 {
+      padding-top: calc(var(--spacing) * 10);
     }
 
     .lg\:pt-28 {
       padding-top: calc(var(--spacing) * 28);
     }
 
+    .lg\:pt-40 {
+      padding-top: calc(var(--spacing) * 40);
+    }
+
     .lg\:pb-8 {
       padding-bottom: calc(var(--spacing) * 8);
     }
@@ -4452,8 +4588,8 @@
       position: sticky;
     }
 
-    .xl\:top-24 {
-      top: calc(var(--spacing) * 24);
+    .xl\:top-\[calc\(var\(--clarify-header-offset\,3\.5rem\)\+1\.5rem\)\] {
+      top: calc(var(--clarify-header-offset, 3.5rem) + 1.5rem);
     }
 
     .xl\:max-w-none {
@@ -4472,6 +4608,10 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
+    .xl\:self-start {
+      align-self: flex-start;
+    }
+
     .xl\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -4603,20 +4743,6 @@
     }
   }
 
-  .dark\:border-zinc-800:where(.dark, .dark *) {
-    border-color: var(--color-zinc-800);
-  }
-
-  .dark\:border-b-white\/5:where(.dark, .dark *) {
-    border-bottom-color: #ffffff0d;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:border-b-white\/5:where(.dark, .dark *) {
-      border-bottom-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-  }
-
   .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
     background-color: var(--clarify-theme-tokens-colors-primary);
   }
@@ -4757,24 +4883,10 @@
     }
   }
 
-  .dark\:bg-transparent:where(.dark, .dark *) {
-    background-color: #0000;
-  }
-
   .dark\:bg-white:where(.dark, .dark *) {
     background-color: var(--color-white);
   }
 
-  .dark\:bg-white\/1:where(.dark, .dark *) {
-    background-color: #ffffff03;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .dark\:bg-white\/1:where(.dark, .dark *) {
-      background-color: color-mix(in oklab, var(--color-white) 1%, transparent);
-    }
-  }
-
   .dark\:bg-white\/2\.5:where(.dark, .dark *) {
     background-color: #ffffff06;
   }
@@ -5072,16 +5184,6 @@
   }
 
   @media (hover: hover) {
-    .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
-      background-color: #ffffff0d;
-    }
-
-    @supports (color: color-mix(in lab, red, red)) {
-      .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-
     .dark\:hover\:bg-white\/10:where(.dark, .dark *):hover {
       background-color: #ffffff1a;
     }