a6753cd8e6
Implement theme system: - Add next-themes for theme management with light mode as default - Swap CSS variable definitions in globals.css (light in :root, dark in .dark class) - Create ThemeProvider component wrapping next-themes - Create ThemeToggle component with sun/moon icons - Update root layout with ThemeProvider Build full homepage: - Add Header component with navigation and theme toggle - Create hero section with gradient background and search - Add Featured Tools section with 6 tool cards (icons, badges, usage stats) - Add Browse by Category section with 12 colored category tiles - Add Platform Statistics section with 4 metric cards - Add footer with copyright and links - Create homePageData.ts with comprehensive mock data Add Storybook stories: - Icon.stories.ts (AllIcons, AllSizes, WithColors) - Badge.stories.ts (Default, AllVariants, AllSizes, WithLongText) - Input.stories.ts (Default, WithLabel, AllStates, AllSizes, PasswordInput) - ProgressBar.stories.ts (Default, AllVariants, AllSizes, WithLabel, edge cases) - CodeBlock.stories.ts (Default, multiple languages, LongCode) - Tabs.stories.ts (Default, AllSizes, WithCounts, ManyTabs) Fix production build issues: - Export IconName type from Icon.ts - Add sun and moon icons to icons.ts - Fix Icon prop naming (icon not name) - Fix Icon size constraints (remove xl, use lg) - Update ThemeProvider types using ComponentProps - Add explicit return types where needed - Remove unused imports - Replace forEach with for...of in variants system - Fix template literals in storybook stories 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
25 lines
627 B
TypeScript
25 lines
627 B
TypeScript
import { spacing } from "../tokens";
|
|
|
|
/**
|
|
* Container component design tokens
|
|
* Maps global tokens to container-specific semantics
|
|
*/
|
|
export const containerTokens = {
|
|
/** Maximum widths for each size */
|
|
maxWidth: {
|
|
sm: "640px", // max-w-screen-sm
|
|
md: "768px", // max-w-screen-md
|
|
lg: "1024px", // max-w-screen-lg
|
|
xl: "1280px", // max-w-screen-xl
|
|
"2xl": "1536px", // max-w-screen-2xl
|
|
full: "100%", // max-w-full
|
|
},
|
|
|
|
/** Horizontal padding for each size */
|
|
padding: {
|
|
none: spacing[0], // 0
|
|
sm: spacing[4], // 1rem (16px)
|
|
md: spacing[6], // 1.5rem (24px)
|
|
lg: spacing[8], // 2rem (32px)
|
|
},
|
|
} as const;
|