mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-14 09:11:54 +00:00
style(desktop): render in-thread tool codicons as filled glyphs
Outline codicons read too thin at conversation-tool scale; a scoped filled modifier thickens tool-row and code-card icons without changing icon semantics elsewhere in the shell.
This commit is contained in:
parent
298bb93d39
commit
e80754647c
4 changed files with 21 additions and 4 deletions
|
|
@ -136,7 +136,7 @@ function ToolGlyph({ copy, icon, status }: { copy: ToolStatusCopy; icon?: string
|
|||
const node = status ? (
|
||||
statusGlyph(status, copy)
|
||||
) : icon ? (
|
||||
<Codicon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
|
||||
<Codicon className="text-(--ui-text-tertiary)" filled name={icon} size="0.875rem" />
|
||||
) : null
|
||||
|
||||
return node ? <span className={TOOL_HEADER_GLYPH_WRAP_CLASS}>{node}</span> : null
|
||||
|
|
|
|||
|
|
@ -46,11 +46,12 @@ function CodeCardTitle({ className, children, ...props }: React.ComponentProps<'
|
|||
)
|
||||
}
|
||||
|
||||
function CodeCardIcon({ className, ...props }: CodiconProps) {
|
||||
function CodeCardIcon({ className, filled = true, ...props }: CodiconProps) {
|
||||
return (
|
||||
<Codicon
|
||||
className={cn('shrink-0 text-[0.875rem] leading-none text-muted-foreground', className)}
|
||||
data-slot="code-card-icon"
|
||||
filled={filled}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,16 +3,24 @@ import type * as React from 'react'
|
|||
import { cn } from '@/lib/utils'
|
||||
|
||||
export interface CodiconProps extends React.HTMLAttributes<HTMLElement> {
|
||||
/** Thickens outline glyphs so they read as filled at small sizes (tool rows). */
|
||||
filled?: boolean
|
||||
name: string
|
||||
size?: number | string
|
||||
spinning?: boolean
|
||||
}
|
||||
|
||||
export function Codicon({ className, name, size, spinning, style, ...props }: CodiconProps) {
|
||||
export function Codicon({ className, filled, name, size, spinning, style, ...props }: CodiconProps) {
|
||||
return (
|
||||
<i
|
||||
aria-hidden="true"
|
||||
className={cn('codicon', `codicon-${name}`, spinning && 'codicon-modifier-spin', className)}
|
||||
className={cn(
|
||||
'codicon',
|
||||
`codicon-${name}`,
|
||||
spinning && 'codicon-modifier-spin',
|
||||
filled && 'codicon-modifier-filled',
|
||||
className
|
||||
)}
|
||||
style={{ fontSize: size, ...style }}
|
||||
{...props}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@
|
|||
@import '@vscode/codicons/dist/codicon.css';
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* In-thread tool/code glyphs render codicons at ~14px. Outline icons read
|
||||
thin at that scale; a hairline stroke on the glyph pseudo-element fills
|
||||
them without swapping icon semantics. */
|
||||
.codicon.codicon-modifier-filled::before {
|
||||
-webkit-text-stroke: 0.45px currentColor;
|
||||
paint-order: stroke fill;
|
||||
}
|
||||
|
||||
/* Sidebar sections: tall viewports give each its own scroller; compact ones
|
||||
(this variant) flatten everything into one shared scroll. See ChatSidebar. */
|
||||
@custom-variant compact (@media (max-height: 768px));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue