@opencode-ai/ui 0.0.0-dev-202609071625 → 0.0.0-dev-19265

package/src/{v2/components/dialog-v2.tsx → overlays/dialog/dialog.tsx}

@@ -1,7 +1,7 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog-v2.css"
+import "./dialog.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+  return <Title data-slot="dialog-header-title">{props.children}</Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
+      <Description data-slot="dialog-description">{description()}</Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
-        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      <Show when={!hideClose()}>
+        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </Kobalte.CloseButton>
-      )}
+        </CloseButton>
+      </Show>
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Kobalte.Content
+        <Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,10 +108,8 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Kobalte.Content>
+        </Content>
       </div>
     </div>
   )
 }
-
-export const DialogV2 = Dialog

package/src/{v2/components/tooltip-v2.css → overlays/tooltip/tooltip.css}

@@ -39,6 +39,39 @@
   }
 }
 
+[data-component="tooltip-v2"][data-appearance="standard"] {
+  display: block;
+  max-width: 320px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  border-radius: var(--radius-sm);
+  background: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+  font-variation-settings: normal;
+  user-select: text;
+  animation: none;
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+    animation: none;
+  }
+}
+
+[data-component="tooltip-v2"][data-appearance="large"] {
+  padding: 12px;
+  font-size: 13px;
+  line-height: var(--line-height-compact);
+  letter-spacing: -0.04px;
+}
+
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{v2/components/tooltip-v2.tsx → overlays/tooltip/tooltip.tsx}

@@ -1,19 +1,21 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, untrack, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip-v2.css"
+import "./tooltip.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends ComponentProps<typeof Root> {
   value: JSX.Element
+  appearance?: "standard" | "compact" | "large"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
+  triggerTabIndex?: number
 }
 
-export function TooltipV2(props: TooltipV2Props) {
+export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -22,16 +24,19 @@ export function TooltipV2(props: TooltipV2Props) {
   })
   const [local, others] = splitProps(props, [
     "children",
+    "appearance",
     "class",
     "contentClass",
     "contentStyle",
     "inactive",
     "forceOpen",
+    "triggerTabIndex",
     "ignoreSafeArea",
     "value",
   ])
 
   const close = () => setState("open", false)
