@clarify-labs/renderer 0.10.1 → 0.10.2

package/output/renderer.css

@@ -557,6 +557,26 @@
     }
   }
 
+  :root, .clarify-app {
+    --clarify-ui-tab-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-tab-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 7%, var(--clarify-theme-tokens-colors-surface));
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-ui-tab-indicator: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-ui-tab-indicator: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 78%, var(--clarify-theme-tokens-colors-foreground));
+    }
+  }
+
   :root, .clarify-app {
     --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
   }
@@ -641,10 +661,32 @@
   :root, .clarify-app {
     --clarify-code-border: #ffffff1a;
     --clarify-code-text: var(--color-zinc-100);
+    --clarify-code-control-text: var(--color-zinc-300);
     --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-code-control-background-active: #ffffff24;
+    --clarify-code-accent-text: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 58%, white);
+    }
+  }
+
+  :root, .clarify-app {
+    --clarify-code-accent-background: var(--clarify-theme-tokens-colors-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :root, .clarify-app {
+      --clarify-code-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 20%, transparent);
+    }
+  }
+
+  :root, .clarify-app {
     --clarify-ui-menu-width: 13rem;
     --clarify-ui-action-menu-width: 19.5rem;
     --clarify-layout-sidebar-grid: 18rem minmax(0, 1fr);
@@ -832,6 +874,16 @@
     }
   }
 
+  .dark, .dark .clarify-app {
+    --clarify-ui-tab-hover-background: var(--clarify-theme-tokens-colors-foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark, .dark .clarify-app {
+      --clarify-ui-tab-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 10%, var(--clarify-theme-tokens-colors-surface));
+    }
+  }
+
   .dark, .dark .clarify-app {
     --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-primary);
   }
@@ -1140,6 +1192,40 @@
     color: var(--clarify-ui-text-strong);
   }
 
+  .clarify-content-tab:hover, .clarify-content-tab:focus-visible {
+    background: var(--clarify-ui-tab-hover-background);
+  }
+
+  .clarify-api-example-code, .clarify-api-example {
+    container-type: inline-size;
+  }
+
+  @container (max-width: 26rem) {
+    .clarify-api-example-header {
+      flex-direction: column;
+      align-items: stretch;
+      gap: .25rem;
+    }
+
+    .clarify-api-example-header > h3 {
+      margin-right: 0;
+    }
+
+    .clarify-api-example-header-controls {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    .clarify-api-code-toolbar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .clarify-api-code-toolbar > button {
+      align-self: flex-end;
+    }
+  }
+
   .clarify-brand-title, .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright, .clarify-search-button {
     font-size: var(--clarify-ui-menu-font-size);
     line-height: var(--clarify-ui-menu-line-height);
@@ -1489,6 +1575,10 @@
     inset-inline: 0;
   }
 
+  .inset-x-2 {
+    inset-inline: calc(var(--spacing) * 2);
+  }
+
   .inset-y-0 {
     inset-block: 0;
   }
@@ -1561,10 +1651,6 @@
     left: calc(var(--spacing) * 3);
   }
 
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
-
   .-z-10 {
     z-index: calc(10 * -1);
   }
@@ -2027,6 +2113,10 @@
     margin-right: calc(var(--spacing) * -1);
   }
 
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -2272,6 +2362,18 @@
     min-height: 0;
   }
 
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -2657,6 +2759,10 @@
     justify-content: flex-start;
   }
 
+  .gap-0 {
+    gap: 0;
+  }
+
   .gap-1 {
     gap: var(--spacing);
   }
@@ -2867,6 +2973,11 @@
     border-radius: var(--radius-xl);
   }
 
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2919,10 +3030,6 @@
     border-color: var(--clarify-theme-tokens-colors-border);
   }
 
-  .border-\(--clarify-theme-tokens-colors-primary\) {
-    border-color: var(--clarify-theme-tokens-colors-primary);
-  }
-
   .border-\(--clarify-ui-accent-border\) {
     border-color: var(--clarify-ui-accent-border);
   }
