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:
Brooklyn Nicholson 2026-07-27 21:45:42 -05:00
parent 23459c0361
commit df7352aec6
6 changed files with 17 additions and 11 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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