Home Explore Help
Register Sign In
ZhangJinChen
/
opencode
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

wip(desktop): layout improvements

Adam 9 months ago
parent
779a27693a
commit
a8836c5615
27 changed files with 880 additions and 316 deletions
Split View Show Diff Stats
  1. 6 8
      packages/desktop/index.html
  2. 6 6
      packages/desktop/src/components/prompt-input.tsx
  3. 104 0
      packages/desktop/src/components/session-review.tsx
  4. 17 0
      packages/desktop/src/components/sticky-accordion-header.tsx
  5. 4 7
      packages/desktop/src/context/local.tsx
  6. 68 184
      packages/desktop/src/pages/session.tsx
  7. 20 15
      packages/ui/script/colors.txt
  8. 1 1
      packages/ui/script/tailwind.ts
  9. 15 14
      packages/ui/src/components/accordion.css
  10. 3 8
      packages/ui/src/components/accordion.tsx
  11. 1 1
      packages/ui/src/components/button.css
  12. 1 1
      packages/ui/src/components/card.css
  13. 1 1
      packages/ui/src/components/checkbox.css
  14. 1 1
      packages/ui/src/components/collapsible.css
  15. 1 1
      packages/ui/src/components/dialog.css
  16. 1 1
      packages/ui/src/components/icon-button.css
  17. 1 0
      packages/ui/src/components/icon.tsx
  18. 1 1
      packages/ui/src/components/list.css
  19. 2 2
      packages/ui/src/components/select-dialog.css
  20. 2 2
      packages/ui/src/components/select.css
  21. 43 5
      packages/ui/src/components/tabs.css
  22. 21 10
      packages/ui/src/components/tabs.tsx
  23. 1 1
      packages/ui/src/components/tooltip.css
  24. 48 0
      packages/ui/src/styles/colors.css
  25. 8 8
      packages/ui/src/styles/tailwind/colors.css
  26. 502 37
      packages/ui/src/styles/theme.css
  27. 1 1
      packages/ui/src/styles/utilities.css

+ 6 - 8
packages/desktop/index.html
View File 

@@ -8,14 +8,12 @@
 
     <title>OpenCode</title>
 
   </head>
 
   <body class="antialiased overscroll-none select-none text-12-regular">
 
-    <!-- <script> -->
 
-    <!--   ;(function () { -->
 
-    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
 
-    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
 
-    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
 
-    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
 
-    <!--   })() -->
 
-    <!-- </script> -->
 
+    <script>
 
+      ;(function () {
 
+        const savedTheme = localStorage.getItem("theme") || "oc-2-paper"
 
+        document.documentElement.setAttribute("data-theme", savedTheme)
 
+      })()
 
+    </script>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
     <script src="/src/index.tsx" type="module"></script>

+ 6 - 6
packages/desktop/src/components/prompt-input.tsx
View File 

@@ -347,7 +347,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
       <Show when={store.popoverIsOpen}>
 
         <div
 
           class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-[252px] min-h-10
 
-                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-2xl 
+                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-md
 
                  border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
 
         >
 
           <Show when={flat().length > 0} fallback={<div class="text-text-weak px-2">No matching files</div>}>
 
@@ -382,7 +382,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
         onSubmit={handleSubmit}
 
         classList={{
 
           "bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
 
-          "rounded-2xl overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
 
+          "rounded-md overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
 
           [props.class ?? ""]: !!props.class,
 
         }}
 
       >
 
@@ -396,17 +396,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
             onInput={handleInput}
 
             onKeyDown={handleKeyDown}
 
             classList={{
 
-              "w-full p-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
 
+              "w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
 
               "[&>[data-type=file]]:text-icon-info-active": true,
 
             }}
 
           />
 
           <Show when={!session.prompt.dirty()}>
 
-            <div class="absolute top-0 left-0 p-3 text-14-regular text-text-weak pointer-events-none">
 
+            <div class="absolute top-0 left-0 px-5 py-3 text-14-regular text-text-weak pointer-events-none">
 
               Plan and build anything
 
             </div>
 
           </Show>
 
         </div>
 
-        <div class="p-3 flex items-center justify-between">
 
+        <div class="relative p-3 flex items-center justify-between">
 
           <div class="flex items-center justify-start gap-1">
 
             <Select
 
               options={local.agent.list().map((agent) => agent.name)}
 
@@ -489,7 +489,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
               disabled={!session.prompt.dirty() && !session.working()}
 
               icon={session.working() ? "stop" : "arrow-up"}
 
               variant="primary"
 
-              class="rounded-full"
 
+              class="h-10 w-8 absolute right-2 bottom-2"
 
             />
 
           </Tooltip>
 
         </div>

+ 104 - 0
packages/desktop/src/components/session-review.tsx
View File 

@@ -0,0 +1,104 @@
 
+import { useLocal } from "@/context/local"
 
+import { useSession } from "@/context/session"
 
+import { FileIcon } from "@/ui"
 
+import { getDirectory, getFilename } from "@/utils"
 
+import { Accordion, Button, Diff, DiffChanges, Icon, IconButton, Tooltip } from "@opencode-ai/ui"
 
+import { For, Match, Show, Switch } from "solid-js"
 
+import { StickyAccordionHeader } from "./sticky-accordion-header"
 
+import { createStore } from "solid-js/store"
 
+
 
+export const SessionReview = (props: { split?: boolean; class?: string; hideExpand?: boolean }) => {
 
+  const local = useLocal()
 
+  const session = useSession()
 
+  const [store, setStore] = createStore({
 
+    open: session.diffs().map((d) => d.file),
 
+  })
 
+
 
+  const handleChange = (open: string[]) => {
 
+    setStore("open", open)
 
+  }
 
+
 
+  const handleExpandOrCollapseAll = () => {
 
+    if (store.open.length > 0) {
 
+      setStore("open", [])
 
+    } else {
 
+      setStore(
 
+        "open",
 
+        session.diffs().map((d) => d.file),
 
+      )
 
+    }
 
+  }
 
+
 
+  return (
 
+    <div
 
+      classList={{
 
+        "flex flex-col gap-3 h-full overflow-y-auto no-scrollbar": true,
 
+        [props.class ?? ""]: !!props.class,
 
+      }}
 
+    >
 
+      <div class="sticky top-0 z-20 bg-background-stronger h-8 shrink-0 flex justify-between items-center self-stretch">
 
+        <div class="text-14-medium text-text-strong">Session changes</div>
 
+        <div class="flex items-center gap-x-4 pr-px">
 
+          <Button size="normal" icon="chevron-grabber-vertical" onClick={handleExpandOrCollapseAll}>
 
+            <Switch>
 
+              <Match when={store.open.length > 0}>Collapse all</Match>
 
+              <Match when={true}>Expand all</Match>
 
+            </Switch>
 
+          </Button>
 
+          <Show when={!props.hideExpand}>
 
+            <Tooltip value="Open in tab">
 
+              <IconButton
 
+                icon="expand"
 
+                variant="ghost"
 
+                onClick={() => {
 
+                  local.layout.review.tab()
 
+                  session.layout.setActiveTab("review")
 
+                }}
 
+              />
 
+            </Tooltip>
 
+          </Show>
 
+        </div>
 
+      </div>
 
+      <Accordion multiple value={store.open} onChange={handleChange}>
 
+        <For each={session.diffs()}>
 
+          {(diff) => (
 
+            <Accordion.Item value={diff.file}>
 
+              <StickyAccordionHeader class="top-11 data-expanded:before:-top-11">
 
+                <Accordion.Trigger class="bg-background-stronger">
 
+                  <div class="flex items-center justify-between w-full gap-5">
 
+                    <div class="grow flex items-center gap-5 min-w-0">
 
+                      <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
 
+                      <div class="flex grow min-w-0">
 
+                        <Show when={diff.file.includes("/")}>
 
+                          <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
 
+                        </Show>
 
+                        <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
 
+                      </div>
 
+                    </div>
 
+                    <div class="shrink-0 flex gap-4 items-center justify-end">
 
+                      <DiffChanges changes={diff} />
 
+                      <Icon name="chevron-grabber-vertical" size="small" />
 
+                    </div>
 
+                  </div>
 
+                </Accordion.Trigger>
 
+              </StickyAccordionHeader>
 
+              <Accordion.Content>
 
+                <Diff
 
+                  diffStyle={props.split ? "split" : "unified"}
 
+                  before={{
 
+                    name: diff.file!,
 
+                    contents: diff.before!,
 
+                  }}
 
+                  after={{
 
+                    name: diff.file!,
 
+                    contents: diff.after!,
 
+                  }}
 
+                />
 
+              </Accordion.Content>
 
+            </Accordion.Item>
 
+          )}
 
+        </For>
 
+      </Accordion>
 
+    </div>
 
+  )
 
+}

+ 17 - 0
packages/desktop/src/components/sticky-accordion-header.tsx
View File 

@@ -0,0 +1,17 @@
 
+import { Accordion } from "@opencode-ai/ui"
 
+import { ParentProps } from "solid-js"
 
+
 
+export function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
 
+  return (
 
+    <Accordion.Header
 
+      classList={{
 
+        "sticky top-0 data-expanded:z-10": true,
 
+        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
 
+        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
 
+        [props.class ?? ""]: !!props.class,
 
+      }}
 
+    >
 
+      {props.children}
 
+    </Accordion.Header>
 
+  )
 
+}

+ 4 - 7
packages/desktop/src/context/local.tsx
View File 

@@ -465,11 +465,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
 
             width: 240,
 
           },
 
           review: {
 
-            state: "closed" as "open" | "closed" | "tab",
 
+            state: "pane" as "pane" | "tab",
 
           },
 
         }),
 
         {
 
-          name: "default-layout",
 
+          name: "_default-layout",
 
         },
 
       )
 
 
