@opencode/ui 0.0.0-reserved → 2.0.0

package/dist/theme/types.d.ts

@@ -0,0 +1,56 @@
+export type HexColor = `#${string}`;
+export interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+export interface ThemeSeedColors {
+    neutral: HexColor;
+    primary: HexColor;
+    success: HexColor;
+    warning: HexColor;
+    error: HexColor;
+    info: HexColor;
+    interactive: HexColor;
+    diffAdd: HexColor;
+    diffDelete: HexColor;
+}
+export interface ThemePaletteColors {
+    neutral: HexColor;
+    ink: HexColor;
+    primary: HexColor;
+    success: HexColor;
+    warning: HexColor;
+    error: HexColor;
+    info: HexColor;
+    accent?: HexColor;
+    interactive?: HexColor;
+    diffAdd?: HexColor;
+    diffDelete?: HexColor;
+}
+type ThemeVariantBase = {
+    overrides?: Record<string, ColorValue>;
+    v2Overrides?: Record<string, V2ColorValue>;
+};
+export type ThemeVariant = ({
+    seeds: ThemeSeedColors;
+    palette?: never;
+} & ThemeVariantBase) | ({
+    palette: ThemePaletteColors;
+    seeds?: never;
+} & ThemeVariantBase);
+export interface DesktopTheme {
+    $schema?: string;
+    name: string;
+    id: string;
+    light: ThemeVariant;
+    dark: ThemeVariant;
+}
+export type TokenCategory = "background" | "surface" | "text" | "border" | "icon" | "input" | "button" | "syntax" | "markdown" | "diff" | "avatar";
+export type ThemeToken = string;
+export type CssVarRef = `var(--${string})`;
+export type ColorValue = HexColor | CssVarRef;
+export type V2ColorValue = HexColor | CssVarRef | string;
+export type ResolvedTheme = Record<ThemeToken, ColorValue>;
+export type ResolvedV2Theme = Record<string, V2ColorValue>;
+export {};

package/dist/theme/v2/avatar.d.ts

@@ -0,0 +1,5 @@
+import type { V2ColorValue } from "../types";
+/** Fixed project avatar colors (OC-2); theme-independent like v1 `avatar-background-*`. */
+export declare const V2_AVATAR_FG = "#ffffffff";
+export declare const V2_AVATAR_LIGHT: Record<string, V2ColorValue>;
+export declare const V2_AVATAR_DARK: Record<string, V2ColorValue>;

package/dist/theme/v2/default-primitives.d.ts

@@ -0,0 +1,3 @@
+import type { V2ColorValue } from "../types";
+/** Default v2 hue ramps from `v2/styles/colors.css` (OC-2). Alpha ramps live in CSS only. */
+export declare const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue>;

package/dist/theme/v2/foreground.d.ts

@@ -0,0 +1,2 @@
+import type { ColorValue, HexColor, V2ColorValue } from "../types";
+export declare function mapV2Foreground(ink: HexColor, isDark: boolean, primitives: Record<string, V2ColorValue>, overrides?: Record<string, ColorValue>): Record<string, V2ColorValue>;

package/dist/theme/v2/mapping.d.ts

@@ -0,0 +1,3 @@
+import type { V2ColorValue } from "../types";
+export declare function mapV2Semantics(isDark: boolean): Record<string, V2ColorValue>;
+export declare function mergeV2Tokens(...layers: Record<string, V2ColorValue>[]): Record<string, V2ColorValue>;

package/dist/theme/v2/resolve.d.ts

@@ -0,0 +1,9 @@
+import type { DesktopTheme, ResolvedV2Theme, ThemeVariant, V2ColorValue } from "../types";
+/** Build v2 primitive ramps (100 = lightest). Alpha ramps are static in `v2/styles/colors.css`. */
+export declare function generateV2Primitives(variant: ThemeVariant, isDark: boolean): Record<string, V2ColorValue>;
+export declare function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): ResolvedV2Theme;
+export declare function resolveThemeV2(theme: DesktopTheme): {
+    light: ResolvedV2Theme;
+    dark: ResolvedV2Theme;
+};
+export declare function themeV2ToCss(tokens: ResolvedV2Theme): string;

package/dist/typography/text-shimmer/text-shimmer.d.ts

