From a8bf1ad40f9aa48c8207d92ce3fee794f9d38279 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Fri, 31 Oct 2025 10:08:24 -0500 Subject: wip: desktop work --- packages/ui/src/components/message-part.css | 10 ++++----- packages/ui/src/components/message-part.tsx | 2 +- packages/ui/src/styles/tailwind/colors.css | 13 +++++++---- packages/ui/src/styles/theme.css | 34 +++++++++++++++++------------ 4 files changed, 35 insertions(+), 24 deletions(-) (limited to 'packages/ui/src') 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) {
- +
{title}
{rest.join(": ")} 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); -- cgit v1.2.3