+  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -40,7 +45,7 @@ export function TooltipV2(props: TooltipV2Props) {
   }
 
   const drop = (expand = state.expand) => {
-    if (expand) return
+    if (expand || !state.block) return
     if (ref?.matches(":hover")) return
     if (inside()) return
     setState("block", false)
@@ -69,7 +74,7 @@ export function TooltipV2(props: TooltipV2Props) {
 
   createEffect(() => {
     if (!ref) return
-    sync()
+    untrack(sync)
     const obs = new MutationObserver(sync)
     obs.observe(ref, {
       subtree: true,
@@ -86,16 +91,16 @@ export function TooltipV2(props: TooltipV2Props) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip
+        <Root
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
+          open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
-            if (local.forceOpen) return
+            if (controlled()) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -104,9 +109,10 @@ export function TooltipV2(props: TooltipV2Props) {
             setState("open", open)
           }}
         >
-          <KobalteTooltip.Trigger
+          <Trigger
             ref={ref}
             as="div"
+            tabIndex={local.triggerTabIndex}
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
@@ -118,14 +124,15 @@ export function TooltipV2(props: TooltipV2Props) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
+          </Trigger>
+          <Portal>
+            <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -138,9 +145,9 @@ export function TooltipV2(props: TooltipV2Props) {
               }}
             >
               {local.value}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
+            </Content>
+          </Portal>
+        </Root>
       </Match>
     </Switch>
   )

package/src/styles/base.css

@@ -401,4 +401,9 @@ input:where([type="button"], [type="reset"], [type="submit"]),
   [contenteditable="true"] {
     font-size: 16px !important;
   }
+
+  input::placeholder,
+  textarea::placeholder {
+    font-size: 13px;
+  }
 }

package/src/{v2/components/file-tree-v2.css → styles/file-tree.css}

@@ -1,20 +1,30 @@
+@property --file-tree-v2-row-overlay {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 [data-component="file-tree-v2"] {
   display: flex;
   flex-direction: column;
   gap: 2px;
+  width: max-content;
+  min-width: 100%;
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"] {
+  --file-tree-v2-row-overlay: transparent;
+
   box-sizing: border-box;
   width: 100%;
-  min-width: 0;
+  min-width: max-content;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
   padding-inline-end: 8px;
-  overflow: visible;
+  overflow: clip;
   border: none;
   border-radius: 6px;
   background-color: transparent;
@@ -24,7 +34,12 @@
   scroll-margin-block: 8px;
   transition:
     background-color 120ms ease,
-    color 120ms ease;
+    color 120ms ease,
+    --file-tree-v2-row-overlay 120ms ease;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-label"] {
+  margin-inline-end: 12px;
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-ignored] {
@@ -32,10 +47,14 @@
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"]:hover {
+  --file-tree-v2-row-overlay: var(--v2-overlay-simple-overlay-hover);
+
   background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] {
+  --file-tree-v2-row-overlay: var(--v2-overlay-simple-overlay-pressed);
+
   color: var(--v2-text-text-base);
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
@@ -44,6 +63,14 @@
   background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 
+[data-component="file-tree-v2"]
+  [data-slot="file-tree-v2-context-trigger"][data-context-menu-open]
+  [data-slot="file-tree-v2-row"]:not([data-selected]) {
+  --file-tree-v2-row-overlay: var(--v2-overlay-simple-overlay-hover);
+
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-guide"] {
   position: absolute;
   top: 0;
@@ -110,6 +137,9 @@
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
   box-sizing: border-box;
   flex: none;
+  position: sticky;
+  inset-inline-end: 8px;
+  z-index: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -126,6 +156,37 @@
   font-feature-settings:
     "tnum" on,
     "lnum" on;
+  background:
+    linear-gradient(var(--file-tree-v2-row-overlay), var(--file-tree-v2-row-overlay)), var(--v2-background-bg-base);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 100%;
+  width: 16px;
+  pointer-events: none;
+  background:
+    linear-gradient(to right, transparent, var(--file-tree-v2-row-overlay)),
+    linear-gradient(to right, transparent, var(--v2-background-bg-base));
+}
+
+[data-component="file-tree-v2"]:dir(rtl) [data-slot="file-tree-v2-change"]::before {
+  background:
+    linear-gradient(to left, transparent, var(--file-tree-v2-row-overlay)),
+    linear-gradient(to left, transparent, var(--v2-background-bg-base));
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"]::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 100%;
+  width: 16px;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--file-tree-v2-row-overlay), var(--file-tree-v2-row-overlay)), var(--v2-background-bg-base);
 }
 
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="modified"] {

package/src/styles/index.css

@@ -6,47 +6,31 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../components/accordion.css" layer(components);
+@import "../data-display/accordion/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
-@import "../components/avatar.css" layer(components);
-@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../components/checkbox.css" layer(components);
+@import "../forms/checkbox/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
-@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
-@import "../components/dropdown-menu.css" layer(components);
-@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
-@import "../components/icon.css" layer(components);
-@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../components/keybind.css" layer(components);
+@import "../forms/inline-input/inline-input.css" layer(components);
 @import "../components/text-field.css" layer(components);
-@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
-@import "../components/progress-circle.css" layer(components);
-@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
-@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
-@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../components/tabs.css" layer(components);
-@import "../components/tag.css" layer(components);
+@import "../navigation/tabs/tabs.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
-@import "../components/text-shimmer.css" layer(components);
-@import "../components/toast.css" layer(components);
-@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -240,6 +240,7 @@
   --color-v2-background-bg-layer-04: var(--v2-background-bg-layer-04);
   --color-v2-background-bg-inverse: var(--v2-background-bg-inverse);
   --color-v2-background-bg-contrast: var(--v2-background-bg-contrast);
+  --color-v2-background-bg-icon-button-contrast: var(--v2-background-bg-icon-button-contrast);
   --color-v2-background-bg-button-neutral: var(--v2-background-bg-button-neutral);
   --color-v2-background-bg-accent: var(--v2-background-bg-accent);
   --color-v2-text-text-base: var(--v2-text-text-base);
@@ -252,6 +253,7 @@
   --color-v2-text-text-code-accent: var(--v2-text-text-code-accent);
   --color-v2-icon-icon-base: var(--v2-icon-icon-base);
   --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
+  --color-v2-icon-icon-faint: var(--v2-icon-icon-faint);
   --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
   --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
   --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);

package/src/styles/tailwind/index.css

@@ -1,7 +1,21 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@source "../../../../app/src";
+@source "../../../../app/index.html";
+@source not "../../../../app/src/i18n";
+@source not "../../../../app/src/**/*.test.{ts,tsx}";
+@source "../../../../desktop/src/renderer";
+@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
+@source "../../../../enterprise/src";
+@source "../../../../session-ui/src";
+@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
+@source "../../../../storybook";
+@source "../../../src";
+@source not "../../../src/assets";
+@source not "../../../src/i18n";
+@source not "../../../src/**/*.test.{ts,tsx}";
 @import "./utilities.css";
 
 @import "../index.css";
@@ -51,6 +65,9 @@
   --leading-lg: var(--line-height-large);
   --leading-xl: var(--line-height-x-large);
   --leading-2xl: var(--line-height-2x-large);
+  --leading-text-tight: var(--line-height-tight);
+  --leading-text-compact: var(--line-height-compact);
+  --leading-text-base: var(--line-height-base);
 
   --tracking-normal: var(--letter-spacing-normal);
   --tracking-tight: var(--letter-spacing-tight);

package/src/styles/theme.css

@@ -1,8 +1,8 @@
 :root {
-  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
 
   --font-size-small: 13px;

package/src/{v2/styles → styles/tokens}/colors.css

@@ -128,18 +128,18 @@
     --v2-cyan-1200: #00353fff;
 
     /* ── Blue ── */
-    --v2-blue-100: #ecf1feff;
-    --v2-blue-200: #d7e2fcff;
+    --v2-blue-100: #f5f8ffff;
+    --v2-blue-200: #ecf1feff;
     --v2-blue-300: #c3d4fdff;
     --v2-blue-400: #a2bcffff;
     --v2-blue-500: #7698fdff;
     --v2-blue-600: #3b5cf6ff;
-    --v2-blue-700: #3250dfff;
-    --v2-blue-800: #2c47c8ff;
-    --v2-blue-900: #263fa9ff;
-    --v2-blue-1000: #22388fff;
-    --v2-blue-1100: #1c2e70ff;
-    --v2-blue-1200: #1b2852ff;
+    --v2-blue-700: #0b34f4ff;
+    --v2-blue-800: #3250dfff;
+    --v2-blue-900: #2c47c8ff;
+    --v2-blue-1000: #263fa9ff;
+    --v2-blue-1100: #22388fff;
+    --v2-blue-1200: #021945ff;
 
     /* ── Purple ── */
     --v2-purple-100: #ebecfeff;

package/src/{v2/styles → styles/tokens}/theme.css

@@ -1,16 +1,4 @@
 @layer theme {
-  html[data-theme="oc-2"] body:not([data-new-layout]) {
-    --text-diff-add-base: light-dark(#167517, #c4ffc0);
-    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
-    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
-    --syntax-keyword: light-dark(#a753ae, #edb2f1);
-    --syntax-string: #00ceb9;
-    --syntax-primitive: light-dark(#034cff, #8cb0ff);
-    --syntax-property: light-dark(#a753ae, #fab283);
-    --syntax-type: light-dark(#8a6f00, #fcd53a);
-    --syntax-critical: light-dark(#ff8c00, #fab283);
-  }
-
   :root {
     color-scheme: light;
 
@@ -23,8 +11,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
+    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     /* ── Text ── */
     --v2-text-text-base: var(--v2-grey-1100);
@@ -35,10 +25,12 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -73,7 +65,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -140,8 +132,12 @@
     --v2-illustration-illustration-layer-02: var(--v2-grey-400);
     --v2-illustration-illustration-layer-03: var(--v2-grey-500);
 
-    --font-family-text: "Inter", sans-serif;
-    --v2-font-family-sans: "Inter", sans-serif;
+    --font-family-text: var(--font-family-sans);
+    --v2-font-family-sans: var(--font-family-sans);
+    --v2-font-family-code: var(--font-family-mono);
+    --line-height-tight: 12px;
+    --line-height-compact: 16px;
+    --line-height-base: 20px;
   }
 
   /* OS preference fallback (no JS needed) */
@@ -158,6 +154,7 @@
       --v2-background-bg-contrast: var(--v2-grey-700);
       --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
       --v2-background-bg-accent: var(--v2-blue-600);
+      --v2-background-bg-code-path: var(--v2-cyan-1200);
 
       --v2-text-text-base: var(--v2-grey-200);
       --v2-text-text-muted: var(--v2-grey-500);
@@ -167,9 +164,11 @@
       --v2-text-text-accent: var(--v2-blue-400);
       --v2-text-text-accent-hover: var(--v2-blue-300);
       --v2-text-text-code-accent: var(--v2-blue-400);
+      --v2-text-text-code-path: var(--v2-blue-300);
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
+      --v2-icon-icon-faint: var(--v2-grey-500);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -269,8 +268,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
+    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     --v2-text-text-base: var(--v2-grey-1100);
     --v2-text-text-muted: var(--v2-grey-700);
@@ -280,9 +281,11 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -314,7 +317,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -391,8 +394,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-700);
     --v2-background-bg-inverse: var(--v2-grey-50);
     --v2-background-bg-contrast: var(--v2-grey-700);
+    --v2-background-bg-icon-button-contrast: var(--v2-grey-400);
     --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-1200);
 
     --v2-text-text-base: var(--v2-grey-100);
     --v2-text-text-muted: var(--v2-grey-500);
@@ -402,9 +407,11 @@
     --v2-text-text-accent: var(--v2-blue-400);
     --v2-text-text-accent-hover: var(--v2-blue-300);
     --v2-text-text-code-accent: var(--v2-blue-400);
+    --v2-text-text-code-path: var(--v2-blue-300);
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);