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:
Brooklyn Nicholson 2026-06-10 03:30:25 -05:00
parent 298bb93d39
commit e80754647c
4 changed files with 21 additions and 4 deletions

View file

@ -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

View file

@ -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}
/>
)

View file

@ -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}
/>

View file

@ -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));