@@ -0,0 +1,9 @@
+import { type ValidComponent } from "solid-js";
+import "./text-shimmer.css";
+export declare const TextShimmer: <T extends ValidComponent = "span">(props: {
+    text: string;
+    class?: string;
+    as?: T;
+    active?: boolean;
+    offset?: number;
+}) => import("solid-js").JSX.Element;

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,15 +1,261 @@
 {
   "name": "@opencode/ui",
-  "version": "0.0.0-reserved",
-  "description": "OpenCode package bootstrap — not a functional release",
+  "version": "2.0.0",
+  "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/anomalyco/opencode.git"
+    "url": "git+https://github.com/anomalyco/opencode.git",
+    "directory": "packages/ui"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "tag": "reserved"
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist/**/*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx",
+    "src/**/*.css",
+    "src/theme/themes/*.json",
+    "src/components/app-icons/sprite.svg",
+    "src/components/file-icons/sprite.svg",
+    "src/components/provider-icons/sprite.svg",
+    "src/assets/icons/app/*",
+    "src/assets/fonts/*",
+    "src/assets/audio/*",
+    "LICENSE"
+  ],
+  "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"
+    },
+    "./i18n/*": {
+      "types": "./dist/i18n/*.d.ts",
+      "import": "./src/i18n/*.ts"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./src/hooks/index.ts"
+    },
+    "./context": {
+      "types": "./dist/context/index.d.ts",
+      "import": "./src/context/index.ts"
+    },
+    "./context/*": {
+      "types": "./dist/context/*.d.ts",
+      "import": "./src/context/*.tsx"
+    },
+    "./storybook/scaffold": {
+      "types": "./dist/storybook/scaffold.d.ts",
+      "import": "./src/storybook/scaffold.tsx"
+    },
+    "./storybook/fixtures": {
+      "types": "./dist/storybook/fixtures.d.ts",
+      "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",
+      "import": "./src/theme/index.ts"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "import": "./src/theme/*.ts"
+    },
+    "./theme/context": {
+      "types": "./dist/theme/context.d.ts",
+      "import": "./src/theme/context.tsx"
+    },
+    "./icons/provider": {
+      "types": "./dist/components/provider-icons/types.d.ts",
+      "import": "./src/components/provider-icons/types.ts"
+    },
+    "./icons/file-type": {
+      "types": "./dist/components/file-icons/types.d.ts",
+      "import": "./src/components/file-icons/types.ts"
+    },
+    "./icons/app": {
+      "types": "./dist/components/app-icons/types.d.ts",
+      "import": "./src/components/app-icons/types.ts"
+    },
+    "./fonts/*": "./src/assets/fonts/*",
+    "./audio/*": "./src/assets/audio/*"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "typecheck": "tsgo --noEmit",
+    "test": "bun test src --only-failures",
+    "dev": "vite",
+    "generate:tailwind": "bun run script/tailwind.ts",
+    "generate:v2-oc2": "bun run script/build-oc2-v2-overrides.ts"
+  },
+  "devDependencies": {
+    "@solidjs/meta": "0.29.4",
+    "@tsconfig/node22": "22.0.2",
+    "@types/bun": "1.4.0",
+    "@typescript/native-preview": "7.0.0-dev.20251207.1",
+    "solid-js": "1.9.15",
+    "tailwindcss": "4.1.11",
+    "typescript": "5.8.2",
+    "vite": "7.3.6",
+    "vite-plugin-icons-spritesheet": "3.0.1",
+    "vite-plugin-solid": "2.11.10"
+  },
+  "dependencies": {
+    "@kobalte/core": "0.13.13",
+    "@pierre/diffs": "1.2.10",
+    "@solid-primitives/event-listener": "2.4.6",
+    "@solid-primitives/resize-observer": "2.2.0",
+    "fuzzysort": "3.1.0",
+    "katex": "0.16.47",
+    "marked": "18.0.11",
+    "marked-shiki": "1.2.1",
+    "motion": "12.34.5",
+    "remeda": "2.26.0",
+    "shiki": "4.4.3",
+    "solid-list": "0.3.0",
+    "solid-sonner": "0.3.1"
+  },
+  "peerDependencies": {
+    "@solidjs/meta": "^0.29.0",
+    "solid-js": "^1.9.8"
   }
 }

package/src/actions/button/button.css

@@ -0,0 +1,294 @@
+@import "../submit.css";
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="button-v2"] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 6px;
+  font-style: normal;
+  font-weight: 530;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--v2-text-text-base);
+  text-shadow: none;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.04px;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="button-v2"]:focus {
+  outline: none;
+}
+
+[data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 2.5px;
+}
+
+[data-component="button-v2"][data-size="normal"] {
+  height: 28px;
+  padding: 0 11px;
+}
+
+[data-component="button-v2"][data-size="small"] {
+  height: 24px;
+  padding: 0 9px;
+  border-radius: 4px;
+}
+
+[data-component="button-v2"][data-size="large"] {
+  height: 32px;
+  padding: 0 15px;
+}
+
+[data-component="button-v2"][data-icon][data-size="small"] {
+  padding-left: 9px;
+}
+
+[data-component="button-v2"][data-icon][data-size="normal"] {
+  padding-left: 11px;
+}
+
+[data-component="button-v2"][data-icon][data-size="large"] {
+  padding-left: 15px;
+}
+
+[data-component="button-v2"] [data-slot="icon-svg"] {
+  color: currentColor;
+}
+
+/* Neutral */
+[data-component="button-v2"][data-variant="neutral"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-text-text-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Danger */
+[data-component="button-v2"][data-variant="danger"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-state-fg-danger);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="danger"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="danger"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="danger"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="button-v2"][data-variant="warning"] {
+  background-color: var(--v2-background-bg-button-neutral);
+  color: var(--v2-state-fg-warning);
+  box-shadow: var(--v2-elevation-button-neutral);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
+    linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
+}
+
+[data-component="button-v2"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Outline */
+[data-component="button-v2"][data-variant="outline"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Contrast */
+[data-component="button-v2"][data-variant="contrast"] {
+  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%);
+  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-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    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%);
+}
+
+[data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      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%);
+}
+
+[data-component="button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Loading */
+[data-component="button-v2"][data-variant="loading"] {
+  background: var(--v2-background-bg-layer-02);
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Ghost */
+[data-component="button-v2"][data-variant="ghost"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+}
+
+[data-component="button-v2"][data-variant="ghost"]: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"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Ghost muted */
+[data-component="button-v2"][data-variant="ghost-muted"] {
+  background-color: transparent;
+  color: var(--v2-text-text-muted);
+  font-weight: 440;
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]: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-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+  color: var(--v2-text-text-base);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) [data-slot="icon-svg"] {
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
+  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;
+}