@opencode-ai/ui 0.0.0-dev-202606260600 → 0.0.0-dev-202606260805

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202606260600",
+  "version": "0.0.0-dev-202606260805",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/accordion.css

@@ -35,12 +35,12 @@
         cursor: default;
         user-select: none;
 
-        background-color: var(--background-stronger);
-        border: 1px solid var(--border-weak-base);
+        background-color: var(--v2-background-bg-base);
+        border: 0.5px solid var(--v2-border-border-base);
         border-radius: 0;
         box-shadow: none;
         overflow: clip;
-        color: var(--text-strong);
+        color: var(--v2-text-text-base);
         transition: background-color 0.15s ease;
 
         /* text-12-regular */
@@ -52,10 +52,10 @@
         letter-spacing: var(--letter-spacing-normal);
 
         &:hover:not([data-disabled]) {
-          background-color: var(--surface-base-hover);
+          background-color: var(--v2-overlay-simple-overlay-hover);
         }
         &:active:not([data-disabled]) {
-          background-color: var(--surface-base-active);
+          background-color: var(--v2-overlay-simple-overlay-pressed);
         }
         &:focus-visible {
           outline: none;
@@ -82,9 +82,9 @@
 
     &[data-expanded] {
       [data-slot="accordion-content"] {
-        border: 1px solid var(--border-weak-base);
+        border: 0.5px solid var(--v2-border-border-base);
         border-top: 0;
-        background-color: var(--background-stronger);
+        background-color: var(--v2-background-bg-layer-01);
       }
     }
 
@@ -104,6 +104,30 @@
   }
 }
 
+body:not([data-new-layout]) [data-component="accordion"] {
+  [data-slot="accordion-item"] [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+    background-color: var(--background-stronger);
+    border-width: 1px;
+    border-color: var(--border-weak-base);
+    color: var(--text-strong);
+
+    &:hover:not([data-disabled]) {
+      background-color: var(--surface-base-hover);
+    }
+
+    &:active:not([data-disabled]) {
+      background-color: var(--surface-base-active);
+    }
+  }
+
+  [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
+    border-width: 1px;
+    border-color: var(--border-weak-base);
+    border-top: 0;
+    background-color: var(--background-stronger);
+  }
+}
+
 @keyframes slideDown {
   from {
     height: 0;

package/src/components/card.css

@@ -19,14 +19,14 @@
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-large);
   letter-spacing: var(--letter-spacing-normal);
-  color: var(--text-strong);
+  color: var(--v2-text-text-base);
 
   --card-gap: 8px;
   --card-icon: 16px;
   --card-indent: 0px;
   --card-line-pad: 8px;
 
-  --card-accent: var(--icon-active);
+  --card-accent: var(--v2-icon-icon-base);
 
   &:has([data-slot="card-title"]) {
     gap: 8px;
@@ -48,7 +48,7 @@
   }
 
   :where([data-card="title"], [data-slot="card-title"]) {
-    color: var(--text-strong);
+    color: var(--v2-text-text-base);
     font-weight: var(--font-weight-medium);
   }
 
@@ -72,7 +72,7 @@
   }
 
   :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
-    color: var(--text-weak);
+    color: var(--v2-text-text-faint);
   }
 
   :where([data-slot="card-title-icon"])
@@ -82,7 +82,7 @@
   }
 
   :where([data-card="description"], [data-slot="card-description"]) {
-    color: var(--text-base);
+    color: var(--v2-text-text-muted);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
     word-break: break-word;
@@ -92,3 +92,24 @@
     padding-left: var(--card-indent);
   }
 }
+
+body:not([data-new-layout]) [data-component="card"] {
+  color: var(--text-strong);
+  --card-accent: var(--icon-active);
+
+  :where([data-card="title"], [data-slot="card-title"]) {
+    color: var(--text-strong);
+  }
+
+  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
+    color: var(--text-weak);
+  }
+
+  :where([data-card="description"], [data-slot="card-description"]) {
+    color: var(--text-base);
+  }
+
+  &[data-variant="error"] {
+    --card-accent: var(--icon-critical-base) !important;
+  }
+}

package/src/components/card.tsx

@@ -40,7 +40,7 @@ export function Card(props: CardProps) {
   const variant = () => split.variant ?? "normal"
   const accent = () => {
     const v = variant()
-    if (v === "error") return "var(--icon-critical-base)"
+    if (v === "error") return "var(--v2-state-fg-danger)"
     if (v === "warning") return "var(--icon-warning-active)"
     if (v === "success") return "var(--icon-success-active)"
     if (v === "info") return "var(--icon-info-active)"

package/src/styles/tailwind/colors.css

@@ -249,6 +249,7 @@
   --color-v2-text-text-contrast: var(--v2-text-text-contrast);
   --color-v2-text-text-accent: var(--v2-text-text-accent);
   --color-v2-text-text-accent-hover: var(--v2-text-text-accent-hover);
+  --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-inverse: var(--v2-icon-icon-inverse);
@@ -282,4 +283,4 @@
   --color-v2-state-bg-info: var(--v2-state-bg-info);
   --color-v2-state-fg-info: var(--v2-state-fg-info);
   --color-v2-state-border-info: var(--v2-state-border-info);
-}
+}

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

