@opencode-ai/ui 0.0.0-dev-202609060432 → 0.0.0-dev-19178

package/dist/{v2/components → icons/icon}/icon.d.ts

@@ -1,5 +1,11 @@
 import { type ComponentProps } from "solid-js";
+import { additionalIcons } from "./additional-icons";
+import "./icon.css";
 declare const icons: {
+    flask: {
+        viewBox: string;
+        body: string;
+    };
     edit: {
         viewBox: string;
         body: string;
@@ -16,6 +22,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "branch-out": {
+        viewBox: string;
+        body: string;
+    };
     "grid-plus": {
         viewBox: string;
         body: string;
@@ -24,6 +34,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    info: {
+        viewBox: string;
+        body: string;
+    };
+    "circle-exclamation": {
+        viewBox: string;
+        body: string;
+    };
     "sidebar-right": {
         viewBox: string;
         body: string;
@@ -120,6 +138,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "window-analytics": {
+        viewBox: string;
+        body: string;
+    };
+    trash: {
+        viewBox: string;
+        body: string;
+    };
     "outline-sliders": {
         viewBox: string;
         body: string;
@@ -128,10 +154,22 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "arrow-up-right": {
+        viewBox: string;
+        body: string;
+    };
     "outline-square-arrow": {
         viewBox: string;
         body: string;
     };
+    "outline-arrow-to-corner-top-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-hexagonal-warning": {
+        viewBox: string;
+        body: string;
+    };
     "outline-share": {
         viewBox: string;
         body: string;
@@ -144,13 +182,18 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "fill-triangle-down": {
+        viewBox: string;
+        body: string;
+    };
     archive: {
         viewBox: string;
         body: string;
     };
 };
+type IconName = keyof typeof icons | keyof typeof additionalIcons;
 export interface IconProps extends ComponentProps<"svg"> {
-    name: keyof typeof icons | (string & {});
+    name: IconName | (string & {});
     size?: "small" | "normal" | "large";
 }
 export declare function Icon(props: IconProps): import("solid-js").JSX.Element;

package/dist/layout/divider/divider.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from "solid-js";
+import "./divider.css";
+export interface DividerProps extends ComponentProps<"div"> {
+}
+export declare function Divider(props: DividerProps): import("solid-js").JSX.Element;

package/dist/navigation/menu/menu.d.ts

@@ -0,0 +1,59 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu";
+import { ContextMenu } from "@kobalte/core/context-menu";
+import { type ComponentProps, type JSX, type ParentProps } from "solid-js";
+import "./menu.css";
+export type MenuAppearance = "standard" | "compact";
+export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element;
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>): JSX.Element;
+export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuRadioItem(props: ParentProps<MenuRadioItemProps>): JSX.Element;
+export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>): JSX.Element;
+declare function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>): JSX.Element;
+declare function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>): JSX.Element;
+declare function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>): JSX.Element;
+declare function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>): JSX.Element;
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+    appearance?: MenuAppearance;
+}
+declare function MenuRoot(props: MenuProps): JSX.Element;
+export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
+    appearance?: MenuAppearance;
+}
+declare function MenuContextRoot(props: MenuContextProps): JSX.Element;
+declare function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>): JSX.Element;
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof import("@kobalte/core/menu").MenuTrigger;
+    Portal: typeof import("@kobalte/core/context-menu").Portal;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioGroup: typeof import("@kobalte/core/context-menu").RadioGroup;
+    RadioItem: typeof MenuRadioItem;
+    Group: typeof import("@kobalte/core/context-menu").Group;
+    GroupLabel: typeof MenuGroupLabel;
+    Separator: typeof MenuSeparator;
+    Sub: typeof import("@kobalte/core/context-menu").Sub;
+    SubTrigger: typeof MenuSubTrigger;
+    SubContent: typeof MenuSubContent;
+    Context: typeof MenuContextRoot & {
+        Trigger: typeof import("@kobalte/core/context-menu").Trigger;
+        Portal: typeof import("@kobalte/core/context-menu").Portal;
+        Content: typeof MenuContextContent;
+    };
+};
+export {};

