@opencode-ai/ui 0.0.0-dev-19010 → 0.0.0-dev-202609031506

package/src/styles/index.css

@@ -6,31 +6,47 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../data-display/accordion/accordion.css" layer(components);
+@import "../components/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 "../forms/checkbox/checkbox.css" layer(components);
+@import "../components/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 "../forms/inline-input/inline-input.css" layer(components);
+@import "../components/keybind.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 "../navigation/tabs/tabs.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tag.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

@@ -252,7 +252,6 @@
   --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,21 +1,7 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@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 "tailwindcss/utilities.css" layer(utilities) source("../../../../");
 @import "./utilities.css";
 
 @import "../index.css";
@@ -65,9 +51,6 @@
   --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: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    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/theme/context.tsx

@@ -84,9 +84,8 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
-  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
-  return "oc-2"
+function normalize(id: string | null | undefined) {
+  return id === "oc-1" ? "oc-2" : id
 }
 
 function read(key: string) {
@@ -178,12 +177,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-    const themeId = resolveStoredTheme(rawTheme)
-    if (rawTheme && rawTheme !== themeId) {
-      write(STORAGE_KEYS.THEME_ID, themeId)
-      clear()
-    }
+    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -200,7 +194,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -239,11 +233,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = resolveStoredTheme(e.newValue, store.themes)
-        if (next !== e.newValue) {
-          write(STORAGE_KEYS.THEME_ID, next)
-          clear()
-        }
+        const next = normalize(e.newValue)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -270,8 +262,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
+      const rawTheme = read(STORAGE_KEYS.THEME_ID)
+      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -293,7 +285,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -333,7 +325,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = id
+        const next = normalize(id)
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "C7C7C7",
+      "icon-weak-base": "#C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",
@@ -120,18 +120,18 @@
       "v2-cyan-1000": "#005a6eff",
       "v2-cyan-1100": "#004756ff",
       "v2-cyan-1200": "#00353fff",
-      "v2-blue-100": "#f5f8ffff",
-      "v2-blue-200": "#ecf1feff",
+      "v2-blue-100": "#ecf1feff",
+      "v2-blue-200": "#d7e2fcff",
       "v2-blue-300": "#c3d4fdff",
       "v2-blue-400": "#a2bcffff",
       "v2-blue-500": "#7698fdff",
       "v2-blue-600": "#3b5cf6ff",
-      "v2-blue-700": "#0b34f4ff",
-      "v2-blue-800": "#3250dfff",
-      "v2-blue-900": "#2c47c8ff",
-      "v2-blue-1000": "#263fa9ff",
-      "v2-blue-1100": "#22388fff",
-      "v2-blue-1200": "#021945ff",
+      "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-purple-100": "#ebecfeff",
       "v2-purple-200": "#d5d5fcff",
       "v2-purple-300": "#b9b8f5ff",
@@ -166,7 +166,6 @@
       "v2-background-bg-contrast": "var(--v2-grey-1000)",
       "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)",
       "v2-text-text-faint": "var(--v2-grey-600)",
@@ -175,10 +174,8 @@
       "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)",
@@ -207,20 +204,9 @@
       "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-200)",
+      "v2-state-bg-info": "var(--v2-blue-100)",
       "v2-state-fg-info": "var(--v2-blue-800)",
       "v2-state-border-info": "var(--v2-blue-300)",
-      "v2-agent-plan-solid": "var(--v2-pink-800)",
-      "v2-agent-plan-border": "rgba(200, 61, 139, 0.2)",
-      "v2-agent-plan-background": "rgba(253, 236, 243, 0.1)",
-      "v2-agent-build-solid": "var(--v2-blue-800)",
-      "v2-agent-build-border": "rgba(44, 71, 200, 0.1)",
-      "v2-agent-build-background": "rgba(236, 241, 254, 0.1)",
-      "v2-agent-explore-solid": "var(--v2-yellow-900)",
-      "v2-agent-explore-border": "rgba(203, 159, 52, 0.2)",
-      "v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
-      "v2-agent-review-solid": "var(--v2-green-800)",
-      "v2-agent-writer-solid": "var(--v2-purple-700)",
       "v2-avatar-bg-orange": "#ee7330ff",
       "v2-avatar-border-orange": "#d16427ff",
       "v2-avatar-bg-yellow": "#e7af36ff",
@@ -249,8 +235,7 @@
       "v2-elevation-switch-on": "inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20)",
       "v2-illustration-illustration-layer-01": "var(--v2-grey-300)",
       "v2-illustration-illustration-layer-02": "var(--v2-grey-400)",
-      "v2-illustration-illustration-layer-03": "var(--v2-grey-500)",
-      "v2-font-family-code": "var(--font-family-mono)"
+      "v2-illustration-illustration-layer-03": "var(--v2-grey-500)"
     }
   },
   "dark": {
@@ -370,18 +355,18 @@
       "v2-cyan-1000": "#005a6eff",
       "v2-cyan-1100": "#004756ff",
       "v2-cyan-1200": "#00353fff",
-      "v2-blue-100": "#f5f8ffff",
-      "v2-blue-200": "#ecf1feff",
+      "v2-blue-100": "#ecf1feff",
+      "v2-blue-200": "#d7e2fcff",
       "v2-blue-300": "#c3d4fdff",
       "v2-blue-400": "#a2bcffff",
       "v2-blue-500": "#7698fdff",
       "v2-blue-600": "#3b5cf6ff",
-      "v2-blue-700": "#0b34f4ff",
-      "v2-blue-800": "#3250dfff",
-      "v2-blue-900": "#2c47c8ff",
-      "v2-blue-1000": "#263fa9ff",
-      "v2-blue-1100": "#22388fff",
-      "v2-blue-1200": "#021945ff",
+      "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-purple-100": "#ebecfeff",
       "v2-purple-200": "#d5d5fcff",
       "v2-purple-300": "#b9b8f5ff",
@@ -416,7 +401,6 @@
       "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-100)",
       "v2-text-text-muted": "var(--v2-grey-500)",
       "v2-text-text-faint": "var(--v2-grey-600)",
@@ -425,10 +409,8 @@
       "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)",
@@ -460,17 +442,6 @@
       "v2-state-bg-info": "var(--v2-blue-1200)",
       "v2-state-fg-info": "var(--v2-blue-500)",
       "v2-state-border-info": "var(--v2-blue-900)",
-      "v2-agent-plan-solid": "var(--v2-pink-400)",
-      "v2-agent-plan-border": "rgba(247, 153, 198, 0.2)",
-      "v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
-      "v2-agent-build-solid": "var(--v2-blue-300)",
-      "v2-agent-build-border": "rgba(162, 188, 255, 0.2)",
-      "v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
-      "v2-agent-explore-solid": "var(--v2-yellow-300)",
-      "v2-agent-explore-border": "rgba(243, 218, 155, 0.2)",
-      "v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
-      "v2-agent-review-solid": "var(--v2-green-300)",
-      "v2-agent-writer-solid": "var(--v2-purple-400)",
       "v2-avatar-bg-orange": "#723d22ff",
       "v2-avatar-border-orange": "#ff8648ff",
       "v2-avatar-bg-yellow": "#68552bff",

package/src/theme/v2/default-primitives.ts

@@ -75,18 +75,18 @@ export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
   "v2-cyan-1000": "#005a6eff",
   "v2-cyan-1100": "#004756ff",
   "v2-cyan-1200": "#00353fff",
-  "v2-blue-100": "#f5f8ffff",
-  "v2-blue-200": "#ecf1feff",
+  "v2-blue-100": "#ecf1feff",
+  "v2-blue-200": "#d7e2fcff",
   "v2-blue-300": "#c3d4fdff",
   "v2-blue-400": "#a2bcffff",
   "v2-blue-500": "#7698fdff",
   "v2-blue-600": "#3b5cf6ff",
-  "v2-blue-700": "#0b34f4ff",
-  "v2-blue-800": "#3250dfff",
-  "v2-blue-900": "#2c47c8ff",
-  "v2-blue-1000": "#263fa9ff",
-  "v2-blue-1100": "#22388fff",
-  "v2-blue-1200": "#021945ff",
+  "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-purple-100": "#ebecfeff",
   "v2-purple-200": "#d5d5fcff",
   "v2-purple-300": "#b9b8f5ff",

package/src/theme/v2/foreground.ts

@@ -52,7 +52,6 @@ export function mapV2Foreground(
     "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
     "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
     "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
-    "v2-icon-icon-faint": greyRef(pickGrey(primitives, bgBase, 1.5, 500)),
     "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
     "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
     "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",

package/src/theme/v2/mapping.ts

@@ -42,13 +42,11 @@ const light: Record<string, V2ColorValue> = {
   "v2-background-bg-contrast": ref("v2-grey-900"),
   "v2-background-bg-button-neutral": ref("v2-grey-100"),
   "v2-background-bg-accent": ref("v2-blue-600"),
-  "v2-background-bg-code-path": ref("v2-cyan-100"),
   "v2-text-text-inverse": ref("v2-grey-100"),
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-600"),
   "v2-text-text-accent-hover": ref("v2-blue-700"),
   "v2-text-text-code-accent": ref("v2-blue-900"),
-  "v2-text-text-code-path": ref("v2-blue-900"),
   "v2-border-border-muted": ref("v2-alpha-dark-8"),
   "v2-border-border-base": ref("v2-alpha-dark-10"),
   "v2-border-border-strong": ref("v2-alpha-dark-20"),
@@ -73,7 +71,7 @@ const light: Record<string, V2ColorValue> = {
   "v2-state-bg-danger": ref("v2-red-100"),
   "v2-state-fg-danger": ref("v2-red-800"),
   "v2-state-border-danger": ref("v2-red-300"),
-  "v2-state-bg-info": ref("v2-blue-200"),
+  "v2-state-bg-info": ref("v2-blue-100"),
   "v2-state-fg-info": ref("v2-blue-800"),
   "v2-state-border-info": ref("v2-blue-300"),
   ...lightAgentTokens,
@@ -109,13 +107,11 @@ const dark: Record<string, V2ColorValue> = {
   "v2-background-bg-contrast": ref("v2-grey-700"),
   "v2-background-bg-button-neutral": ref("v2-alpha-light-6"),
   "v2-background-bg-accent": ref("v2-blue-600"),
-  "v2-background-bg-code-path": ref("v2-cyan-1200"),
   "v2-text-text-inverse": ref("v2-grey-1000"),
   "v2-text-text-contrast": ref("v2-grey-100"),
   "v2-text-text-accent": ref("v2-blue-400"),
   "v2-text-text-accent-hover": ref("v2-blue-300"),
   "v2-text-text-code-accent": ref("v2-blue-400"),
-  "v2-text-text-code-path": ref("v2-blue-300"),
   "v2-border-border-muted": ref("v2-alpha-light-8"),
   "v2-border-border-base": ref("v2-alpha-light-10"),
   "v2-border-border-strong": ref("v2-alpha-light-20"),

package/src/v2/components/accordion-v2.css

@@ -0,0 +1,139 @@
+[data-component="accordion-v2"] {
+  --accordion-v2-fg: var(--v2-text-text-base);
+  --accordion-v2-icon: var(--v2-icon-icon-base);
+  --accordion-v2-border: var(--v2-border-border-strong);
+  --accordion-v2-bg: var(--v2-background-bg-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
+  overflow: hidden;
+
+  color: var(--accordion-v2-fg);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="accordion-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-item"]:last-child {
+  box-shadow: none;
+}
+
+[data-slot="accordion-v2-header"] {
+  display: flex;
+  margin: 0;
+}
+
+[data-component="accordion-v2-trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  width: 100%;
+  min-height: 30px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--accordion-v2-fg);
+  text-align: left;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accordion-v2-icon);
+  transition: transform 150ms ease;
+}
+
+[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-trigger"][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-component="accordion-v2-content"] {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 140%;
+  color: var(--accordion-v2-fg);
+}
+
+[data-component="accordion-v2-content"][data-expanded] {
+  animation: accordion-v2-down 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"][data-closed] {
+  animation: accordion-v2-up 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding: 12px;
+}
+
+@keyframes accordion-v2-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes accordion-v2-up {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/v2/components/accordion-v2.tsx

@@ -0,0 +1,86 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
+import "./accordion-v2.css"
+
+const ChevronDown: Component = () => (
+  <svg
+    data-slot="accordion-v2-chevron"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
+  </svg>
+)
+
+export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
+export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideChevron?: boolean
+}
+export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
+}
+
+function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...r}
+      data-component="accordion-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      {s.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
+  return (
+    <Kobalte.Trigger
+      {...r}
+      data-component="accordion-v2-trigger"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
+      <Show when={!s.hideChevron}>
+        <ChevronDown />
+      </Show>
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...r}
+      data-component="accordion-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <div data-slot="accordion-v2-content-inner">{s.children}</div>
+    </Kobalte.Content>
+  )
+}
+
+export const AccordionV2 = Object.assign(AccordionV2Root, {
+  Item: AccordionV2Item,
+  Header: AccordionV2Header,
+  Trigger: AccordionV2Trigger,
+  Content: AccordionV2Content,
+})

package/src/{data-display/avatar/avatar.tsx → v2/components/avatar-v2.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./avatar.css"
+import "./avatar-v2.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl

package/src/{data-display/badge/badge.css → v2/components/badge-v2.css}

@@ -31,22 +31,3 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
-
-[data-component="tag"][data-appearance="standard"] {
-  height: 18px;
-  padding: 0 6px;
-  border-radius: var(--radius-xs);
-  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;
-}
-
-[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-}