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:
@@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user