@@ -3003,6 +3110,10 @@
     border-top-color: #0000;
   }
 
+  .bg-\(--clarify-code-accent-text\) {
+    background-color: var(--clarify-code-accent-text);
+  }
+
   .bg-\(--clarify-code-background\) {
     background-color: var(--clarify-code-background);
   }
@@ -3117,6 +3228,10 @@
     background-color: var(--clarify-ui-subtle-background);
   }
 
+  .bg-\(--clarify-ui-tab-indicator\) {
+    background-color: var(--clarify-ui-tab-indicator);
+  }
+
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
@@ -3716,6 +3831,14 @@
     white-space: pre-wrap;
   }
 
+  .text-\(--clarify-code-accent-text\) {
+    color: var(--clarify-code-accent-text);
+  }
+
+  .text-\(--clarify-code-control-text\) {
+    color: var(--clarify-code-control-text);
+  }
+
   .text-\(--clarify-code-faint\) {
     color: var(--clarify-code-faint);
   }
@@ -3788,10 +3911,6 @@
     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);
   }
@@ -3974,6 +4093,11 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .shadow-\[0_0_0\.5rem_var\(--clarify-ui-accent-glow\)\] {
+    --tw-shadow: 0 0 .5rem var(--tw-shadow-color, var(--clarify-ui-accent-glow));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px 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);
@@ -4322,6 +4446,16 @@
       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\):hover {
       background-color: var(--clarify-code-control-background-hover);
     }
@@ -4484,6 +4618,10 @@
     color: var(--clarify-code-text);
   }
 
+  .data-focus\:text-\(--clarify-ui-text-strong\)[data-focus] {
+    color: var(--clarify-ui-text-strong);
+  }
+
   .data-leave\:pointer-events-none[data-leave] {
     pointer-events: none;
   }
@@ -4503,16 +4641,26 @@
     transition-timing-function: var(--ease-in);
   }
 
-  .data-open\:border-\(--clarify-ui-text-faint\)[data-open] {
-    border-color: var(--clarify-ui-text-faint);
+  .data-open\:border-\(--clarify-ui-accent-border\)[data-open] {
+    border-color: var(--clarify-ui-accent-border);
   }
 
-  .data-open\:bg-\(--clarify-code-control-background-hover\)[data-open] {
-    background-color: var(--clarify-code-control-background-hover);
+  .data-open\:border-white\/20[data-open] {
+    border-color: #fff3;
   }
 
-  .data-open\:bg-\(--clarify-ui-hover-background\)[data-open] {
-    background-color: var(--clarify-ui-hover-background);
+  @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\:bg-\(--clarify-code-control-background-active\)[data-open] {
+    background-color: var(--clarify-code-control-background-active);
+  }
+
+  .data-open\:bg-\(--clarify-ui-active-background\)[data-open] {
+    background-color: var(--clarify-ui-active-background);
   }
 
   .data-open\:ring-2[data-open] {
@@ -4524,8 +4672,20 @@
     --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\:bg-\(--clarify-code-accent-background\)[data-selected] {
+    background-color: var(--clarify-code-accent-background);
+  }
+
+  .data-selected\:bg-\(--clarify-ui-active-background\)[data-selected] {
+    background-color: var(--clarify-ui-active-background);
+  }
+
+  .data-selected\:text-\(--clarify-code-accent-text\)[data-selected] {
+    color: var(--clarify-code-accent-text);
+  }
+
+  .data-selected\:text-\(--clarify-ui-accent-text\)[data-selected] {
+    color: var(--clarify-ui-accent-text);
   }
 
   .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clarify-labs/renderer",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "license": "AGPL-3.0-only",
   "type": "module",
   "repository": {
@@ -89,7 +89,9 @@
     "openapi-types": "^12.1.3",
     "react-markdown": "^10.1.0",
     "react-zoom-pan-pinch": "^4.0.3",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^4.3.0",
     "zustand": "^5.0.14"
   }
 }