package/dist/{v2/components/segmented-control-v2.d.ts → navigation/segmented-control/segmented-control.d.ts}

@@ -1,8 +1,8 @@
 import { type JSX, type ParentProps } from "solid-js";
 import type { ComponentProps } from "solid-js";
-import "./segmented-control-v2.css";
+import "./segmented-control.css";
 type OnChange = (value: string | null) => void;
-export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
+export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null;
     /** Initial value when uncontrolled. */
@@ -12,10 +12,10 @@ export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
     allowDeselect?: boolean;
     disabled?: boolean;
 }>;
-export declare function SegmentedControlV2(props: SegmentedControlV2Props): JSX.Element;
-export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
     value: string;
     children: JSX.Element;
 }>;
-export declare function SegmentedControlItemV2(props: SegmentedControlItemV2Props): JSX.Element;
+export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
 export {};

package/dist/{components → navigation/tabs}/tabs.d.ts

@@ -1,29 +1,36 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs";
+import { Content, List, Root, Trigger } from "@kobalte/core/tabs";
 import { type JSX } from "solid-js";
-import type { ComponentProps, ParentProps, Component } from "solid-js";
-export interface TabsProps extends ComponentProps<typeof Kobalte> {
-    variant?: "normal" | "alt" | "pill" | "settings";
+import type { Component, ComponentProps, ParentProps } from "solid-js";
+import "./tabs-current.css";
+export type TabsVariant = "panel" | "underline" | "surface" | "line" | "pill" | "settings";
+export interface TabsProps extends ComponentProps<typeof Root> {
+    variant?: TabsVariant;
     orientation?: "horizontal" | "vertical";
 }
-export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {
+export interface TabsListProps extends ComponentProps<typeof List> {
 }
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
     classes?: {
         button?: string;
     };
-    hideCloseButton?: boolean;
     closeButton?: JSX.Element;
+    hideCloseButton?: boolean;
     onMiddleClick?: () => void;
+    subtext?: JSX.Element | string;
+}
+export interface TabsCloseButtonProps extends ComponentProps<"button"> {
 }
-export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {
+export interface TabsContentProps extends ComponentProps<typeof Content> {
 }
 declare function TabsRoot(props: TabsProps): JSX.Element;
 declare function TabsList(props: TabsListProps): JSX.Element;
 declare function TabsTrigger(props: ParentProps<TabsTriggerProps>): JSX.Element;
+declare function TabsCloseButton(props: TabsCloseButtonProps): JSX.Element;
 declare function TabsContent(props: ParentProps<TabsContentProps>): JSX.Element;
 export declare const Tabs: typeof TabsRoot & {
     List: typeof TabsList;
     Trigger: typeof TabsTrigger;
+    CloseButton: typeof TabsCloseButton;
     Content: typeof TabsContent;
     SectionTitle: Component<{
         children?: JSX.Element;

package/dist/{v2/components/dialog-v2.d.ts → overlays/dialog/dialog.d.ts}

@@ -1,5 +1,5 @@
 import { type ComponentProps, type JSXElement, type ParentProps } from "solid-js";
-import "./dialog-v2.css";
+import "./dialog.css";
 export interface DialogProps extends ParentProps {
     size?: "normal" | "large" | "x-large";
     variant?: "default" | "settings";
@@ -24,4 +24,3 @@ export declare function DialogTitle(props: ParentProps): import("solid-js").JSX.
 export declare function DialogTitleGroup(props: DialogTitleGroupProps): import("solid-js").JSX.Element;
 export declare function DialogHeader(props: DialogHeaderProps): import("solid-js").JSX.Element;
 export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;
-export declare const DialogV2: typeof Dialog;

package/dist/overlays/tooltip/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { Root } from "@kobalte/core/tooltip";
+import { type JSX } from "solid-js";
+import type { ComponentProps } from "solid-js";
+import "./tooltip.css";
+export interface TooltipProps extends ComponentProps<typeof Root> {
+    value: JSX.Element;
+    appearance?: "standard" | "compact";
+    class?: string;
+    contentClass?: string;
+    contentStyle?: JSX.CSSProperties;
+    inactive?: boolean;
+    forceOpen?: boolean;
+    triggerTabIndex?: number;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;

package/dist/{components → typography/text-shimmer}/text-shimmer.d.ts

@@ -1,4 +1,5 @@
 import { type ValidComponent } from "solid-js";
+import "./text-shimmer.css";
 export declare const TextShimmer: <T extends ValidComponent = "span">(props: {
     text: string;
     class?: string;

package/dist/typography/wordmark/wordmark.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from "solid-js";
+export declare function Wordmark(props: Pick<ComponentProps<"svg">, "class"> & {
+    fade?: boolean;
+    muted?: boolean;
+}): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202609060432",
+  "version": "0.0.0-dev-19178",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,133 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./accordion": {
+      "types": "./dist/data-display/accordion/accordion.d.ts",
+      "import": "./src/data-display/accordion/accordion.tsx"
+    },
+    "./avatar": {
+      "types": "./dist/data-display/avatar/avatar.d.ts",
+      "import": "./src/data-display/avatar/avatar.tsx"
+    },
+    "./badge": {
+      "types": "./dist/data-display/badge/badge.d.ts",
+      "import": "./src/data-display/badge/badge.tsx"
+    },
+    "./button": {
+      "types": "./dist/actions/button/button.d.ts",
+      "import": "./src/actions/button/button.tsx"
+    },
+    "./button.css": "./src/actions/button/button.css",
+    "./checkbox": {
+      "types": "./dist/forms/checkbox/checkbox.d.ts",
+      "import": "./src/forms/checkbox/checkbox.tsx"
+    },
+    "./dialog": {
+      "types": "./dist/overlays/dialog/dialog.d.ts",
+      "import": "./src/overlays/dialog/dialog.tsx"
+    },
+    "./diff-changes": {
+      "types": "./dist/data-display/diff-changes/diff-changes.d.ts",
+      "import": "./src/data-display/diff-changes/diff-changes.tsx"
+    },
+    "./divider": {
+      "types": "./dist/layout/divider/divider.d.ts",
+      "import": "./src/layout/divider/divider.tsx"
+    },
+    "./field": {
+      "types": "./dist/forms/field/field.d.ts",
+      "import": "./src/forms/field/field.tsx"
+    },
+    "./file-tree.css": "./src/styles/file-tree.css",
+    "./icon": {
+      "types": "./dist/icons/icon/icon.d.ts",
+      "import": "./src/icons/icon/icon.tsx"
+    },
+    "./icon-button": {
+      "types": "./dist/actions/icon-button/icon-button.d.ts",
+      "import": "./src/actions/icon-button/icon-button.tsx"
+    },
+    "./inline-input": {
+      "types": "./dist/forms/inline-input/inline-input.d.ts",
+      "import": "./src/forms/inline-input/inline-input.tsx"
+    },
+    "./keybind": {
+      "types": "./dist/data-display/keybind/keybind.d.ts",
+      "import": "./src/data-display/keybind/keybind.tsx"
+    },
+    "./line-comment": {
+      "types": "./dist/data-display/line-comment/line-comment.d.ts",
+      "import": "./src/data-display/line-comment/line-comment.tsx"
+    },
+    "./loader": {
+      "types": "./dist/feedback/loader/loader.d.ts",
+      "import": "./src/feedback/loader/loader.tsx"
+    },
+    "./menu": {
+      "types": "./dist/navigation/menu/menu.d.ts",
+      "import": "./src/navigation/menu/menu.tsx"
+    },
+    "./progress-circle": {
+      "types": "./dist/feedback/progress-circle/progress-circle.d.ts",
+      "import": "./src/feedback/progress-circle/progress-circle.tsx"
+    },
+    "./project-avatar": {
+      "types": "./dist/data-display/project-avatar/project-avatar.d.ts",
+      "import": "./src/data-display/project-avatar/project-avatar.tsx"
+    },
+    "./radio": {
+      "types": "./dist/forms/radio/radio.d.ts",
+      "import": "./src/forms/radio/radio.tsx"
+    },
+    "./segmented-control": {
+      "types": "./dist/navigation/segmented-control/segmented-control.d.ts",
+      "import": "./src/navigation/segmented-control/segmented-control.tsx"
+    },
+    "./select": {
+      "types": "./dist/forms/select/select.d.ts",
+      "import": "./src/forms/select/select.tsx"
+    },
+    "./split-button": {
+      "types": "./dist/actions/split-button/split-button.d.ts",
+      "import": "./src/actions/split-button/split-button.tsx"
+    },
+    "./switch": {
+      "types": "./dist/forms/switch/switch.d.ts",
+      "import": "./src/forms/switch/switch.tsx"
+    },
+    "./tab-state-indicator": {
+      "types": "./dist/navigation/tab-state-indicator.d.ts",
+      "import": "./src/navigation/tab-state-indicator.tsx"
+    },
+    "./tabs": {
+      "types": "./dist/navigation/tabs/tabs.d.ts",
+      "import": "./src/navigation/tabs/tabs.tsx"
+    },
+    "./text-input": {
+      "types": "./dist/forms/text-input/text-input.d.ts",
+      "import": "./src/forms/text-input/text-input.tsx"
+    },
+    "./text-input.css": "./src/forms/text-input/text-input.css",
+    "./textarea": {
+      "types": "./dist/forms/textarea/textarea.d.ts",
+      "import": "./src/forms/textarea/textarea.tsx"
+    },
+    "./text-shimmer": {
+      "types": "./dist/typography/text-shimmer/text-shimmer.d.ts",
+      "import": "./src/typography/text-shimmer/text-shimmer.tsx"
+    },
+    "./toast": {
+      "types": "./dist/feedback/toast/toast.d.ts",
+      "import": "./src/feedback/toast/toast.tsx"
+    },
+    "./tooltip": {
+      "types": "./dist/overlays/tooltip/tooltip.d.ts",
+      "import": "./src/overlays/tooltip/tooltip.tsx"
+    },
+    "./wordmark": {
+      "types": "./dist/typography/wordmark/wordmark.d.ts",
+      "import": "./src/typography/wordmark/wordmark.tsx"
+    },
     "./*": {
       "types": "./dist/components/*.d.ts",
       "import": "./src/components/*.tsx"
@@ -63,6 +190,7 @@
       "import": "./src/storybook/fixtures.ts"
     },
     "./styles": "./src/styles/index.css",
+    "./styles/tokens": "./src/styles/tokens/index.css",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
     "./theme": {
       "types": "./dist/theme/index.d.ts",
@@ -89,13 +217,7 @@
       "import": "./src/components/app-icons/types.ts"
     },
     "./fonts/*": "./src/assets/fonts/*",
-    "./audio/*": "./src/assets/audio/*",
-    "./v2/*.css": "./src/v2/components/*.css",
-    "./v2/*": {
-      "types": "./dist/v2/components/*.d.ts",
-      "import": "./src/v2/components/*.tsx"
-    },
-    "./v2/styles/*": "./src/v2/styles/*"
+    "./audio/*": "./src/assets/audio/*"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
@@ -107,49 +229,33 @@
   },
   "devDependencies": {
     "@solidjs/meta": "0.29.4",
-    "@tailwindcss/vite": "4.1.11",
     "@tsconfig/node22": "22.0.2",
-    "@types/bun": "1.3.13",
-    "@types/katex": "0.16.7",
-    "@types/luxon": "3.7.1",
+    "@types/bun": "1.4.0",
     "@typescript/native-preview": "7.0.0-dev.20251207.1",
-    "solid-js": "1.9.10",
+    "solid-js": "1.9.15",
     "tailwindcss": "4.1.11",
-    "tw-animate-css": "1.4.0",
     "typescript": "5.8.2",
-    "vite": "7.1.4",
+    "vite": "7.3.6",
     "vite-plugin-icons-spritesheet": "3.0.1",
     "vite-plugin-solid": "2.11.10"
   },
   "dependencies": {
-    "@kobalte/core": "0.13.11",
+    "@kobalte/core": "0.13.13",
     "@pierre/diffs": "1.2.10",
-    "@shikijs/transformers": "3.9.2",
-    "@solid-primitives/bounds": "0.1.3",
-    "@solid-primitives/event-listener": "2.4.5",
-    "@solid-primitives/media": "2.3.3",
-    "@solid-primitives/resize-observer": "2.1.3",
-    "@shikijs/stream": "4.2.0",
-    "diff": "8.0.2",
-    "dompurify": "3.3.1",
+    "@solid-primitives/event-listener": "2.4.6",
+    "@solid-primitives/resize-observer": "2.2.0",
     "fuzzysort": "3.1.0",
-    "katex": "0.16.27",
-    "luxon": "3.6.1",
-    "marked": "18.0.7",
+    "katex": "0.16.47",
+    "marked": "18.0.11",
     "marked-shiki": "1.2.1",
-    "morphdom": "2.7.8",
     "motion": "12.34.5",
-    "motion-dom": "12.34.3",
-    "motion-utils": "12.29.2",
     "remeda": "2.26.0",
-    "remend": "1.3.0",
-    "shiki": "4.2.0",
+    "shiki": "4.4.3",
     "solid-list": "0.3.0",
-    "solid-sonner": "0.3.1",
-    "strip-ansi": "7.1.2"
+    "solid-sonner": "0.3.1"
   },
   "peerDependencies": {
     "@solidjs/meta": "^0.29.0",
-    "solid-js": "^1.9.0"
+    "solid-js": "^1.9.8"
   }
 }

package/src/{v2/components/button-v2.css → actions/button/button.css}

@@ -260,3 +260,32 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Ghost faint */
+[data-component="button-v2"][data-variant="ghost-faint"] {
+  background-color: transparent;
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"] [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-faint);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+    [data-expanded]
+  ) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-faint"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/{components → actions/button}/button.tsx

@@ -1,33 +1,41 @@
-import { Button as Kobalte } from "@kobalte/core/button"
+import { Root } from "@kobalte/core/button"
 import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import "./button.css"
 
 export interface ButtonProps
-  extends ComponentProps<typeof Kobalte>,
+  extends ComponentProps<typeof Root>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "primary" | "secondary" | "ghost"
+  variant?:
+    | "neutral"
+    | "danger"
+    | "warning"
+    | "outline"
+    | "contrast"
+    | "ghost"
+    | "ghost-muted"
+    | "ghost-faint"
+    | "loading"
   icon?: IconProps["name"]
 }
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
   return (
-    <Kobalte
+    <Root
       {...rest}
-      data-component="button"
+      data-component="button-v2"
       data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
+      data-variant={split.variant || "neutral"}
       data-icon={split.icon}
       classList={{
         ...split.classList,
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Show when={split.icon}>
-        <Icon name={split.icon!} size="small" />
-      </Show>
+      <Show when={split.icon}>{(icon) => <Icon name={icon()} />}</Show>
       {props.children}
-    </Kobalte>
+    </Root>
   )
 }

package/src/{v2/components/icon-button-v2.css → actions/icon-button/icon-button.css}

@@ -71,23 +71,37 @@
 
 /* Contrast */
 [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-20);
+  --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+
   background-image:
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
   color: var(--v2-text-text-contrast);
   text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
   box-shadow: var(--v2-elevation-button-contrast);
 }
 
+[data-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-60);
+  --icon-button-contrast-hover: var(--v2-alpha-dark-8);
+
+  color: var(--v2-icon-icon-inverse);
+}
+
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
   background-image:
+    linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
     linear-gradient(
       90deg,
-      var(--v2-overlay-simple-overlay-contrast-hover) 0%,
-      var(--v2-overlay-simple-overlay-contrast-hover) 100%
-    ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
 }
 
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
@@ -97,8 +111,12 @@
       var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
       var(--v2-overlay-simple-overlay-contrast-pressed) 100%
     ),
-    linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
 }
 
 [data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {