wip: desktop work

4 files changed, 35 insertions, 24 deletions

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index dcfadeff6..ab839481d 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -33,7 +33,7 @@
   gap: 8px;
 
   [data-slot="tool-error-icon"] {
-    color: var(--icon-critical-active);
+    color: var(--icon-critical-base);
     margin-top: 4px;
   }
 
@@ -50,13 +50,13 @@
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-    color: var(--ember-light-11);
-    text-transform: capitalize;
+    color: var(--text-on-critical-base);
     white-space: nowrap;
   }
 
-  /* [data-slot="tool-error-message"] { */
-  /* } */
+  [data-slot="tool-error-message"] {
+    color: var(--text-on-critical-weak);
+  }
 }
 
 [data-component="tool-output"] {
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 272a716a4..01a58025a 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -153,7 +153,7 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
                 <div data-component="tool-error">
                   <Icon name="circle-ban-sign" size="small" data-slot="tool-error-icon" />
                   <Switch>
-                    <Match when={title}>
+                    <Match when={title && title.length < 30}>
                       <div data-slot="tool-error-content">
                         <div data-slot="tool-error-title">{title}</div>
                         <span data-slot="tool-error-message">{rest.join(": ")}</span>
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index e2f6788ab..527c43109 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -7,8 +7,8 @@
   --color-background-weak: var(--background-weak);
   --color-background-strong: var(--background-strong);
   --color-background-stronger: var(--background-stronger);
-  --color-base: var(--base);
   --color-surface-base: var(--surface-base);
+  --color-base: var(--base);
   --color-surface-base-hover: var(--surface-base-hover);
   --color-surface-base-active: var(--surface-base-active);
   --color-surface-base-interactive-active: var(--surface-base-interactive-active);
@@ -22,6 +22,7 @@
   --color-surface-float-base: var(--surface-float-base);
   --color-surface-float-base-hover: var(--surface-float-base-hover);
   --color-surface-raised-base-hover: var(--surface-raised-base-hover);
+  --color-surface-raised-base-active: var(--surface-raised-base-active);
   --color-surface-raised-strong: var(--surface-raised-strong);
   --color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
   --color-surface-raised-stronger: var(--surface-raised-stronger);
@@ -48,8 +49,8 @@
   --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-hidden-base: var(--surface-diff-hidden-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);
@@ -80,6 +81,9 @@
   --color-text-on-interactive-base: var(--text-on-interactive-base);
   --color-text-on-interactive-weak: var(--text-on-interactive-weak);
   --color-text-on-success-base: var(--text-on-success-base);
+  --color-text-on-critical-base: var(--text-on-critical-base);
+  --color-text-on-critical-weak: var(--text-on-critical-weak);
+  --color-text-on-critical-strong: var(--text-on-critical-strong);
   --color-text-on-warning-base: var(--text-on-warning-base);
   --color-text-on-info-base: var(--text-on-info-base);
   --color-text-diff-add-base: var(--text-diff-add-base);
@@ -139,8 +143,8 @@
   --color-icon-selected: var(--icon-selected);
   --color-icon-disabled: var(--icon-disabled);
   --color-icon-focus: var(--icon-focus);
-  --color-icon-weak-base: var(--icon-weak-base);
   --color-icon-invert-base: var(--icon-invert-base);
+  --color-icon-weak-base: var(--icon-weak-base);
   --color-icon-weak-hover: var(--icon-weak-hover);
   --color-icon-weak-active: var(--icon-weak-active);
   --color-icon-weak-selected: var(--icon-weak-selected);
@@ -191,7 +195,6 @@
   --color-icon-diff-add-active: var(--icon-diff-add-active);
   --color-icon-diff-delete-base: var(--icon-diff-delete-base);
   --color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
-  --color-icon-diff-delete-active: var(--icon-diff-delete-active);
   --color-syntax-comment: var(--syntax-comment);
   --color-syntax-string: var(--syntax-string);
   --color-syntax-keyword: var(--syntax-keyword);
@@ -227,4 +230,6 @@
   --color-border-weaker-selected: var(--border-weaker-selected);
   --color-border-weaker-disabled: var(--border-weaker-disabled);
   --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 c401dcae9..2458a599b 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -114,9 +114,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);
@@ -145,7 +145,10 @@
   --text-on-brand-base: var(--smoke-light-alpha-11);
   --text-on-interactive-base: var(--smoke-light-1);
   --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-  --text-on-success-base: var(--smoke-dark-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(--smoke-dark-alpha-11);
   --text-on-info-base: var(--smoke-dark-alpha-11);
   --text-diff-add-base: var(--mint-light-11);
@@ -156,8 +159,8 @@
   --text-on-info-strong: var(--smoke-dark-alpha-12);
   --text-on-warning-weak: var(--smoke-dark-alpha-9);
   --text-on-warning-strong: var(--smoke-dark-alpha-12);
-  --text-on-success-weak: var(--smoke-dark-alpha-9);
-  --text-on-success-strong: var(--smoke-dark-alpha-12);
+  --text-on-success-weak: var(--apple-light-6);
+  --text-on-success-strong: var(--apple-light-12);
   --text-on-brand-weak: var(--smoke-light-alpha-9);
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
@@ -226,9 +229,9 @@
   --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-7);
-  --icon-critical-hover: var(--ember-light-8);
-  --icon-critical-active: var(--ember-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);
@@ -346,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);
@@ -377,7 +380,10 @@
     --text-on-brand-base: var(--smoke-dark-alpha-11);
     --text-on-interactive-base: var(--smoke-dark-12);
     --text-on-interactive-weak: var(--smoke-dark-alpha-11);
-    --text-on-success-base: var(--smoke-dark-alpha-11);
+    --text-on-success-base: var(--apple-dark-9);
+    --text-on-critical-base: var(--ember-dark-9);
+    --text-on-critical-weak: var(--ember-dark-8);
+    --text-on-critical-strong: var(--ember-dark-12);
     --text-on-warning-base: var(--smoke-dark-alpha-11);
     --text-on-info-base: var(--smoke-dark-alpha-11);
     --text-diff-add-base: var(--mint-dark-11);
@@ -388,8 +394,8 @@
     --text-on-info-strong: var(--smoke-dark-alpha-12);
     --text-on-warning-weak: var(--smoke-dark-alpha-9);
     --text-on-warning-strong: var(--smoke-dark-alpha-12);
-    --text-on-success-weak: var(--smoke-dark-alpha-9);
-    --text-on-success-strong: var(--smoke-dark-alpha-12);
+    --text-on-success-weak: var(--apple-dark-8);
+    --text-on-success-strong: var(--apple-dark-12);
     --text-on-brand-weak: var(--smoke-dark-alpha-9);
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
@@ -458,9 +464,9 @@
     --icon-warning-base: var(--amber-dark-7);
     --icon-warning-hover: var(--amber-dark-8);
     --icon-warning-active: var(--amber-dark-11);
-    --icon-critical-base: var(--ember-dark-7);
-    --icon-critical-hover: var(--ember-dark-8);
-    --icon-critical-active: var(--ember-dark-11);
+    --icon-critical-base: var(--ember-dark-9);
+    --icon-critical-hover: var(--ember-dark-11);
+    --icon-critical-active: var(--ember-dark-12);
     --icon-info-base: var(--lilac-dark-7);
     --icon-info-hover: var(--lilac-dark-8);
     --icon-info-active: var(--lilac-dark-11);