suphicakir
d8a79ccbe3
- Huemint Magazine tokens for light/dark themes with AA-safe accent variants - FOUC-free theme init + toggle (localStorage, follows OS until chosen) - Seo component (canonical, OG, Twitter, WebSite/Person JSON-LD) - Header with popover mobile menu, 4-column footer with social links - Container, GridLines, SectionHeading, Button, Badge, Card, ExternalLink - site.json / social.json validated with zod - dev-only /styleguide preview Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
37 lines
933 B
Plaintext
37 lines
933 B
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
type Variant = 'solid' | 'outline' | 'category';
|
|
|
|
export interface Props {
|
|
variant?: Variant;
|
|
icon?: string;
|
|
href?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const { variant = 'solid', icon, href, class: className } = Astro.props;
|
|
|
|
const variants: Record<Variant, string> = {
|
|
// accent-fill (not accent) keeps small text ≥ 4.5:1 in both themes.
|
|
solid: 'bg-accent-fill text-on-accent-fill font-semibold',
|
|
outline: 'border border-line text-fg-muted',
|
|
category:
|
|
'bg-khaki text-ink font-semibold dark:bg-bg-alt dark:text-fg dark:border dark:border-line',
|
|
};
|
|
const Tag = href ? 'a' : 'span';
|
|
---
|
|
|
|
<Tag
|
|
href={href}
|
|
class:list={[
|
|
'inline-flex w-fit items-center gap-1 rounded-sm px-2 py-0.5 text-xs leading-5',
|
|
variants[variant],
|
|
href && 'hover:underline',
|
|
className,
|
|
]}
|
|
>
|
|
{icon && <Icon name={icon} class="size-3.5" aria-hidden="true" />}
|
|
<slot />
|
|
</Tag>
|