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>
42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from 'astro/types';
|
|
import { Icon } from 'astro-icon/components';
|
|
|
|
type Variant = 'primary' | 'secondary' | 'link';
|
|
|
|
export interface Props extends HTMLAttributes<'a'> {
|
|
href?: string;
|
|
variant?: Variant;
|
|
icon?: string;
|
|
type?: 'button' | 'submit';
|
|
}
|
|
|
|
const { href, variant = 'primary', icon, type = 'button', class: className, ...rest } = Astro.props;
|
|
|
|
// Primary uses ink on red at ≥19px bold (large text, ratio 4.46 ≥ 3).
|
|
const variants: Record<Variant, string> = {
|
|
primary:
|
|
'bg-accent text-on-accent px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-fg hover:text-bg',
|
|
secondary:
|
|
'bg-fg text-bg px-6 py-3 text-[1.1875rem] font-bold rounded-[2px] hover:bg-accent hover:text-on-accent',
|
|
link: 'link-strong text-lg',
|
|
};
|
|
const classes = [
|
|
'font-display inline-flex items-center gap-2 transition-colors',
|
|
variants[variant],
|
|
className,
|
|
];
|
|
---
|
|
|
|
{href ? (
|
|
<a href={href} class:list={classes} {...rest}>
|
|
<slot />
|
|
{icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
|
|
</a>
|
|
) : (
|
|
<button type={type} class:list={[classes, 'cursor-pointer']}>
|
|
<slot />
|
|
{icon && <Icon name={icon} class="size-5" aria-hidden="true" />}
|
|
</button>
|
|
)}
|