seb/hermes-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove drop shadows from composer and user message bubbles

Browse Source 
Strip shadow-composer (and its focus/open-state variants) from the
composer surface, composer fallback surface, and the shared user-bubble
base class. Also drop the !important box-shadow override on
[data-slot=composer-surface] that re-applied the shadow regardless of
the utility class, so the flatter look actually takes effect.
This commit is contained in:
Brooklyn Nicholson 2026-06-06 09:18:54 -05:00
parent 56236b16e3
commit 40386f33ec
3 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/desktop/src/app/chat/composer/index.tsx
View File

@ -1496,11 +1496,10 @@ export function ChatBar({
<div className="relative w-full rounded-[inherit]"> <div className="relative w-full rounded-[inherit]">
<div <div
className={cn( className={cn(
'relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] shadow-composer transition-[border-color,box-shadow] duration-200 ease-out', 'relative z-4 isolate rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] transition-[border-color] duration-200 ease-out',
COMPOSER_DROP_FADE_CLASS, COMPOSER_DROP_FADE_CLASS,
'group-focus-within/composer:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)] group-focus-within/composer:shadow-composer-focus', 'group-focus-within/composer:border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(45%*var(--composer-ring-strength)),transparent)]',
'group-has-data-[state=open]/composer:border-t-transparent', 'group-has-data-[state=open]/composer:border-t-transparent',
'group-has-data-[state=open]/composer:shadow-[0_0.0625rem_0_0.0625rem_color-mix(in_srgb,var(--dt-composer-ring)_calc(35%*var(--composer-ring-strength)),transparent),0_0.5rem_1.5rem_color-mix(in_srgb,var(--shadow-ink)_6%,transparent)]',
dragActive && COMPOSER_DROP_ACTIVE_CLASS dragActive && COMPOSER_DROP_ACTIVE_CLASS
)} )}
data-slot="composer-surface" data-slot="composer-surface"
@ -1593,7 +1592,7 @@ export function ChatBarFallback() {
)} )}
data-slot="composer-root" data-slot="composer-root"
> >
<div className="composer-fallback-surface relative isolate h-(--composer-fallback-height) w-full rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))] shadow-composer"> <div className="composer-fallback-surface relative isolate h-(--composer-fallback-height) w-full rounded-[inherit] border border-[color-mix(in_srgb,var(--dt-composer-ring)_calc(18%*var(--composer-ring-strength)),var(--dt-input))]">
<div <div
aria-hidden aria-hidden
className={cn( className={cn(

8
apps/desktop/src/components/assistant-ui/thread.tsx
View File

@ -647,11 +647,11 @@ function StickyHumanMessageContainer({ children }: { children: ReactNode }) {
} }
// Shared "user bubble" base. Both the read-only message and the inline // Shared "user bubble" base. Both the read-only message and the inline
// edit composer render the same bubble surface (rounded glass card, // edit composer render the same bubble surface (rounded glass card);
// shadow-composer); they only differ in border weight, cursor, and // they only differ in border weight, cursor, and padding-right (the
// padding-right (the read-only view reserves room for the restore icon). // read-only view reserves room for the restore icon).
const USER_BUBBLE_BASE_CLASS = const USER_BUBBLE_BASE_CLASS =
'composer-human-message standalone-glass relative flex w-full min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-xl border bg-(--dt-user-bubble) px-3 py-2 text-left shadow-composer' 'composer-human-message standalone-glass relative flex w-full min-w-0 max-w-full flex-col gap-1.5 overflow-hidden rounded-xl border bg-(--dt-user-bubble) px-3 py-2 text-left'
const USER_ACTION_ICON_BUTTON_CLASS = const USER_ACTION_ICON_BUTTON_CLASS =
'grid place-items-center rounded-md bg-transparent text-(--ui-text-secondary) transition-colors hover:bg-(--ui-control-active-background) hover:text-foreground disabled:cursor-default disabled:text-(--ui-text-quaternary) disabled:opacity-70' 'grid place-items-center rounded-md bg-transparent text-(--ui-text-secondary) transition-colors hover:bg-(--ui-control-active-background) hover:text-foreground disabled:cursor-default disabled:text-(--ui-text-quaternary) disabled:opacity-70'

1
apps/desktop/src/styles.css
View File

@ -943,7 +943,6 @@ canvas {
[data-slot='composer-surface'] { [data-slot='composer-surface'] {
border-color: var(--ui-stroke-secondary) !important; border-color: var(--ui-stroke-secondary) !important;
box-shadow: var(--shadow-composer) !important;
} }
[data-slot='composer-fade'] { [data-slot='composer-fade'] {