wip(desktop): layout improvements

21 files changed, 675 insertions, 111 deletions

diff --git a/packages/ui/script/colors.txt b/packages/ui/script/colors.txt
index 5b5cfa73a..f84966853 100644
--- a/packages/ui/script/colors.txt
+++ b/packages/ui/script/colors.txt
@@ -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;
diff --git a/packages/ui/script/tailwind.ts b/packages/ui/script/tailwind.ts
index 1c7064690..6e558a8fa 100644
--- a/packages/ui/script/tailwind.ts
+++ b/packages/ui/script/tailwind.ts
@@ -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 {
diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index f949dc948..8cfac06b0 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -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);
         }
       }
     }
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 02f00b7be..535d38e3d 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -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,
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 80ded60fd..0fdb49cdc 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -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;
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
index a9b7c8784..6dae47223 100644
--- a/packages/ui/src/components/card.css
+++ b/packages/ui/src/components/card.css
@@ -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;
 
diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css
index 6e1e5ddd5..358391bd1 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/components/checkbox.css
@@ -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); */
   }
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 4b2c14d4d..edd9952d7 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -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"] {
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 750596308..7cf15bb23 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -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),
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index a491074fe..9e1c51cb2 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -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;
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 27a43e51e..c69d04f7a 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -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"> {
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index 67db2c619..2136c4f92 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -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"] {
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 41d8f3921..6ca8fa0f3 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -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);
         }
       }
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 79445420a..7bafa39f7 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -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);
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 67f289283..91efbe50d 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -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;
 
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 5e047a7ca..e2f72f158 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -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,
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
index 92825aca1..bde2a97dd 100644
--- a/packages/ui/src/components/tooltip.css
+++ b/packages/ui/src/components/tooltip.css
@@ -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;
diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css
index c5599686f..d64fa925b 100644
--- a/packages/ui/src/styles/colors.css
+++ b/packages/ui/src/styles/colors.css
@@ -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;
 }
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index 95a497ba9..888105da6 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -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);
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 05164092e..c65acc207 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -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);
+  }
+}
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 99b7760a0..935119af1 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -17,7 +17,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: var(--theme-border-subtle);
-    border-radius: 6px;
+    border-radius: var(--radius-md);
   }
 
   * {