@@ -492,11 +492,8 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
 
         },
 
         review: {
 
           state: createMemo(() => store.review?.state ?? "closed"),
 
-          open() {
 
-            setStore("review", "state", "open")
 
-          },
 
-          close() {
 
-            setStore("review", "state", "closed")
 
+          pane() {
 
+            setStore("review", "state", "pane")
 
           },
 
           tab() {
 
             setStore("review", "state", "tab")

+ 68 - 184
packages/desktop/src/pages/session.tsx
View File 

@@ -44,12 +44,14 @@ import {
 
   useDragDropContext,
 
 } from "@thisbeyond/solid-dnd"
 
 import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
 
-import type { JSX, ParentProps } from "solid-js"
 
+import type { JSX } from "solid-js"
 
 import { useSync } from "@/context/sync"
 
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
 
 import { Markdown } from "@opencode-ai/ui"
 
 import { Spinner } from "@/components/spinner"
 
 import { useSession } from "@/context/session"
 
+import { StickyAccordionHeader } from "@/components/sticky-accordion-header"
 
+import { SessionReview } from "@/components/session-review"
 
 
 export default function Page() {
 
   const local = useLocal()
 
@@ -83,6 +85,15 @@ export default function Page() {
 
       setStore("fileSelectOpen", true)
 
       return
 
     }
 
+    if (event.ctrlKey && event.key.toLowerCase() === "t") {
 
+      event.preventDefault()
 
+      const currentTheme = localStorage.getItem("theme") ?? "oc-1"
 
+      const themes = ["oc-1", "oc-2-paper"]
 
+      const nextTheme = themes[(themes.indexOf(currentTheme) + 1) % themes.length]
 
+      localStorage.setItem("theme", nextTheme)
 
+      document.documentElement.setAttribute("data-theme", nextTheme)
 
+      return
 
+    }
 
 
     const focused = document.activeElement === inputRef
 
     if (focused) {
 
@@ -216,18 +227,15 @@ export default function Page() {
 
       // @ts-ignore
 
       <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
 
         <div class="relative h-full">
 
-          <Tabs.Trigger value={props.tab} class="group/tab pl-3 pr-1" onClick={() => props.onTabClick(props.tab)}>
 
+          <Tabs.Trigger
 
+            value={props.tab}
 
+            closeButton={<IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} />}
 
+            hideCloseButton
 
+            onClick={() => props.onTabClick(props.tab)}
 
+          >
 
             <Switch>
 
               <Match when={file()}>{(f) => <FileVisual file={f()} />}</Match>
 
             </Switch>
 
-            <IconButton
 
-              icon="close"
 
-              class="mt-0.5 opacity-0 group-data-[selected]/tab:opacity-100
 
-                     hover:bg-transparent
 
-                     hover:opacity-100 group-hover/tab:opacity-100"
 
-              variant="ghost"
 
-              onClick={() => props.onTabClose(props.tab)}
 
-            />
 
           </Tabs.Trigger>
 
         </div>
 
       </div>
 
@@ -277,38 +285,40 @@ export default function Page() {
 
         <Tabs value={session.layout.tabs.active ?? "chat"} onChange={session.layout.openTab}>
 
           <div class="sticky top-0 shrink-0 flex">
 
             <Tabs.List>
 
-              <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
 
-                <div>Chat</div>
 
-                <Tooltip
 
-                  value={`${new Intl.NumberFormat("en-US", {
 
-                    notation: "compact",
 
-                    compactDisplay: "short",
 
-                  }).format(session.usage.tokens() ?? 0)} Tokens`}
 
-                  class="flex items-center gap-1.5"
 
-                >
 
-                  <ProgressCircle percentage={session.usage.context() ?? 0} />
 
-                  <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
 
-                </Tooltip>
 
+              <Tabs.Trigger value="chat">
 
+                <div class="flex gap-x-[17px] items-center">
 
+                  <div>Chat</div>
 
+                  <Tooltip
 
+                    value={`${new Intl.NumberFormat("en-US", {
 
+                      notation: "compact",
 
+                      compactDisplay: "short",
 
+                    }).format(session.usage.tokens() ?? 0)} Tokens`}
 
+                    class="flex items-center gap-1.5"
 
+                  >
 
+                    <ProgressCircle percentage={session.usage.context() ?? 0} />
 
+                    <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
 
+                  </Tooltip>
 
+                </div>
 
               </Tabs.Trigger>
 
               <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
 
-                <Tabs.Trigger value="review" class="flex gap-3 items-center group/tab pr-1">
 
-                  <Show when={session.diffs()}>
 
-                    <DiffChanges changes={session.diffs()} variant="bars" />
 
-                  </Show>
 
-                  <div class="flex items-center gap-1.5">
 
-                    <div>Review</div>
 
-                    <Show when={session.info()?.summary?.files}>
 
-                      <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
 
-                        {session.info()?.summary?.files ?? 0}
 
-                      </div>
 
+                <Tabs.Trigger
 
+                  value="review"
 
+                  closeButton={
 
+                    <IconButton icon="collapse" size="normal" variant="ghost" onClick={local.layout.review.pane} />
 
+                  }
 
+                >
 
+                  <div class="flex items-center gap-3">
 
+                    <Show when={session.diffs()}>
 
+                      <DiffChanges changes={session.diffs()} variant="bars" />
 
                     </Show>
 
-                    <IconButton
 
-                      icon="close"
 
-                      class="mt-0.5 -ml-1 opacity-0 group-data-[selected]/tab:opacity-100
 
-                             hover:bg-transparent hover:opacity-100 group-hover/tab:opacity-100"
 
-                      variant="ghost"
 
-                      onClick={local.layout.review.close}
 
-                    />
 
+                    <div class="flex items-center gap-1.5">
 
+                      <div>Review</div>
 
+                      <Show when={session.info()?.summary?.files}>
 
+                        <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
 
+                          {session.info()?.summary?.files ?? 0}
 
+                        </div>
 
+                      </Show>
 
+                    </div>
 
                   </div>
 
                 </Tabs.Trigger>
 
               </Show>
 
@@ -333,24 +343,17 @@ export default function Page() {
 
             <div
 
               classList={{
 
                 "w-full flex-1 min-h-0": true,
 
-                grid: local.layout.review.state() !== "open",
 
-                flex: local.layout.review.state() === "open",
 
+                grid: local.layout.review.state() === "tab",
 
+                flex: local.layout.review.state() === "pane",
 
               }}
 
             >
 
-              <div class="relative shrink-0 px-6 py-2 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
 
+              <div class="relative shrink-0 px-6 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
 
                 <Switch>
 
                   <Match when={session.id}>
 
-                    <div class="h-8 flex shrink-0 self-stretch items-center justify-end">
 
-                      <Show when={local.layout.review.state() === "closed" && session.diffs().length}>
 
-                        <Button icon="layout-right" onClick={local.layout.review.open}>
 
-                          Review
 
-                        </Button>
 
-                      </Show>
 
-                    </div>
 
                     <div
 
                       classList={{
 
                         "flex-1 min-h-0 pb-20": true,
 
-                        "flex items-start justify-start": local.layout.review.state() === "open",
 
+                        "flex items-start justify-start": local.layout.review.state() === "pane",
 
                       }}
 
                     >
 
                       <Show when={session.messages.user().length > 1}>
 
@@ -358,8 +361,8 @@ export default function Page() {
 
                           role="list"
 
                           classList={{
 
                             "mr-8 shrink-0 flex flex-col items-start": true,
 
-                            "absolute right-full w-60 @7xl:gap-2": local.layout.review.state() !== "open",
 
-                            "mt-1": local.layout.review.state() === "open",
 
+                            "absolute right-full w-60 mt-3 @7xl:gap-2 @7xl:mt-1": local.layout.review.state() === "tab",
 
+                            "mt-3": local.layout.review.state() === "pane",
 
                           }}
 
                         >
 
                           <For each={session.messages.user()}>
 
@@ -379,7 +382,7 @@ export default function Page() {
 
                                 <li
 
                                   classList={{
 
                                     "group/li flex items-center self-stretch justify-end": true,
 
-                                    "@7xl:justify-start": local.layout.review.state() !== "open",
 
+                                    "@7xl:justify-start": local.layout.review.state() === "tab",
 
                                   }}
 
                                 >
 
                                   <Tooltip
 
@@ -398,7 +401,7 @@ export default function Page() {
 
                                       classList={{
 
                                         "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
 
                                         "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
 
-                                        "@7xl:hidden": local.layout.review.state() !== "open",
 
+                                        "@7xl:hidden": local.layout.review.state() === "tab",
 
                                       }}
 
                                     >
 
                                       <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
 
@@ -407,7 +410,7 @@ export default function Page() {
 
                                   <button
 
                                     classList={{
 
                                       "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
 
-                                      "@7xl:flex": local.layout.review.state() !== "open",
 
+                                      "@7xl:flex": local.layout.review.state() === "tab",
 
                                     }}
 
                                     onClick={handleClick}
 
                                   >
 
@@ -477,7 +480,7 @@ export default function Page() {
 
                                   class="flex flex-col items-start self-stretch gap-8 pb-20"
 
                                 >
 
                                   {/* Title */}
 
-                                  <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-20 pb-1">
 
+                                  <div class="flex items-center gap-2 self-stretch sticky top-0 bg-background-stronger z-20 h-8">
 
                                     <div class="w-full text-14-medium text-text-strong">
 
                                       <Show
 
                                         when={titled()}
 
@@ -495,9 +498,7 @@ export default function Page() {
 
                                       </Show>
 
                                     </div>
 
                                   </div>
 
-                                  <div class="-mt-9">
 
-                                    <Message message={message} parts={parts()} />
 
-                                  </div>
 
+                                  <Message message={message} parts={parts()} />
 
                                   {/* Summary */}
 
                                   <Show when={completed()}>
 
                                     <div class="w-full flex flex-col gap-6 items-start self-stretch">
 
@@ -524,7 +525,7 @@ export default function Page() {
 
                                         <For each={message.summary?.diffs ?? []}>
 
                                           {(diff) => (
 
                                             <Accordion.Item value={diff.file}>
 
-                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10 ">
 
+                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10">
 
                                                 <Accordion.Trigger>
 
                                                   <div class="flex items-center justify-between w-full gap-5">
 
                                                     <div class="grow flex items-center gap-5 min-w-0">
 
@@ -653,127 +654,25 @@ export default function Page() {
 
                   />
 
                 </div>
 
               </div>
 
-              <Show when={local.layout.review.state() === "open"}>
 
+              <Show when={local.layout.review.state() === "pane" && session.diffs().length}>
 
                 <div
 
                   classList={{
 
-                    "relative grow px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 border-l border-border-weak-base": true,
 
+                    "relative grow px-6 py-3 flex-1 min-h-0 border-l border-border-weak-base": true,
 
                   }}
 
                 >
 
-                  <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
 
-                    <div class="flex items-center gap-x-3">
 
-                      <Tooltip value="Close">
 
-                        <IconButton icon="align-right" variant="ghost" onClick={local.layout.review.close} />
 
-                      </Tooltip>
 
-                      <Tooltip value="Open in tab">
 
-                        <IconButton
 
-                          icon="expand"
 
-                          variant="ghost"
 
-                          onClick={() => {
 
-                            local.layout.review.tab()
 
-                            session.layout.setActiveTab("review")
 
-                          }}
 
-                        />
 
-                      </Tooltip>
 
-                    </div>
 
-                  </div>
 
-                  <div class="text-14-medium text-text-strong">All changes</div>
 
-                  <div class="h-full pb-40 overflow-y-auto no-scrollbar">
 
-                    <Accordion class="w-full" multiple>
 
-                      <For each={session.diffs()}>
 
-                        {(diff) => (
 
-                          <Accordion.Item value={diff.file} defaultOpen>
 
-                            <StickyAccordionHeader>
 
-                              <Accordion.Trigger>
 
-                                <div class="flex items-center justify-between w-full gap-5">
 
-                                  <div class="grow flex items-center gap-5 min-w-0">
 
-                                    <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
 
-                                    <div class="flex grow min-w-0">
 
-                                      <Show when={diff.file.includes("/")}>
 
-                                        <span class="text-text-base truncate-start">
 
-                                          {getDirectory(diff.file)}&lrm;
 
-                                        </span>
 
-                                      </Show>
 
-                                      <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
 
-                                    </div>
 
-                                  </div>
 
-                                  <div class="shrink-0 flex gap-4 items-center justify-end">
 
-                                    <DiffChanges changes={diff} />
 
-                                    <Icon name="chevron-grabber-vertical" size="small" />
 
-                                  </div>
 
-                                </div>
 
-                              </Accordion.Trigger>
 
-                            </StickyAccordionHeader>
 
-                            <Accordion.Content>
 
-                              <Diff
 
-                                before={{
 
-                                  name: diff.file!,
 
-                                  contents: diff.before!,
 
-                                }}
 
-                                after={{
 
-                                  name: diff.file!,
 
-                                  contents: diff.after!,
 
-                                }}
 
-                              />
 
-                            </Accordion.Content>
 
-                          </Accordion.Item>
 
-                        )}
 
-                      </For>
 
-                    </Accordion>
 
-                  </div>
 
+                  <SessionReview />
 
                 </div>
 
               </Show>
 
             </div>
 
           </Tabs.Content>
 
           <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
 
-            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden mt-8">
 
+            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden">
 
               <div
 
                 classList={{
 
-                  "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 overflow-hidden": true,
 
+                  "relative px-6 py-3 flex-1 min-h-0 overflow-hidden": true,
 
                 }}
 
               >
 
-                <div class="text-14-medium text-text-strong shrink-0">All changes</div>
 
-                <div class="flex-1 min-h-0 pb-40 overflow-y-auto no-scrollbar">
 
-                  <Accordion class="w-full" multiple>
 
-                    <For each={session.diffs()}>
 
-                      {(diff) => (
 
-                        <Accordion.Item value={diff.file} defaultOpen>
 
-                          <StickyAccordionHeader>
 
-                            <Accordion.Trigger>
 
-                              <div class="flex items-center justify-between w-full gap-5">
 
-                                <div class="grow flex items-center gap-5 min-w-0">
 
-                                  <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
 
-                                  <div class="flex grow min-w-0">
 
-                                    <Show when={diff.file.includes("/")}>
 
-                                      <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
 
-                                    </Show>
 
-                                    <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
 
-                                  </div>
 
-                                </div>
 
-                                <div class="shrink-0 flex gap-4 items-center justify-end">
 
-                                  <DiffChanges changes={diff} />
 
-                                  <Icon name="chevron-grabber-vertical" size="small" />
 
-                                </div>
 
-                              </div>
 
-                            </Accordion.Trigger>
 
-                          </StickyAccordionHeader>
 
-                          <Accordion.Content>
 
-                            <Diff
 
-                              diffStyle="split"
 
-                              before={{
 
-                                name: diff.file!,
 
-                                contents: diff.before!,
 
-                              }}
 
-                              after={{
 
-                                name: diff.file!,
 
-                                contents: diff.after!,
 
-                              }}
 
-                            />
 
-                          </Accordion.Content>
 
-                        </Accordion.Item>
 
-                      )}
 
-                    </For>
 
-                  </Accordion>
 
-                </div>
 
+                <SessionReview split hideExpand class="pb-40" />
 
               </div>
 
             </Tabs.Content>
 
           </Show>
 
@@ -828,7 +727,7 @@ export default function Page() {
 
         </DragOverlay>
 
       </DragDropProvider>
 
       <Show when={session.layout.tabs.active}>
 
-        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
 
+        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-6">
 
           <PromptInput
 
             ref={(el) => {
 
               inputRef = el
 
@@ -895,18 +794,3 @@ export default function Page() {
 
     </div>
 
   )
 
 }
 
-
 
-function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
 
-  return (
 
-    <Accordion.Header
 
-      classList={{
 
-        "sticky top-0 data-expanded:z-10": true,
 
-        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
 
-        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
 
-        [props.class ?? ""]: !!props.class,
 
-      }}
 
-    >
 
-      {props.children}
 
-    </Accordion.Header>
 
-  )
 
-}

+ 20 - 15
packages/ui/script/colors.txt
View File 

@@ -44,9 +44,9 @@
 
 --surface-info-base: var(--lilac-light-3);
 
 --surface-info-weak: var(--lilac-light-2);
 
 --surface-info-strong: var(--lilac-light-9);
 
+--surface-diff-unchanged-base: #FFFFFF00;
 
 --surface-diff-skip-base: var(--smoke-light-2);
 
 --surface-diff-hidden-base: var(--blue-light-3);
 
---surface-diff-unchanged-base: #FFFFFF00;
 
 --surface-diff-hidden-weak: var(--blue-light-2);
 
 --surface-diff-hidden-weaker: var(--blue-light-1);
 
 --surface-diff-hidden-strong: var(--blue-light-5);
 
@@ -95,7 +95,7 @@
 
 --text-on-brand-weaker: var(--smoke-light-alpha-8);
 
 --text-on-brand-strong: var(--smoke-light-alpha-12);
 
 --button-secondary-base: #FDFCFC;
 
---button-secondary-base-hover: #FAF9F9;
 
+--button-secondary-hover: #FAF9F9;
 
 --border-base: var(--smoke-light-alpha-7);
 
 --border-hover: var(--smoke-light-alpha-8);
 
 --border-active: var(--smoke-light-alpha-9);
 
@@ -190,20 +190,25 @@
 
 --icon-diff-add-active: var(--mint-light-12);
 
 --icon-diff-delete-base: var(--ember-light-10);
 
 --icon-diff-delete-hover: var(--ember-light-11);
 
---syntax-comment: #8A8A8A;
 
---syntax-string: #D68C27;
 
---syntax-keyword: #3B7DD8;
 
---syntax-function: #D1383D;
 
---syntax-number: #3D9A57;
 
---syntax-operator: #D68C27;
 
---syntax-variable: #B0851F;
 
---syntax-type: #318795;
 
---syntax-constant: #953170;
 
---syntax-punctuation: #1A1A1A;
 
---syntax-success: var(--apple-dark-10);
 
+--syntax-comment: var(--text-weaker);
 
+--syntax-regexp: var(--text-base);
 
+--syntax-string: #007663;
 
+--syntax-keyword: var(--text-weak);
 
+--syntax-primitive: #FB7F51;
 
+--syntax-operator: var(--text-weak);
 
+--syntax-variable: var(--text-strong);
 
+--syntax-property: #EC6CC8;
 
+--syntax-type: #738400;
 
+--syntax-constant: #00B2B9;
 
+--syntax-punctuation: var(--text-weaker);
 
+--syntax-object: var(--text-strong);
 
+--syntax-success: var(--apple-light-10);
 
 --syntax-warning: var(--amber-light-10);
 
---syntax-critical: var(--ember-dark-9);
 
---syntax-info: var(--lilac-dark-11);
 
+--syntax-critical: var(--ember-light-9);
 
+--syntax-info: #0091A7;
 
+--syntax-diff-add: var(--mint-light-11);
 
+--syntax-diff-delete: var(--ember-light-11);
 
+--syntax-diff-unknown: #FF0000;
 
 --markdown-heading: #D68C27;
 
 --markdown-text: #1A1A1A;
 
 --markdown-link: #3B7DD8;

+ 1 - 1
packages/ui/script/tailwind.ts
View File 

@@ -11,7 +11,7 @@ for (const line of colors.split("\n")) {
 
 }
 
 
 const output = `
 
-/* Generated by script/colors.ts */
 
+/* Generated by script/tailwind.ts */
 
 /* Do not edit this file manually */
 
 
 @theme {

+ 15 - 14
packages/ui/src/components/accordion.css
View File 

@@ -24,7 +24,7 @@
 
       [data-slot="accordion-trigger"] {
 
         width: 100%;
 
         display: flex;
 
-        height: 40px;
 
+        height: 32px;
 
         padding: 8px 12px;
 
         justify-content: space-between;
 
         align-items: center;
 
@@ -63,23 +63,24 @@
 
       margin-bottom: 8px;
 
 
       [data-slot="accordion-trigger"] {
 
-        border-radius: 8px 8px 0 0;
 
+        border-top-left-radius: var(--radius-md);
 
+        border-top-right-radius: var(--radius-md);
 
       }
 
 
       [data-slot="accordion-content"] {
 
         border: 1px solid var(--border-weak-base);
 
         border-top: none;
 
-        border-bottom-left-radius: 8px;
 
-        border-bottom-right-radius: 8px;
 
+        border-bottom-left-radius: var(--radius-md);
 
+        border-bottom-right-radius: var(--radius-md);
 
       }
 
 
       [data-slot="accordion-item"]:has(+ &) {
 
         &[data-closed] {
 
-          border-bottom-left-radius: 8px;
 
-          border-bottom-right-radius: 8px;
 
+          border-bottom-left-radius: var(--radius-md);
 
+          border-bottom-right-radius: var(--radius-md);
 
           [data-slot="accordion-trigger"] {
 
-            border-bottom-left-radius: 8px;
 
-            border-bottom-right-radius: 8px;
 
+            border-bottom-left-radius: var(--radius-md);
 
+            border-bottom-right-radius: var(--radius-md);
 
           }
 
         }
 
         margin-bottom: 8px;
 
@@ -89,8 +90,8 @@
 
         margin-top: 8px;
 
 
         [data-slot="accordion-trigger"] {
 
-          border-top-left-radius: 8px;
 
-          border-top-right-radius: 8px;
 
+          border-top-left-radius: var(--radius-md);
 
+          border-top-right-radius: var(--radius-md);
 
         }
 
       }
 
     }
 
@@ -106,8 +107,8 @@
 
 
       &[data-closed] {
 
         [data-slot="accordion-trigger"] {
 
-          border-top-left-radius: 8px;
 
-          border-top-right-radius: 8px;
 
+          border-top-left-radius: var(--radius-md);
 
+          border-top-right-radius: var(--radius-md);
 
         }
 
       }
 
     }
 
@@ -117,8 +118,8 @@
 
 
       &[data-closed] {
 
         [data-slot="accordion-trigger"] {
 
-          border-bottom-left-radius: 8px;
 
-          border-bottom-right-radius: 8px;
 
+          border-bottom-left-radius: var(--radius-md);
 
+          border-bottom-right-radius: var(--radius-md);
 
         }
 
       }
 
     }

+ 3 - 8
packages/ui/src/components/accordion.tsx
View File 

@@ -1,11 +1,9 @@
 
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
 
-import { createSignal, splitProps } from "solid-js"
 
+import { splitProps } from "solid-js"
 
 import type { ComponentProps, ParentProps } from "solid-js"
 
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
 
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {
 
-  defaultOpen?: boolean
 
-}
 
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
 
 export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
 
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
@@ -25,14 +23,11 @@ function AccordionRoot(props: AccordionProps) {
 
 }
 
 
 function AccordionItem(props: AccordionItemProps) {
 
-  const [split, rest] = splitProps(props, ["class", "classList", "defaultOpen"])
 
-  const [open, setOpen] = createSignal(split.defaultOpen ?? false)
 
+  const [split, rest] = splitProps(props, ["class", "classList"])
 
   return (
 
     <Kobalte.Item
 
       {...rest}
 
       data-slot="accordion-item"
 
-      onOpenChange={setOpen}
 
-      open={open()}
 
       classList={{
 
         ...(split.classList ?? {}),
 
         [split.class ?? ""]: !!split.class,

+ 1 - 1
packages/ui/src/components/button.css
View File 

@@ -4,7 +4,7 @@
 
   justify-content: center;
 
   border-style: solid;
 
   border-width: 1px;
 
-  border-radius: 6px;
 
+  border-radius: var(--radius-sm);
 
   text-decoration: none;
 
   user-select: none;
 
   cursor: default;

+ 1 - 1
packages/ui/src/components/card.css
View File 

@@ -5,7 +5,7 @@
 
   background-color: var(--surface-inset-base);
 
   border: 1px solid var(--border-weaker-base);
 
   transition: background-color 0.15s ease;
 
-  border-radius: 8px;
 
+  border-radius: var(--radius-md);
 
   padding: 6px 12px;
 
   overflow: clip;

+ 1 - 1
packages/ui/src/components/checkbox.css
View File 

@@ -25,7 +25,7 @@
 
     padding: 2px;
 
     aspect-ratio: 1;
 
     flex-shrink: 0;
 
-    border-radius: 4px;
 
+    border-radius: var(--radius-sm);
 
     border: 1px solid var(--border-weak-base);
 
     /* background-color: var(--surface-weak); */
 
   }

+ 1 - 1
packages/ui/src/components/collapsible.css
View File 

@@ -5,7 +5,7 @@
 
   background-color: var(--surface-inset-base);
 
   border: 1px solid var(--border-weaker-base);
 
   transition: background-color 0.15s ease;
 
-  border-radius: 8px;
 
+  border-radius: var(--radius-md);
 
   overflow: clip;
 
 
   [data-slot="collapsible-trigger"] {

+ 1 - 1
packages/ui/src/components/dialog.css
View File 

@@ -43,7 +43,7 @@
 
       /* padding: 8px; */
 
       padding: 8px 8px 0 8px;
 
       border: 1px solid var(--border-base);
 
-      border-radius: 16px;
 
+      border-radius: var(--radius-md);
 
       background: var(--surface-raised-stronger-non-alpha);
 
       box-shadow:
 
         0 15px 45px 0 rgba(19, 16, 16, 0.22),

+ 1 - 1
packages/ui/src/components/icon-button.css
View File 

@@ -2,7 +2,7 @@
 
   display: inline-flex;
 
   align-items: center;
 
   justify-content: center;
 
-  border-radius: 6px;
 
+  border-radius: var(--radius-sm);
 
   text-decoration: none;
 
   user-select: none;
 
   aspect-ratio: 1;

+ 1 - 0
packages/ui/src/components/icon.tsx
View File 

@@ -157,6 +157,7 @@ const newIcons = {
 
   "speech-bubble": `<path d="M18.3334 10.0003C18.3334 5.57324 15.0927 2.91699 10.0001 2.91699C4.90749 2.91699 1.66675 5.57324 1.66675 10.0003C1.66675 11.1497 2.45578 13.1016 2.5771 13.3949C2.5878 13.4207 2.59839 13.4444 2.60802 13.4706C2.69194 13.6996 3.04282 14.9364 1.66675 16.7684C3.5186 17.6538 5.48526 16.1982 5.48526 16.1982C6.84592 16.9202 8.46491 17.0837 10.0001 17.0837C15.0927 17.0837 18.3334 14.4274 18.3334 10.0003Z" stroke="currentColor" stroke-linecap="square"/>`,
 
   "align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
 
   expand: `<path d="M4.58301 10.4163V15.4163H9.58301M10.4163 4.58301H15.4163V9.58301" stroke="currentColor" stroke-linecap="square"/>`,
 
+  collapse: `<path d="M16.666 8.33398H11.666V3.33398" stroke="currentColor" stroke-linecap="square"/><path d="M8.33398 16.666V11.666H3.33398" stroke="currentColor" stroke-linecap="square"/>`,
 
 }
 
 
 export interface IconProps extends ComponentProps<"svg"> {

+ 1 - 1
packages/ui/src/components/list.css
View File 

@@ -14,7 +14,7 @@
 
     padding: 4px 12px;
 
     text-align: left;
 
 
-    border-radius: 6px;
 
+    border-radius: var(--radius-md);
 
     transition: background-color 0.2s ease-in-out;
 
 
     &[data-active="true"] {

+ 2 - 2
packages/ui/src/components/select-dialog.css
View File 

@@ -7,7 +7,7 @@
 
   gap: 12px;
 
   align-self: stretch;
 
 
-  border-radius: 8px;
 
+  border-radius: var(--radius-md);
 
   background: var(--surface-base);
 
 
   [data-slot="input-container"] {
 
@@ -100,7 +100,7 @@
 
         align-items: center;
 
 
         &[data-active="true"] {
 
-          border-radius: 8px;
 
+          border-radius: var(--radius-md);
 
           background: var(--surface-raised-base-hover);
 
         }
 
       }

+ 2 - 2
packages/ui/src/components/select.css
View File 

@@ -21,7 +21,7 @@
 
 [data-component="select-content"] {
 
   min-width: 4rem;
 
   overflow: hidden;
 
-  border-radius: 8px;
 
+  border-radius: var(--radius-md);
 
   border-width: 1px;
 
   border-style: solid;
 
   border-color: var(--border-weak-base);
 
@@ -60,7 +60,7 @@
 
     display: flex;
 
     align-items: center;
 
     padding: 0 6px 0 6px;
 
-    border-radius: 6px;
 
+    border-radius: var(--radius-sm);
 
 
     /* text-12-medium */
 
     font-family: var(--font-family-sans);

+ 43 - 5
packages/ui/src/components/tabs.css
View File 

@@ -6,7 +6,7 @@
 
   background-color: var(--background-stronger);
 
   overflow: clip;
 
 
-  [data-slot="list"] {
 
+  [data-slot="tabs-list"] {
 
     height: 48px;
 
     width: 100%;
 
     position: relative;
 
@@ -36,12 +36,12 @@
 
     }
 
   }
 
 
-  [data-slot="trigger"] {
 
+  [data-slot="tabs-trigger-wrapper"] {
 
     position: relative;
 
     height: 100%;
 
-    padding: 14px 24px;
 
     display: flex;
 
     align-items: center;
 
+    gap: 12px;
 
     color: var(--text-base);
 
 
     /* text-14-medium */
 
@@ -58,6 +58,23 @@
 
     border-right: 1px solid var(--border-weak-base);
 
     background-color: var(--background-base);
 
 
+    [data-slot="tabs-trigger"] {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+      padding: 14px 24px;
 
+    }
 
+
 
+    [data-slot="tabs-trigger-close-button"] {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+    }
 
+
 
+    [data-component="icon-button"] {
 
+      margin: -0.25rem;
 
+    }
 
+
 
     &:disabled {
 
       pointer-events: none;
 
       color: var(--text-weaker);
 
@@ -66,17 +83,38 @@
 
       outline: none;
 
       box-shadow: 0 0 0 2px var(--border-focus);
 
     }
 
-    &[data-selected] {
 
+    &:has([data-hidden]) {
 
+      [data-slot="tabs-trigger-close-button"] {
 
+        opacity: 0;
 
+      }
 
+
 
+      &:hover {
 
+        [data-slot="tabs-trigger-close-button"] {
 
+          opacity: 1;
 
+        }
 
+      }
 
+    }
 
+    &:has([data-selected]) {
 
       color: var(--text-strong);
 
       background-color: transparent;
 
       border-bottom-color: transparent;
 
+      [data-slot="tabs-trigger-close-button"] {
 
+        opacity: 1;
 
+      }
 
     }
 
     &:hover:not(:disabled):not([data-selected]) {
 
       color: var(--text-strong);
 
     }
 
+    &:has([data-slot="tabs-trigger-close-button"]) {
 
+      padding-right: 12px;
 
+
 
+      [data-slot="tabs-trigger"] {
 
+        padding-right: 0;
 
+      }
 
+    }
 
   }
 
 
-  [data-slot="content"] {
 
+  [data-slot="tabs-content"] {
 
     overflow-y: auto;
 
     flex: 1;

+ 21 - 10
packages/ui/src/components/tabs.tsx
View File 

@@ -1,10 +1,13 @@
 
 import { Tabs as Kobalte } from "@kobalte/core/tabs"
 
-import { splitProps } from "solid-js"
 
+import { Show, splitProps, type JSX } from "solid-js"
 
 import type { ComponentProps, ParentProps } from "solid-js"
 
 
 export interface TabsProps extends ComponentProps<typeof Kobalte> {}
 
 export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
 
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 
+export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
 
+  hideCloseButton?: boolean
 
+  closeButton?: JSX.Element
 
+}
 
 export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
 
 function TabsRoot(props: TabsProps) {
 
@@ -26,7 +29,7 @@ function TabsList(props: TabsListProps) {
 
   return (
 
     <Kobalte.List
 
       {...rest}
 
-      data-slot="list"
 
+      data-slot="tabs-list"
 
       classList={{
 
         ...(split.classList ?? {}),
 
         [split.class ?? ""]: !!split.class,
 
@@ -36,18 +39,26 @@ function TabsList(props: TabsListProps) {
 
 }
 
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
 
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
 
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "closeButton", "hideCloseButton"])
 
   return (
 
-    <Kobalte.Trigger
 
-      {...rest}
 
-      data-slot="trigger"
 
+    <div
 
+      data-slot="tabs-trigger-wrapper"
 
       classList={{
 
         ...(split.classList ?? {}),
 
         [split.class ?? ""]: !!split.class,
 
       }}
 
     >
 
-      {split.children}
 
-    </Kobalte.Trigger>
 
+      <Kobalte.Trigger {...rest} data-slot="tabs-trigger" class="group/tab">
 
+        {split.children}
 
+      </Kobalte.Trigger>
 
+      <Show when={split.closeButton}>
 
+        {(closeButton) => (
 
+          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
 
+            {closeButton()}
 
+          </div>
 
+        )}
 
+      </Show>
 
+    </div>
 
   )
 
 }
 
 
@@ -56,7 +67,7 @@ function TabsContent(props: ParentProps<TabsContentProps>) {
 
   return (
 
     <Kobalte.Content
 
       {...rest}
 
-      data-slot="content"
 
+      data-slot="tabs-content"
 
       classList={{
 
         ...(split.classList ?? {}),
 
         [split.class ?? ""]: !!split.class,

+ 1 - 1
packages/ui/src/components/tooltip.css
View File 

@@ -6,7 +6,7 @@
 
 [data-component="tooltip"] {
 
   z-index: 1000;
 
   max-width: 320px;
 
-  border-radius: 6px;
 
+  border-radius: var(--radius-md);
 
   background-color: var(--surface-float-base);
 
   color: rgba(253, 252, 252, 0.94);
 
   padding: 2px 8px;

+ 48 - 0
packages/ui/src/styles/colors.css
View File 

@@ -493,4 +493,52 @@
 
   --blue-light-alpha-10: #007feff9;
 
   --blue-light-alpha-11: #0066dbf9;
 
   --blue-light-alpha-12: #002047f9;
 
+  --ink-dark-1: #101313;
 
+  --ink-dark-2: #181b1b;
 
+  --ink-dark-3: #212525;
 
+  --ink-dark-4: #282d2d;
 
+  --ink-dark-5: #303434;
 
+  --ink-dark-6: #393e3e;
 
+  --ink-dark-7: #464b4b;
 
+  --ink-dark-8: #5f6464;
 
+  --ink-dark-9: #6b7171;
 
+  --ink-dark-10: #797f7f;
 
+  --ink-dark-11: #b1b7b7;
 
+  --ink-dark-12: #ecf1f1;
 
+  --ink-light-1: #fcfdfd;
 
+  --ink-light-2: #f8f9f9;
 
+  --ink-light-3: #f0f1f1;
 
+  --ink-light-4: #e8e9e9;
 
+  --ink-light-5: #e0e2e2;
 
+  --ink-light-6: #d9dada;
 
+  --ink-light-7: #cdcfcf;
 
+  --ink-light-8: #bbbcbc;
 
+  --ink-light-9: #8b8e8e;
 
+  --ink-light-10: #818484;
 
+  --ink-light-11: #636565;
 
+  --ink-light-12: #1e2121;
 
+  --ink-dark-alpha-1: #38828203;
 
+  --ink-dark-alpha-2: #c6e6e60b;
 
+  --ink-dark-alpha-3: #d5eded16;
 
+  --ink-dark-alpha-4: #e1f2f21e;
 
+  --ink-dark-alpha-5: #e8f5f526;
 
+  --ink-dark-alpha-6: #e8f5f531;
 
+  --ink-dark-alpha-7: #ecf7f73f;
 
+  --ink-dark-alpha-8: #f5fafa59;
 
+  --ink-dark-alpha-9: #f4fafa67;
 
+  --ink-dark-alpha-10: #f5fbfb76;
 
+  --ink-dark-alpha-11: #f9fcfcb2;
 
+  --ink-dark-alpha-12: #fbfdfdf0;
 
+  --ink-light-alpha-1: #00555503;
 
+  --ink-light-alpha-2: #00252507;
 
+  --ink-light-alpha-3: #0011110f;
 
+  --ink-light-alpha-4: #000c0c17;
 
+  --ink-light-alpha-5: #0011111f;
 
+  --ink-light-alpha-6: #00070726;
 
+  --ink-light-alpha-7: #000b0b32;
 
+  --ink-light-alpha-8: #00040444;
 
+  --ink-light-alpha-9: #00070774;
 
+  --ink-light-alpha-10: #0004049c;
 
+  --ink-light-alpha-11: #0007077e;
 
+  --ink-light-alpha-12: #000202df;
 
 }

+ 8 - 8
packages/ui/src/styles/tailwind/colors.css
View File 

@@ -49,9 +49,9 @@
 
   --color-surface-info-base: var(--surface-info-base);
 
   --color-surface-info-weak: var(--surface-info-weak);
 
   --color-surface-info-strong: var(--surface-info-strong);
 
+  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
 
   --color-surface-diff-skip-base: var(--surface-diff-skip-base);
 
   --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
 
-  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
 
   --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
 
   --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
 
   --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
 
@@ -100,7 +100,7 @@
 
   --color-text-on-brand-weaker: var(--text-on-brand-weaker);
 
   --color-text-on-brand-strong: var(--text-on-brand-strong);
 
   --color-button-secondary-base: var(--button-secondary-base);
 
-  --color-button-secondary-base-hover: var(--button-secondary-base-hover);
 
+  --color-button-secondary-hover: var(--button-secondary-hover);
 
   --color-border-base: var(--border-base);
 
   --color-border-hover: var(--border-hover);
 
   --color-border-active: var(--border-active);
 
@@ -199,21 +199,21 @@
 
   --color-syntax-regexp: var(--syntax-regexp);
 
   --color-syntax-string: var(--syntax-string);
 
   --color-syntax-keyword: var(--syntax-keyword);
 
-  --color-syntax-function: var(--syntax-function);
 
-  --color-syntax-number: var(--syntax-number);
 
+  --color-syntax-primitive: var(--syntax-primitive);
 
   --color-syntax-operator: var(--syntax-operator);
 
   --color-syntax-variable: var(--syntax-variable);
 
   --color-syntax-property: var(--syntax-property);
 
-  --color-syntax-parameter: var(--syntax-parameter);
 
   --color-syntax-type: var(--syntax-type);
 
   --color-syntax-constant: var(--syntax-constant);
 
   --color-syntax-punctuation: var(--syntax-punctuation);
 
-  --color-syntax-namespace: var(--syntax-namespace);
 
-  --color-syntax-enum: var(--syntax-enum);
 
+  --color-syntax-object: var(--syntax-object);
 
   --color-syntax-success: var(--syntax-success);
 
   --color-syntax-warning: var(--syntax-warning);
 
   --color-syntax-critical: var(--syntax-critical);
 
   --color-syntax-info: var(--syntax-info);
 
+  --color-syntax-diff-add: var(--syntax-diff-add);
 
+  --color-syntax-diff-delete: var(--syntax-diff-delete);
 
+  --color-syntax-diff-unknown: var(--syntax-diff-unknown);
 
   --color-markdown-heading: var(--markdown-heading);
 
   --color-markdown-text: var(--markdown-text);
 
   --color-markdown-link: var(--markdown-link);
 
@@ -237,4 +237,4 @@
 
   --color-border-weaker-focus: var(--border-weaker-focus);
 
   --color-button-ghost-hover: var(--button-ghost-hover);
 
   --color-button-ghost-hover2: var(--button-ghost-hover2);
 
-}
 
+}

+ 502 - 37
packages/ui/src/styles/theme.css
View File 

@@ -40,14 +40,8 @@
 
   --container-6xl: 72rem;
 
   --container-7xl: 80rem;
 
 
-  --radius-xs: 0.125rem;
 
   --radius-sm: 0.25rem;
 
   --radius-md: 0.375rem;
 
-  --radius-lg: 0.5rem;
 
-  --radius-xl: 0.75rem;
 
-  --radius-2xl: 1rem;
 
-  --radius-3xl: 1.5rem;
 
-  --radius-4xl: 2rem;
 
 
   --shadow-xs:
 
     0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
 
@@ -65,19 +59,15 @@
 
     0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
 
     0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
 
 
-  --text-mix-blend-mode: multiply;
 
-}
 
-
 
-:root {
 
-  /* OC-1-Light */
 
+  color-scheme: light;
 
   --text-mix-blend-mode: multiply;
 
 
-  color-scheme: light;
 
+  /* OC-1-light */
 
   --background-base: #f8f7f7;
 
   --background-weak: var(--smoke-light-3);
 
   --background-strong: var(--smoke-light-1);
 
   --background-stronger: #fcfcfc;
 
-  --surface-base: var(--smoke-light-3);
 
+  --surface-base: var(--smoke-light-alpha-2);
 
   --base: var(--smoke-light-alpha-2);
 
   --surface-base-hover: #0500000f;
 
   --surface-base-active: var(--smoke-light-alpha-3);
 
@@ -119,9 +109,9 @@
 
   --surface-info-base: var(--lilac-light-3);
 
   --surface-info-weak: var(--lilac-light-2);
 
   --surface-info-strong: var(--lilac-light-9);
 
+  --surface-diff-unchanged-base: #ffffff00;
 
   --surface-diff-skip-base: var(--smoke-light-2);
 
   --surface-diff-hidden-base: var(--blue-light-3);
 
-  --surface-diff-unchanged-base: #ffffff00;
 
   --surface-diff-hidden-weak: var(--blue-light-2);
 
   --surface-diff-hidden-weaker: var(--blue-light-1);
 
   --surface-diff-hidden-strong: var(--blue-light-5);
 
@@ -170,7 +160,7 @@
 
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
 
   --text-on-brand-strong: var(--smoke-light-alpha-12);
 
   --button-secondary-base: #fdfcfc;
 
-  --button-secondary-hover: #fafafa;
 
+  --button-secondary-hover: #faf9f9;
 
   --border-base: var(--smoke-light-alpha-7);
 
   --border-hover: var(--smoke-light-alpha-8);
 
   --border-active: var(--smoke-light-alpha-9);
 
@@ -269,21 +259,21 @@
 
   --syntax-regexp: var(--text-base);
 
   --syntax-string: #007663;
 
   --syntax-keyword: var(--text-weak);
 
-  --syntax-primitive: #f6916b;
 
+  --syntax-primitive: #fb7f51;
 
   --syntax-operator: var(--text-weak);
 
   --syntax-variable: var(--text-strong);
 
-  --syntax-property: #ed6dc8;
 
-  --syntax-type: #b2cc00;
 
-  --syntax-constant: #0092a8;
 
+  --syntax-property: #ec6cc8;
 
+  --syntax-type: #738400;
 
+  --syntax-constant: #00b2b9;
 
   --syntax-punctuation: var(--text-weaker);
 
   --syntax-object: var(--text-strong);
 
-  --syntax-success: var(--apple-dark-10);
 
-  --syntax-warning: var(--amber-dark-10);
 
-  --syntax-critical: var(--ember-dark-9);
 
-  --syntax-info: #0092a8;
 
-  --syntax-diff-add: var(--mint-light-alpha-8);
 
-  --syntax-diff-delete: var(--ember-light-alpha-8);
 
-  --syntax-unknown: var(--text-weak);
 
+  --syntax-success: var(--apple-light-10);
 
+  --syntax-warning: var(--amber-light-10);
 
+  --syntax-critical: var(--ember-light-9);
 
+  --syntax-info: #0091a7;
 
+  --syntax-diff-add: var(--mint-light-11);
 
+  --syntax-diff-delete: var(--ember-light-11);
 
+  --syntax-diff-unknown: #ff0000;
 
   --markdown-heading: #d68c27;
 
   --markdown-text: #1a1a1a;
 
   --markdown-link: #3b7dd8;
 
@@ -309,15 +299,15 @@
 
   --button-ghost-hover2: var(--smoke-light-alpha-3);
 
 
   @media (prefers-color-scheme: dark) {
 
+    color-scheme: dark;
 
     --text-mix-blend-mode: plus-lighter;
 
 
-    /* OC-1-Dark */
 
-    color-scheme: dark;
 
+    /* OC-1-dark */
 
     --background-base: var(--smoke-dark-1);
 
-    --background-weak: #1b1818;
 
+    --background-weak: #1c1717;
 
     --background-strong: #151313;
 
     --background-stronger: #191515;
 
-    --surface-base: var(--smoke-dark-3);
 
+    --surface-base: var(--smoke-dark-alpha-2);
 
     --base: var(--smoke-dark-alpha-2);
 
     --surface-base-hover: #e0b7b716;
 
     --surface-base-active: var(--smoke-dark-alpha-3);
 
@@ -359,9 +349,9 @@
 
     --surface-info-base: var(--lilac-light-3);
 
     --surface-info-weak: var(--lilac-light-2);
 
     --surface-info-strong: var(--lilac-light-9);
 
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
 
     --surface-diff-skip-base: var(--smoke-dark-alpha-1);
 
     --surface-diff-hidden-base: var(--blue-dark-2);
 
-    --surface-diff-unchanged-base: var(--smoke-dark-1);
 
     --surface-diff-hidden-weak: var(--blue-dark-1);
 
     --surface-diff-hidden-weaker: var(--blue-dark-3);
 
     --surface-diff-hidden-strong: var(--blue-dark-5);
 
@@ -417,7 +407,7 @@
 
     --border-selected: var(--cobalt-dark-alpha-11);
 
     --border-disabled: var(--smoke-dark-alpha-8);
 
     --border-focus: var(--smoke-dark-alpha-9);
 
-    --border-weak-base: var(--smoke-dark-alpha-4);
 
+    --border-weak-base: var(--smoke-dark-alpha-6);
 
     --border-strong-base: var(--smoke-dark-alpha-8);
 
     --border-strong-hover: var(--smoke-dark-alpha-7);
 
     --border-strong-active: var(--smoke-dark-alpha-8);
 
@@ -519,11 +509,11 @@
 
     --syntax-object: var(--text-strong);
 
     --syntax-success: var(--apple-dark-10);
 
     --syntax-warning: var(--amber-dark-10);
 
-    --syntax-critical: var(--ember-dark-9);
 
-    --syntax-info: #ff9ae2;
 
-    --syntax-diff-add: var(--mint-dark-alpha-6);
 
-    --syntax-diff-delete: var(--ember-dark-alpha-4);
 
-    --syntax-unknown: var(--text-weak);
 
+    --syntax-critical: var(--ember-dark-10);
 
+    --syntax-info: #93e9f6;
 
+    --syntax-diff-add: var(--mint-dark-11);
 
+    --syntax-diff-delete: var(--ember-dark-11);
 
+    --syntax-diff-unknown: #ff0000;
 
     --markdown-heading: #9d7cd8;
 
     --markdown-text: #eeeeee;
 
     --markdown-link: #fab283;
 
@@ -549,3 +539,478 @@
 
     --button-ghost-hover2: var(--smoke-dark-alpha-3);
 
   }
 
 }
 
+
 
+html[data-theme="oc-2-paper"] {
 
+  /* OC-2-paper */
 
+  --background-base: #f7f8f8;
 
+  --background-weak: var(--ink-light-3);
 
+  --background-strong: var(--ink-light-1);
 
+  --background-stronger: #fcfcfc;
 
+  --surface-base: var(--ink-light-alpha-2);
 
+  --base: var(--ink-light-alpha-2);
 
+  --surface-base-hover: #0005050f;
 
+  --surface-base-active: var(--ink-light-alpha-3);
 
+  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
 
+  --base2: var(--ink-light-alpha-2);
 
+  --base3: var(--ink-light-alpha-2);
 
+  --surface-inset-base: var(--ink-light-alpha-2);
 
+  --surface-inset-base-hover: var(--ink-light-alpha-3);
 
+  --surface-inset-strong: #001f1f17;
 
+  --surface-inset-strong-hover: #001f1f17;
 
+  --surface-raised-base: var(--ink-light-alpha-1);
 
+  --surface-float-base: var(--ink-dark-1);
 
+  --surface-float-base-hover: var(--ink-dark-2);
 
+  --surface-raised-base-hover: var(--ink-light-alpha-2);
 
+  --surface-raised-base-active: var(--ink-light-alpha-3);
 
+  --surface-raised-strong: var(--ink-light-1);
 
+  --surface-raised-strong-hover: var(--white);
 
+  --surface-raised-stronger: var(--white);
 
+  --surface-raised-stronger-hover: var(--white);
 
+  --surface-weak: var(--ink-light-alpha-3);
 
+  --surface-weaker: var(--ink-light-alpha-4);
 
+  --surface-strong: #ffffff;
 
+  --surface-raised-stronger-non-alpha: var(--white);
 
+  --surface-brand-base: var(--yuzu-light-9);
 
+  --surface-brand-hover: var(--yuzu-light-10);
 
+  --surface-interactive-base: var(--cobalt-light-3);
 
+  --surface-interactive-hover: var(--cobalt-light-4);
 
+  --surface-interactive-weak: var(--cobalt-light-2);
 
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
 
+  --surface-success-base: var(--apple-light-3);
 
+  --surface-success-weak: var(--apple-light-2);
 
+  --surface-success-strong: var(--apple-light-9);
 
+  --surface-warning-base: var(--solaris-light-3);
 
+  --surface-warning-weak: var(--solaris-light-2);
 
+  --surface-warning-strong: var(--solaris-light-9);
 
+  --surface-critical-base: var(--ember-light-3);
 
+  --surface-critical-weak: var(--ember-light-2);
 
+  --surface-critical-strong: var(--ember-light-9);
 
+  --surface-info-base: var(--lilac-light-3);
 
+  --surface-info-weak: var(--lilac-light-2);
 
+  --surface-info-strong: var(--lilac-light-9);
 
+  --surface-diff-unchanged-base: #ffffff00;
 
+  --surface-diff-skip-base: var(--ink-light-2);
 
+  --surface-diff-hidden-base: var(--blue-light-3);
 
+  --surface-diff-hidden-weak: var(--blue-light-2);
 
+  --surface-diff-hidden-weaker: var(--blue-light-1);
 
+  --surface-diff-hidden-strong: var(--blue-light-5);
 
+  --surface-diff-hidden-stronger: var(--blue-light-9);
 
+  --surface-diff-add-base: var(--mint-light-3);
 
+  --surface-diff-add-weak: var(--mint-light-2);
 
+  --surface-diff-add-weaker: var(--mint-light-1);
 
+  --surface-diff-add-strong: var(--mint-light-5);
 
+  --surface-diff-add-stronger: var(--mint-light-9);
 
+  --surface-diff-delete-base: var(--ember-light-3);
 
+  --surface-diff-delete-weak: var(--ember-light-2);
 
+  --surface-diff-delete-weaker: var(--ember-light-1);
 
+  --surface-diff-delete-strong: var(--ember-light-6);
 
+  --surface-diff-delete-stronger: var(--ember-light-9);
 
+  --text-base: var(--ink-light-11);
 
+  --input-base: var(--ink-light-1);
 
+  --input-hover: var(--ink-light-2);
 
+  --input-active: var(--cobalt-light-1);
 
+  --input-selected: var(--cobalt-light-4);
 
+  --input-focus: var(--cobalt-light-1);
 
+  --input-disabled: var(--ink-light-4);
 
+  --text-weak: var(--ink-light-9);
 
+  --text-weaker: var(--ink-light-8);
 
+  --text-strong: var(--ink-light-12);
 
+  --text-interactive-base: var(--cobalt-light-9);
 
+  --text-on-brand-base: var(--ink-light-alpha-11);
 
+  --text-on-interactive-base: var(--ink-light-1);
 
+  --text-on-interactive-weak: var(--ink-light-alpha-11);
 
+  --text-on-success-base: var(--apple-light-10);
 
+  --text-on-critical-base: var(--ember-light-10);
 
+  --text-on-critical-weak: var(--ember-light-8);
 
+  --text-on-critical-strong: var(--ember-light-12);
 
+  --text-on-warning-base: var(--ink-dark-alpha-11);
 
+  --text-on-info-base: var(--ink-dark-alpha-11);
 
+  --text-diff-add-base: var(--mint-light-11);
 
+  --text-diff-delete-base: var(--ember-light-10);
 
+  --text-diff-delete-strong: var(--ember-light-12);
 
+  --text-diff-add-strong: var(--mint-light-12);
 
+  --text-on-info-weak: var(--ink-dark-alpha-9);
 
+  --text-on-info-strong: var(--ink-dark-alpha-12);
 
+  --text-on-warning-weak: var(--ink-dark-alpha-9);
 
+  --text-on-warning-strong: var(--ink-dark-alpha-12);
 
+  --text-on-success-weak: var(--apple-light-6);
 
+  --text-on-success-strong: var(--apple-light-12);
 
+  --text-on-brand-weak: var(--ink-light-alpha-9);
 
+  --text-on-brand-weaker: var(--ink-light-alpha-8);
 
+  --text-on-brand-strong: var(--ink-light-alpha-12);
 
+  --button-secondary-base: #fcfdfd;
 
+  --button-secondary-hover: #f9fafa;
 
+  --border-base: var(--ink-light-alpha-7);
 
+  --border-hover: var(--ink-light-alpha-8);
 
+  --border-active: var(--ink-light-alpha-9);
 
+  --border-selected: var(--cobalt-light-alpha-9);
 
+  --border-disabled: var(--ink-light-alpha-8);
 
+  --border-focus: var(--ink-light-alpha-9);
 
+  --border-weak-base: var(--ink-light-alpha-5);
 
+  --border-strong-base: var(--ink-light-alpha-7);
 
+  --border-strong-hover: var(--ink-light-alpha-8);
 
+  --border-strong-active: var(--ink-light-alpha-7);
 
+  --border-strong-selected: var(--cobalt-light-alpha-6);
 
+  --border-strong-disabled: var(--ink-light-alpha-6);
 
+  --border-strong-focus: var(--ink-light-alpha-7);
 
+  --border-weak-hover: var(--ink-light-alpha-6);
 
+  --border-weak-active: var(--ink-light-alpha-7);
 
+  --border-weak-selected: var(--cobalt-light-alpha-5);
 
+  --border-weak-disabled: var(--ink-light-alpha-6);
 
+  --border-weak-focus: var(--ink-light-alpha-7);
 
+  --border-interactive-base: var(--cobalt-light-7);
 
+  --border-interactive-hover: var(--cobalt-light-8);
 
+  --border-interactive-active: var(--cobalt-light-9);
 
+  --border-interactive-selected: var(--cobalt-light-9);
 
+  --border-interactive-disabled: var(--ink-light-8);
 
+  --border-interactive-focus: var(--cobalt-light-9);
 
+  --border-success-base: var(--apple-light-6);
 
+  --border-success-hover: var(--apple-light-7);
 
+  --border-success-selected: var(--apple-light-9);
 
+  --border-warning-base: var(--solaris-light-6);
 
+  --border-warning-hover: var(--solaris-light-7);
 
+  --border-warning-selected: var(--solaris-light-9);
 
+  --border-critical-base: var(--ember-light-6);
 
+  --border-critical-hover: var(--ember-light-7);
 
+  --border-critical-selected: var(--ember-light-9);
 
+  --border-info-base: var(--lilac-light-6);
 
+  --border-info-hover: var(--lilac-light-7);
 
+  --border-info-selected: var(--lilac-light-9);
 
+  --icon-base: var(--ink-light-9);
 
+  --icon-hover: var(--ink-light-11);
 
+  --icon-active: var(--ink-light-12);
 
+  --icon-selected: var(--ink-light-12);
 
+  --icon-disabled: var(--ink-light-8);
 
+  --icon-focus: var(--ink-light-12);
 
+  --icon-invert-base: #ffffff;
 
+  --icon-weak-base: var(--ink-light-7);
 
+  --icon-weak-hover: var(--ink-light-8);
 
+  --icon-weak-active: var(--ink-light-9);
 
+  --icon-weak-selected: var(--ink-light-10);
 
+  --icon-weak-disabled: var(--ink-light-6);
 
+  --icon-weak-focus: var(--ink-light-9);
 
+  --icon-strong-base: var(--ink-light-12);
 
+  --icon-strong-hover: #131515;
 
+  --icon-strong-active: #020202;
 
+  --icon-strong-selected: #020202;
 
+  --icon-strong-disabled: var(--ink-light-8);
 
+  --icon-strong-focus: #020202;
 
+  --icon-brand-base: var(--ink-light-12);
 
+  --icon-interactive-base: var(--cobalt-light-9);
 
+  --icon-success-base: var(--apple-light-7);
 
+  --icon-success-hover: var(--apple-light-8);
 
+  --icon-success-active: var(--apple-light-11);
 
+  --icon-warning-base: var(--amber-light-7);
 
+  --icon-warning-hover: var(--amber-light-8);
 
+  --icon-warning-active: var(--amber-light-11);
 
+  --icon-critical-base: var(--ember-light-10);
 
+  --icon-critical-hover: var(--ember-light-11);
 
+  --icon-critical-active: var(--ember-light-12);
 
+  --icon-info-base: var(--lilac-light-7);
 
+  --icon-info-hover: var(--lilac-light-8);
 
+  --icon-info-active: var(--lilac-light-11);
 
+  --icon-on-brand-base: var(--ink-light-alpha-11);
 
+  --icon-on-brand-hover: var(--ink-light-alpha-12);
 
+  --icon-on-brand-selected: var(--ink-light-alpha-12);
 
+  --icon-on-interactive-base: var(--ink-light-1);
 
+  --icon-agent-plan-base: var(--purple-light-9);
 
+  --icon-agent-docs-base: var(--amber-light-9);
 
+  --icon-agent-ask-base: var(--cyan-light-9);
 
+  --icon-agent-build-base: var(--cobalt-light-9);
 
+  --icon-on-success-base: var(--apple-light-alpha-9);
 
+  --icon-on-success-hover: var(--apple-light-alpha-10);
 
+  --icon-on-success-selected: var(--apple-light-alpha-11);
 
+  --icon-on-warning-base: var(--amber-lightalpha-9);
 
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
 
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
 
+  --icon-on-critical-base: var(--ember-light-alpha-9);
 
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
 
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
 
+  --icon-on-info-base: var(--lilac-light-9);
 
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
 
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
 
+  --icon-diff-add-base: var(--mint-light-11);
 
+  --icon-diff-add-hover: var(--mint-light-12);
 
+  --icon-diff-add-active: var(--mint-light-12);
 
+  --icon-diff-delete-base: var(--ember-light-10);
 
+  --icon-diff-delete-hover: var(--ember-light-11);
 
+  --syntax-comment: var(--text-weaker);
 
+  --syntax-regexp: var(--text-base);
 
+  --syntax-string: #007663;
 
+  --syntax-keyword: var(--text-weak);
 
+  --syntax-primitive: #fb7f51;
 
+  --syntax-operator: var(--text-weak);
 
+  --syntax-variable: var(--text-strong);
 
+  --syntax-property: #ec6cc8;
 
+  --syntax-type: #738400;
 
+  --syntax-constant: #00b2b9;
 
+  --syntax-punctuation: var(--text-weaker);
 
+  --syntax-object: var(--text-strong);
 
+  --syntax-success: var(--apple-light-10);
 
+  --syntax-warning: var(--amber-light-10);
 
+  --syntax-critical: var(--ember-light-9);
 
+  --syntax-info: #0091a7;
 
+  --syntax-diff-add: var(--mint-light-11);
 
+  --syntax-diff-delete: var(--ember-light-11);
 
+  --syntax-diff-unknown: #ff0000;
 
+  --markdown-heading: #d68c27;
 
+  --markdown-text: #1a1a1a;
 
+  --markdown-link: #3b7dd8;
 
+  --markdown-link-text: #318795;
 
+  --markdown-code: #3d9a57;
 
+  --markdown-block-quote: #b0851f;
 
+  --markdown-emph: #b0851f;
 
+  --markdown-strong: #d68c27;
 
+  --markdown-horizontal-rule: #8a8a8a;
 
+  --markdown-list-item: #3b7dd8;
 
+  --markdown-list-enumeration: #318795;
 
+  --markdown-image: #3b7dd8;
 
+  --markdown-image-text: #318795;
 
+  --markdown-code-block: #1a1a1a;
 
+  --border-color: #ffffff;
 
+  --border-weaker-base: var(--ink-light-alpha-3);
 
+  --border-weaker-hover: var(--ink-light-alpha-4);
 
+  --border-weaker-active: var(--ink-light-alpha-6);
 
+  --border-weaker-selected: var(--cobalt-light-alpha-4);
 
+  --border-weaker-disabled: var(--ink-light-alpha-2);
 
+  --border-weaker-focus: var(--ink-light-alpha-6);
 
+  --button-ghost-hover: var(--ink-light-alpha-2);
 
+  --button-ghost-hover2: var(--ink-light-alpha-3);
 
+
 
+  @media (prefers-color-scheme: dark) {
 
+    --background-base: var(--ink-dark-1);
 
+    --background-weak: #171c1c;
 
+    --background-strong: #131515;
 
+    --background-stronger: #151919;
 
+    --surface-base: var(--ink-dark-alpha-2);
 
+    --base: var(--ink-dark-alpha-2);
 
+    --surface-base-hover: #b8e0e00f;
 
+    --surface-base-active: var(--ink-dark-alpha-3);
 
+    --surface-base-interactive-active: var(--cobalt-light-alpha-3);
 
+    --base2: var(--ink-dark-alpha-2);
 
+    --base3: var(--ink-dark-alpha-2);
 
+    --surface-inset-base: #0b0e0e7f;
 
+    --surface-inset-base-hover: #0b0e0e7f;
 
+    --surface-inset-strong: #050606cc;
 
+    --surface-inset-strong-hover: #050606cc;
 
+    --surface-raised-base: var(--ink-light-alpha-1);
 
+    --surface-float-base: var(--ink-dark-1);
 
+    --surface-float-base-hover: var(--ink-dark-2);
 
+    --surface-raised-base-hover: var(--ink-light-alpha-2);
 
+    --surface-raised-base-active: var(--ink-light-alpha-3);
 
+    --surface-raised-strong: var(--ink-light-1);
 
+    --surface-raised-strong-hover: var(--white);
 
+    --surface-raised-stronger: var(--white);
 
+    --surface-raised-stronger-hover: var(--white);
 
+    --surface-weak: var(--ink-dark-alpha-4);
 
+    --surface-weaker: var(--ink-dark-alpha-5);
 
+    --surface-strong: var(--ink-dark-alpha-7);
 
+    --surface-raised-stronger-non-alpha: var(--white);
 
+    --surface-brand-base: var(--yuzu-light-9);
 
+    --surface-brand-hover: var(--yuzu-light-10);
 
+    --surface-interactive-base: var(--cobalt-light-3);
 
+    --surface-interactive-hover: var(--cobalt-light-4);
 
+    --surface-interactive-weak: var(--cobalt-light-2);
 
+    --surface-interactive-weak-hover: var(--cobalt-light-3);
 
+    --surface-success-base: var(--apple-light-3);
 
+    --surface-success-weak: var(--apple-light-2);
 
+    --surface-success-strong: var(--apple-light-9);
 
+    --surface-warning-base: var(--solaris-light-3);
 
+    --surface-warning-weak: var(--solaris-light-2);
 
+    --surface-warning-strong: var(--solaris-light-9);
 
+    --surface-critical-base: var(--ember-light-3);
 
+    --surface-critical-weak: var(--ember-light-2);
 
+    --surface-critical-strong: var(--ember-light-9);
 
+    --surface-info-base: var(--lilac-light-3);
 
+    --surface-info-weak: var(--lilac-light-2);
 
+    --surface-info-strong: var(--lilac-light-9);
 
+    --surface-diff-unchanged-base: #ffffff00;
 
+    --surface-diff-skip-base: var(--ink-light-2);
 
+    --surface-diff-hidden-base: var(--blue-light-3);
 
+    --surface-diff-hidden-weak: var(--blue-light-2);
 
+    --surface-diff-hidden-weaker: var(--blue-light-1);
 
+    --surface-diff-hidden-strong: var(--blue-light-5);
 
+    --surface-diff-hidden-stronger: var(--blue-light-9);
 
+    --surface-diff-add-base: var(--mint-light-3);
 
+    --surface-diff-add-weak: var(--mint-light-2);
 
+    --surface-diff-add-weaker: var(--mint-light-1);
 
+    --surface-diff-add-strong: var(--mint-light-5);
 
+    --surface-diff-add-stronger: var(--mint-light-9);
 
+    --surface-diff-delete-base: var(--ember-light-3);
 
+    --surface-diff-delete-weak: var(--ember-light-2);
 
+    --surface-diff-delete-weaker: var(--ember-light-1);
 
+    --surface-diff-delete-strong: var(--ember-light-6);
 
+    --surface-diff-delete-stronger: var(--ember-light-9);
 
+    --text-base: var(--ink-light-11);
 
+    --input-base: var(--ink-light-1);
 
+    --input-hover: var(--ink-light-2);
 
+    --input-active: var(--cobalt-light-1);
 
+    --input-selected: var(--cobalt-light-4);
 
+    --input-focus: var(--cobalt-light-1);
 
+    --input-disabled: var(--ink-light-4);
 
+    --text-weak: var(--ink-light-9);
 
+    --text-weaker: var(--ink-light-8);
 
+    --text-strong: var(--ink-light-12);
 
+    --text-interactive-base: var(--cobalt-light-9);
 
+    --text-on-brand-base: var(--ink-light-alpha-11);
 
+    --text-on-interactive-base: var(--ink-light-1);
 
+    --text-on-interactive-weak: var(--ink-light-alpha-11);
 
+    --text-on-success-base: var(--apple-light-10);
 
+    --text-on-critical-base: var(--ember-light-10);
 
+    --text-on-critical-weak: var(--ember-light-8);
 
+    --text-on-critical-strong: var(--ember-light-12);
 
+    --text-on-warning-base: var(--ink-dark-alpha-11);
 
+    --text-on-info-base: var(--ink-dark-alpha-11);
 
+    --text-diff-add-base: var(--mint-light-11);
 
+    --text-diff-delete-base: var(--ember-light-10);
 
+    --text-diff-delete-strong: var(--ember-light-12);
 
+    --text-diff-add-strong: var(--mint-light-12);
 
+    --text-on-info-weak: var(--ink-dark-alpha-9);
 
+    --text-on-info-strong: var(--ink-dark-alpha-12);
 
+    --text-on-warning-weak: var(--ink-dark-alpha-9);
 
+    --text-on-warning-strong: var(--ink-dark-alpha-12);
 
+    --text-on-success-weak: var(--apple-light-6);
 
+    --text-on-success-strong: var(--apple-light-12);
 
+    --text-on-brand-weak: var(--ink-light-alpha-9);
 
+    --text-on-brand-weaker: var(--ink-light-alpha-8);
 
+    --text-on-brand-strong: var(--ink-light-alpha-12);
 
+    --button-secondary-base: #fcfdfd;
 
+    --button-secondary-hover: #f9fafa;
 
+    --border-base: var(--ink-light-alpha-7);
 
+    --border-hover: var(--ink-light-alpha-8);
 
+    --border-active: var(--ink-light-alpha-9);
 
+    --border-selected: var(--cobalt-light-alpha-9);
 
+    --border-disabled: var(--ink-light-alpha-8);
 
+    --border-focus: var(--ink-light-alpha-9);
 
+    --border-weak-base: var(--ink-light-alpha-5);
 
+    --border-strong-base: var(--ink-light-alpha-7);
 
+    --border-strong-hover: var(--ink-light-alpha-8);
 
+    --border-strong-active: var(--ink-light-alpha-7);
 
+    --border-strong-selected: var(--cobalt-light-alpha-6);
 
+    --border-strong-disabled: var(--ink-light-alpha-6);
 
+    --border-strong-focus: var(--ink-light-alpha-7);
 
+    --border-weak-hover: var(--ink-light-alpha-6);
 
+    --border-weak-active: var(--ink-light-alpha-7);
 
+    --border-weak-selected: var(--cobalt-light-alpha-5);
 
+    --border-weak-disabled: var(--ink-light-alpha-6);
 
+    --border-weak-focus: var(--ink-light-alpha-7);
 
+    --border-interactive-base: var(--cobalt-light-7);
 
+    --border-interactive-hover: var(--cobalt-light-8);
 
+    --border-interactive-active: var(--cobalt-light-9);
 
+    --border-interactive-selected: var(--cobalt-light-9);
 
+    --border-interactive-disabled: var(--ink-light-8);
 
+    --border-interactive-focus: var(--cobalt-light-9);
 
+    --border-success-base: var(--apple-light-6);
 
+    --border-success-hover: var(--apple-light-7);
 
+    --border-success-selected: var(--apple-light-9);
 
+    --border-warning-base: var(--solaris-light-6);
 
+    --border-warning-hover: var(--solaris-light-7);
 
+    --border-warning-selected: var(--solaris-light-9);
 
+    --border-critical-base: var(--ember-light-6);
 
+    --border-critical-hover: var(--ember-light-7);
 
+    --border-critical-selected: var(--ember-light-9);
 
+    --border-info-base: var(--lilac-light-6);
 
+    --border-info-hover: var(--lilac-light-7);
 
+    --border-info-selected: var(--lilac-light-9);
 
+    --icon-base: var(--ink-light-9);
 
+    --icon-hover: var(--ink-light-11);
 
+    --icon-active: var(--ink-light-12);
 
+    --icon-selected: var(--ink-light-12);
 
+    --icon-disabled: var(--ink-light-8);
 
+    --icon-focus: var(--ink-light-12);
 
+    --icon-invert-base: #ffffff;
 
+    --icon-weak-base: var(--ink-light-7);
 
+    --icon-weak-hover: var(--ink-light-8);
 
+    --icon-weak-active: var(--ink-light-9);
 
+    --icon-weak-selected: var(--ink-light-10);
 
+    --icon-weak-disabled: var(--ink-light-6);
 
+    --icon-weak-focus: var(--ink-light-9);
 
+    --icon-strong-base: var(--ink-light-12);
 
+    --icon-strong-hover: #131515;
 
+    --icon-strong-active: #020202;
 
+    --icon-strong-selected: #020202;
 
+    --icon-strong-disabled: var(--ink-light-8);
 
+    --icon-strong-focus: #020202;
 
+    --icon-brand-base: var(--ink-light-12);
 
+    --icon-interactive-base: var(--cobalt-light-9);
 
+    --icon-success-base: var(--apple-light-7);
 
+    --icon-success-hover: var(--apple-light-8);
 
+    --icon-success-active: var(--apple-light-11);
 
+    --icon-warning-base: var(--amber-light-7);
 
+    --icon-warning-hover: var(--amber-light-8);
 
+    --icon-warning-active: var(--amber-light-11);
 
+    --icon-critical-base: var(--ember-light-10);
 
+    --icon-critical-hover: var(--ember-light-11);
 
+    --icon-critical-active: var(--ember-light-12);
 
+    --icon-info-base: var(--lilac-light-7);
 
+    --icon-info-hover: var(--lilac-light-8);
 
+    --icon-info-active: var(--lilac-light-11);
 
+    --icon-on-brand-base: var(--ink-light-alpha-11);
 
+    --icon-on-brand-hover: var(--ink-light-alpha-12);
 
+    --icon-on-brand-selected: var(--ink-light-alpha-12);
 
+    --icon-on-interactive-base: var(--ink-light-1);
 
+    --icon-agent-plan-base: var(--purple-light-9);
 
+    --icon-agent-docs-base: var(--amber-light-9);
 
+    --icon-agent-ask-base: var(--cyan-light-9);
 
+    --icon-agent-build-base: var(--cobalt-light-9);
 
+    --icon-on-success-base: var(--apple-light-alpha-9);
 
+    --icon-on-success-hover: var(--apple-light-alpha-10);
 
+    --icon-on-success-selected: var(--apple-light-alpha-11);
 
+    --icon-on-warning-base: var(--amber-lightalpha-9);
 
+    --icon-on-warning-hover: var(--amber-lightalpha-10);
 
+    --icon-on-warning-selected: var(--amber-lightalpha-11);
 
+    --icon-on-critical-base: var(--ember-light-alpha-9);
 
+    --icon-on-critical-hover: var(--ember-light-alpha-10);
 
+    --icon-on-critical-selected: var(--ember-light-alpha-11);
 
+    --icon-on-info-base: var(--lilac-light-9);
 
+    --icon-on-info-hover: var(--lilac-light-alpha-10);
 
+    --icon-on-info-selected: var(--lilac-light-alpha-11);
 
+    --icon-diff-add-base: var(--mint-light-11);
 
+    --icon-diff-add-hover: var(--mint-light-12);
 
+    --icon-diff-add-active: var(--mint-light-12);
 
+    --icon-diff-delete-base: var(--ember-light-10);
 
+    --icon-diff-delete-hover: var(--ember-light-11);
 
+    --syntax-comment: var(--text-weaker);
 
+    --syntax-regexp: var(--text-base);
 
+    --syntax-string: #007663;
 
+    --syntax-keyword: var(--text-weak);
 
+    --syntax-primitive: #fb7f51;
 
+    --syntax-operator: var(--text-weak);
 
+    --syntax-variable: var(--text-strong);
 
+    --syntax-property: #ec6cc8;
 
+    --syntax-type: #738400;
 
+    --syntax-constant: #00b2b9;
 
+    --syntax-punctuation: var(--text-weaker);
 
+    --syntax-object: var(--text-strong);
 
+    --syntax-success: var(--apple-light-10);
 
+    --syntax-warning: var(--amber-light-10);
 
+    --syntax-critical: var(--ember-light-9);
 
+    --syntax-info: #0091a7;
 
+    --syntax-diff-add: var(--mint-light-11);
 
+    --syntax-diff-delete: var(--ember-light-11);
 
+    --syntax-diff-unknown: #ff0000;
 
+    --markdown-heading: #d68c27;
 
+    --markdown-text: #1a1a1a;
 
+    --markdown-link: #3b7dd8;
 
+    --markdown-link-text: #318795;
 
+    --markdown-code: #3d9a57;
 
+    --markdown-block-quote: #b0851f;
 
+    --markdown-emph: #b0851f;
 
+    --markdown-strong: #d68c27;
 
+    --markdown-horizontal-rule: #8a8a8a;
 
+    --markdown-list-item: #3b7dd8;
 
+    --markdown-list-enumeration: #318795;
 
+    --markdown-image: #3b7dd8;
 
+    --markdown-image-text: #318795;
 
+    --markdown-code-block: #1a1a1a;
 
+    --border-color: #ffffff;
 
+    --border-weaker-base: var(--ink-light-alpha-3);
 
+    --border-weaker-hover: var(--ink-light-alpha-4);
 
+    --border-weaker-active: var(--ink-light-alpha-6);
 
+    --border-weaker-selected: var(--cobalt-light-alpha-4);
 
+    --border-weaker-disabled: var(--ink-light-alpha-2);
 
+    --border-weaker-focus: var(--ink-light-alpha-6);
 
+    --button-ghost-hover: var(--ink-light-alpha-2);
 
+    --button-ghost-hover2: var(--ink-light-alpha-3);
 
+  }
 
+}

+ 1 - 1
packages/ui/src/styles/utilities.css
View File 

@@ -17,7 +17,7 @@
 
 
   ::-webkit-scrollbar-thumb {
 
     background-color: var(--theme-border-subtle);
 
-    border-radius: 6px;
 
+    border-radius: var(--radius-md);
 
   }
 
 
   * {