@@ -20,6 +20,8 @@
       "text-base": "#6F6F6F",
       "text-weak": "#8F8F8F",
       "text-weaker": "#C7C7C7",
+      "text-diff-add-base": "var(--v2-state-fg-success)",
+      "text-diff-delete-base": "var(--v2-state-fg-danger)",
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
@@ -31,14 +33,14 @@
       "surface-interactive-weak": "#F5FAFF",
       "icon-success-base": "#0ABE00",
       "surface-success-base": "#E6FFE5",
-      "syntax-comment": "#7a7a7a",
-      "syntax-keyword": "#a753ae",
-      "syntax-string": "#00ceb9",
-      "syntax-primitive": "#034cff",
-      "syntax-property": "#a753ae",
-      "syntax-type": "#8a6f00",
+      "syntax-comment": "var(--v2-text-text-muted)",
+      "syntax-keyword": "var(--v2-pink-800)",
+      "syntax-string": "var(--v2-green-800)",
+      "syntax-primitive": "var(--v2-pink-800)",
+      "syntax-property": "var(--v2-orange-800)",
+      "syntax-type": "var(--v2-purple-800)",
       "syntax-constant": "#007b80",
-      "syntax-critical": "#ff8c00",
+      "syntax-critical": "var(--v2-red-800)",
       "syntax-diff-delete": "#ff8c00",
       "syntax-diff-unknown": "#a753ae",
       "surface-critical-base": "#FFF2F0"
@@ -170,6 +172,7 @@
       "v2-text-text-contrast": "var(--v2-grey-50)",
       "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-icon-icon-base": "var(--v2-grey-800)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
       "v2-icon-icon-inverse": "var(--v2-grey-50)",
@@ -252,6 +255,8 @@
       "text-base": "#A0A0A0",
       "text-weak": "#707070",
       "text-weaker": "#505050",
+      "text-diff-add-base": "var(--v2-state-fg-success)",
+      "text-diff-delete-base": "var(--v2-state-fg-danger)",
       "border-weak-base": "#282828",
       "border-weaker-base": "#232323",
       "icon-base": "#7E7E7E",
@@ -262,14 +267,14 @@
       "surface-base-hover": "#FFFFFF0D",
       "surface-interactive-weak": "#0D172B",
       "surface-success-base": "#022B00",
-      "syntax-comment": "#8f8f8f",
-      "syntax-keyword": "#edb2f1",
-      "syntax-string": "#00ceb9",
-      "syntax-primitive": "#8cb0ff",
-      "syntax-property": "#fab283",
-      "syntax-type": "#fcd53a",
+      "syntax-comment": "var(--v2-text-text-muted)",
+      "syntax-keyword": "var(--v2-pink-400)",
+      "syntax-string": "var(--v2-green-400)",
+      "syntax-primitive": "var(--v2-pink-400)",
+      "syntax-property": "var(--v2-orange-400)",
+      "syntax-type": "var(--v2-purple-400)",
       "syntax-constant": "#93e9f6",
-      "syntax-critical": "#fab283",
+      "syntax-critical": "var(--v2-red-400)",
       "syntax-diff-delete": "#fab283",
       "syntax-diff-unknown": "#edb2f1",
       "surface-critical-base": "#1F0603"
@@ -401,6 +406,7 @@
       "v2-text-text-contrast": "var(--v2-grey-50)",
       "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-icon-icon-base": "var(--v2-grey-400)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
       "v2-icon-icon-inverse": "var(--v2-grey-1100)",

package/src/theme/v2/mapping.ts

@@ -18,6 +18,7 @@ const light: Record<string, V2ColorValue> = {
   "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-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"),
@@ -81,6 +82,7 @@ const dark: Record<string, V2ColorValue> = {
   "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-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/styles/theme.css

@@ -1,4 +1,16 @@
 @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;
 
@@ -22,6 +34,7 @@
     --v2-text-text-contrast: var(--v2-grey-50);
     --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);
 
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
@@ -141,6 +154,7 @@
       --v2-text-text-contrast: var(--v2-grey-100);
       --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-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
@@ -243,6 +257,7 @@
     --v2-text-text-contrast: var(--v2-grey-50);
     --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-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
@@ -352,6 +367,7 @@
     --v2-text-text-contrast: var(--v2-grey-50);
     --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-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);