ahmido
f884b16061
Some checks failed
Main Confidence / confidence (push) Failing after 40s
## Summary - implement the website-only visual foundation for apps/website - formalize semantic tokens, typography, spacing, surfaces, and shared CTA/navigation primitives - align landing, trust/legal, and content-heavy routes plus Playwright smoke coverage with the new foundation ## Validation - corepack pnpm build:website - corepack pnpm --filter @tenantatlas/website exec playwright test ## Scope - website-only change set for spec 214 - no apps/platform runtime coupling introduced Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #251
73 lines
1.9 KiB
Plaintext
73 lines
1.9 KiB
Plaintext
---
|
|
import type { ButtonVariant } from '@/types/site';
|
|
|
|
interface Props {
|
|
ariaLabel?: string;
|
|
class?: string;
|
|
href?: string;
|
|
rel?: string;
|
|
size?: 'lg' | 'md' | 'sm';
|
|
target?: '_blank' | '_self';
|
|
type?: 'button' | 'reset' | 'submit';
|
|
variant?: ButtonVariant;
|
|
}
|
|
|
|
const {
|
|
ariaLabel,
|
|
class: className = '',
|
|
href,
|
|
rel,
|
|
size = 'md',
|
|
target,
|
|
type = 'button',
|
|
variant = 'primary',
|
|
} = Astro.props;
|
|
|
|
const baseClass =
|
|
'inline-flex items-center justify-center rounded-[var(--radius-pill)] border font-semibold tracking-[var(--tracking-tight)] transition duration-150';
|
|
|
|
const sizeClasses = {
|
|
sm: 'min-h-10 px-4 text-sm',
|
|
md: 'min-h-11 px-5 text-sm sm:text-[0.95rem]',
|
|
lg: 'min-h-12 px-6 text-[0.97rem]',
|
|
};
|
|
|
|
const variantClasses = {
|
|
primary:
|
|
'border-transparent bg-[var(--color-primary)] text-[var(--color-primary-foreground)] shadow-[var(--shadow-inline)] hover:bg-[var(--color-brand-700)]',
|
|
secondary:
|
|
'border-[color:var(--color-border)] bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)] hover:border-[var(--color-border-strong)] hover:bg-white',
|
|
ghost: 'border-transparent bg-transparent text-[var(--color-ink-800)] hover:bg-white/70',
|
|
};
|
|
|
|
const classes = [baseClass, sizeClasses[size], variantClasses[variant], className];
|
|
---
|
|
|
|
{
|
|
href ? (
|
|
<a
|
|
href={href}
|
|
target={target}
|
|
rel={rel}
|
|
aria-label={ariaLabel}
|
|
class:list={classes}
|
|
data-button-variant={variant}
|
|
data-cta-weight={variant}
|
|
data-interaction="button"
|
|
>
|
|
<slot />
|
|
</a>
|
|
) : (
|
|
<button
|
|
type={type}
|
|
aria-label={ariaLabel}
|
|
class:list={classes}
|
|
data-button-variant={variant}
|
|
data-cta-weight={variant}
|
|
data-interaction="button"
|
|
>
|
|
<slot />
|
|
</button>
|
|
)
|
|
}
|