vikingowl
153c0e9f13
This commit delivers a comprehensive design system and component library inspired by Counter-Strike 2's tactical aesthetic. Design System: - Created docs/DESIGN.md with complete design language documentation - CS2-inspired color palette: T-side orange (#d4a74a), CT-side blue (#5e98d9) - Dark-first approach with tactical, data-dense layouts - Typography scale, spacing system, and animation guidelines Component Library: - Button component: 4 variants (primary, secondary, ghost, danger), 3 sizes - Badge component: 7 variants including team-specific badges - Card component: 3 variants (default, elevated, interactive) - Header component: Responsive navigation with mobile menu - Footer component: Site-wide footer with organized link sections Pages: - Redesigned homepage with hero section, featured matches, features grid, CTA - Created placeholder pages: /matches, /players, /about - All pages follow CS2 aesthetic with proper component usage Technical Fixes: - Fixed Svelte 5 snippet syntax errors (removed incorrect render prop pattern) - Fixed Card component accessibility (conditional button/div rendering) - Removed invalid CSS border-border class from app.css - Ensured zero TypeScript errors and warnings Build Status: ✓ Verified with 0 errors, 0 warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
variant?: 'default' | 't-side' | 'ct-side' | 'success' | 'warning' | 'error' | 'info';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
class?: string;
|
|
children: Snippet;
|
|
}
|
|
|
|
let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
|
|
|
|
const baseClasses = 'inline-flex items-center justify-center font-medium border rounded';
|
|
|
|
const variantClasses = {
|
|
default: 'bg-base-300/50 border-base-content/20 text-base-content',
|
|
't-side':
|
|
'bg-terrorist/10 border-terrorist/30 text-terrorist-light backdrop-blur-sm font-semibold',
|
|
'ct-side': 'bg-ct/10 border-ct/30 text-ct-light backdrop-blur-sm font-semibold',
|
|
success: 'bg-success/10 border-success/30 text-success',
|
|
warning: 'bg-warning/10 border-warning/30 text-warning',
|
|
error: 'bg-error/10 border-error/30 text-error',
|
|
info: 'bg-info/10 border-info/30 text-info'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-sm',
|
|
lg: 'px-3 py-1.5 text-base'
|
|
};
|
|
|
|
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
|
|
</script>
|
|
|
|
<span class={classes}>
|
|
{@render children()}
|
|
</span>
|