mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-07-29 18:46:59 +00:00
style(desktop): quiet inline links to color-only until hover
The resting chip fill and the bold weight both fought the brand mark for
attention. Links now sit in the theme's primary color at body weight, and
the tint fades in on hover.
Weight is overridden on .link-chip itself: `@tailwindcss/typography` sets
`prose a { font-weight: 500 }`, which outranks a utility class on the anchor,
so the per-call-site classes could never win.
This commit is contained in:
parent
23459c0361
commit
df7352aec6
6 changed files with 17 additions and 11 deletions
|
|
@ -521,7 +521,7 @@ export const SessionRefLink: FC<{
|
|||
|
||||
return (
|
||||
<a
|
||||
className="link-chip font-semibold wrap-anywhere"
|
||||
className="link-chip wrap-anywhere"
|
||||
href="#"
|
||||
onClick={event => {
|
||||
event.preventDefault()
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ function MediaAttachment({ path }: { path: string }) {
|
|||
return (
|
||||
<span className="wrap-anywhere">
|
||||
<a
|
||||
className="link-chip font-semibold wrap-anywhere"
|
||||
className="link-chip wrap-anywhere"
|
||||
href="#"
|
||||
onClick={event => {
|
||||
event.preventDefault()
|
||||
|
|
@ -283,7 +283,7 @@ function MarkdownLink({ children, className, href, ...props }: ComponentProps<'a
|
|||
if (!target || !/^https?:\/\//i.test(target)) {
|
||||
return (
|
||||
<a
|
||||
className={cn('link-chip font-semibold wrap-anywhere', className)}
|
||||
className={cn('link-chip wrap-anywhere', className)}
|
||||
href={href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ function tagged<T extends keyof typeof TAG_CLASSES>(Tag: T) {
|
|||
function MarkdownAnchor({ children, className, href, ...rest }: ComponentProps<'a'>) {
|
||||
if (!href || !/^https?:\/\//i.test(href)) {
|
||||
return (
|
||||
<a className={cn('link-chip font-medium', className)} href={href} {...rest}>
|
||||
<a className={cn('link-chip', className)} href={href} {...rest}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export const GeneratedImage: FC<{ aspectRatio?: string; result?: unknown }> = ({
|
|||
if (failed && image) {
|
||||
return (
|
||||
<a
|
||||
className="mt-2 link-chip inline-block font-semibold wrap-anywhere"
|
||||
className="mt-2 link-chip inline-block wrap-anywhere"
|
||||
href="#"
|
||||
onClick={event => {
|
||||
event.preventDefault()
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@ export function ExternalLink({
|
|||
|
||||
return (
|
||||
<a
|
||||
className={cn('link-chip font-semibold', className)}
|
||||
className={cn('link-chip', className)}
|
||||
href={target}
|
||||
onClick={event => {
|
||||
event.stopPropagation()
|
||||
|
|
@ -279,7 +279,7 @@ export function PrettyLink({ className, fallbackLabel, href, label, ...rest }: P
|
|||
return (
|
||||
<ExternalLink className={cn('wrap-break-word', className)} href={target} title={target} {...rest}>
|
||||
<LinkBrandIcon href={target} />
|
||||
<span className="font-medium">{display}</span>
|
||||
{display}
|
||||
</ExternalLink>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -556,11 +556,17 @@
|
|||
background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 0.125rem 0.125rem;
|
||||
}
|
||||
|
||||
/* Inline content links: a small tinted chip instead of an underline. Tint is
|
||||
currentColor-relative (the old `decoration-current/20` idiom), so text and
|
||||
fill share a hue on every theme from one `color` declaration. */
|
||||
/* Inline content links: color at rest, a tinted chip on hover, never an
|
||||
underline. Tint is currentColor-relative (the old `decoration-current/20`
|
||||
idiom), so text and fill share a hue on every theme from one `color`. */
|
||||
.link-chip {
|
||||
--link-chip-tint: 8%;
|
||||
/* The one knob: resting fill. 0% = color-only until hovered. */
|
||||
--link-chip-tint: 0%;
|
||||
|
||||
/* Prose links inherit the surrounding text's weight. `@tailwindcss/typography`
|
||||
sets `prose a { font-weight: 500 }`, which outranks a utility class on the
|
||||
anchor — so the override belongs here, on the shared chip. */
|
||||
font-weight: inherit;
|
||||
|
||||
/* `ch`/`em` so the chip tracks the text at any size. Block padding is
|
||||
asymmetric because an inline box's content area is ascent+descent — equal
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue