feat: integrate HeroUI component library
Implemented HeroUI migration plan with the following changes: Stage 0: Environment Setup - Installed @heroui/react@2.8.7, @heroui/theme@2.4.26, framer-motion@12.29.2 - Configured Tailwind with HeroUI plugin - Added HeroUI content paths to Tailwind config Stage 1: Provider Architecture - Created Providers.tsx wrapper combining HeroUIProvider and AppProvider - Updated app/layout.tsx to use new Providers component - Preserved all AppContext functionality (theme, language, translations) Stage 2: Component Migrations - TabNavigation: Migrated to HeroUI Tabs with keyboard navigation support - TopBar: Migrated buttons to HeroUI Button components - LanguageSwitch: Migrated to HeroUI Dropdown for better UX - ThemeSwitch: Migrated to HeroUI Button (isIconOnly variant) - MintSwapPanel: Migrated to HeroUI Tabs and Button components Benefits: - Enhanced accessibility with ARIA attributes and keyboard navigation - Smooth animations and transitions via Framer Motion - Consistent component API across the application - Maintained all existing design tokens and color system - Preserved dark mode functionality Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,44 +1,46 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
'bg-subtle': '#f9fafb',
|
||||
'bg-surface': '#ffffff',
|
||||
'border-normal': '#e5e7eb',
|
||||
'border-gray': '#f3f4f6',
|
||||
'text-primary': '#111827',
|
||||
'text-tertiary': '#9ca1af',
|
||||
'fill-secondary-click': '#f3f4f6',
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
|
||||
jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
|
||||
},
|
||||
fontSize: {
|
||||
'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
|
||||
'body-small': ['14px', { lineHeight: '150%' }],
|
||||
'body-default': ['16px', { lineHeight: '150%' }],
|
||||
'body-large': ['18px', { lineHeight: '150%' }],
|
||||
'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
|
||||
'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
|
||||
},
|
||||
fontWeight: {
|
||||
regular: '400',
|
||||
medium: '500',
|
||||
bold: '700',
|
||||
extrabold: '800',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config;
|
||||
import type { Config } from "tailwindcss";
|
||||
import { heroui } from "@heroui/theme";
|
||||
|
||||
export default {
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
'bg-subtle': '#f9fafb',
|
||||
'bg-surface': '#ffffff',
|
||||
'border-normal': '#e5e7eb',
|
||||
'border-gray': '#f3f4f6',
|
||||
'text-primary': '#111827',
|
||||
'text-tertiary': '#9ca1af',
|
||||
'fill-secondary-click': '#f3f4f6',
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['var(--font-inter)', 'Inter', 'sans-serif'],
|
||||
jetbrains: ['var(--font-jetbrains)', 'JetBrains Mono', 'monospace'],
|
||||
},
|
||||
fontSize: {
|
||||
'caption-tiny': ['12px', { lineHeight: '150%', letterSpacing: '0.01em' }],
|
||||
'body-small': ['14px', { lineHeight: '150%' }],
|
||||
'body-default': ['16px', { lineHeight: '150%' }],
|
||||
'body-large': ['18px', { lineHeight: '150%' }],
|
||||
'heading-h3': ['24px', { lineHeight: '130%', letterSpacing: '-0.005em' }],
|
||||
'heading-h2': ['32px', { lineHeight: '120%', letterSpacing: '-0.01em' }],
|
||||
},
|
||||
fontWeight: {
|
||||
regular: '400',
|
||||
medium: '500',
|
||||
bold: '700',
|
||||
extrabold: '800',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [heroui()],
|
||||
} satisfies Config;
|
||||
|
||||
Reference in New Issue
Block a user