Complete Tailwind CSS v4 migration with @theme
- Remove tailwind.config.js (no longer needed in v4) - Migrate all theme config to CSS @theme directive - Define colors, fonts, animations in CSS - Add zinc color palette for direct use - Fix styling to match original design Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.5
+88
-31
@@ -1,33 +1,90 @@
|
||||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
/* Tailwind CSS v4 Theme Configuration */
|
||||
@theme {
|
||||
/* Font Family */
|
||||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Colors - Zinc-based dark theme */
|
||||
--color-background: #18181b;
|
||||
--color-foreground: #fafafa;
|
||||
--color-card: #27272a;
|
||||
--color-card-foreground: #fafafa;
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-secondary: #3f3f46;
|
||||
--color-secondary-foreground: #fafafa;
|
||||
--color-muted: #3f3f46;
|
||||
--color-muted-foreground: #a1a1aa;
|
||||
--color-accent: #3f3f46;
|
||||
--color-accent-foreground: #fafafa;
|
||||
--color-destructive: #ef4444;
|
||||
--color-destructive-foreground: #fafafa;
|
||||
--color-border: #3f3f46;
|
||||
--color-input: #3f3f46;
|
||||
--color-ring: #3b82f6;
|
||||
|
||||
/* Zinc palette for direct use */
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f4f4f5;
|
||||
--color-zinc-200: #e4e4e7;
|
||||
--color-zinc-300: #d4d4d8;
|
||||
--color-zinc-400: #a1a1aa;
|
||||
--color-zinc-500: #71717a;
|
||||
--color-zinc-600: #52525b;
|
||||
--color-zinc-700: #3f3f46;
|
||||
--color-zinc-800: #27272a;
|
||||
--color-zinc-900: #18181b;
|
||||
--color-zinc-950: #09090b;
|
||||
|
||||
/* Border Radius */
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-md: calc(0.5rem - 2px);
|
||||
--radius-sm: calc(0.5rem - 4px);
|
||||
|
||||
/* Animations */
|
||||
--animate-slide-up: slideUp 0.5s ease-out forwards;
|
||||
--animate-fade-in: fadeIn 0.3s ease-out forwards;
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
}
|
||||
|
||||
/* Keyframes for animations */
|
||||
@keyframes slideUp {
|
||||
0% { transform: translateY(10px); opacity: 0; }
|
||||
100% { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
|
||||
50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
||||
}
|
||||
|
||||
/* CSS Variables for legacy support */
|
||||
:root {
|
||||
--font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-inter: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
|
||||
/* Animation Design Tokens */
|
||||
--transition-fast: 150ms;
|
||||
--transition-base: 200ms;
|
||||
--transition-slow: 300ms;
|
||||
--transition-slower: 500ms;
|
||||
|
||||
/* Colors */
|
||||
--background: 24 24 27;
|
||||
--foreground: 250 250 250;
|
||||
--card: 39 39 42;
|
||||
--card-foreground: 250 250 250;
|
||||
--primary: 59 130 246;
|
||||
--primary-foreground: 255 255 255;
|
||||
--secondary: 63 63 70;
|
||||
--secondary-foreground: 250 250 250;
|
||||
--muted: 63 63 70;
|
||||
--muted-foreground: 161 161 170;
|
||||
--accent: 63 63 70;
|
||||
--accent-foreground: 250 250 250;
|
||||
--destructive: 239 68 68;
|
||||
--destructive-foreground: 250 250 250;
|
||||
--border: 63 63 70;
|
||||
--input: 63 63 70;
|
||||
--ring: 59 130 246;
|
||||
}
|
||||
|
||||
/* Prefers-Reduced-Motion Support */
|
||||
@@ -52,8 +109,8 @@ html {
|
||||
|
||||
body {
|
||||
font-family: var(--font-inter);
|
||||
background-color: rgb(var(--background));
|
||||
color: rgb(var(--foreground));
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -65,26 +122,26 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(var(--background));
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--secondary));
|
||||
background: var(--color-secondary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--muted-foreground));
|
||||
background: var(--color-muted-foreground);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: rgb(var(--primary) / 0.3);
|
||||
background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus-visible {
|
||||
outline: 2px solid rgb(var(--ring));
|
||||
outline: 2px solid var(--color-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -96,16 +153,16 @@ button {
|
||||
|
||||
/* Utility classes */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, rgb(var(--primary)) 0%, #8b5cf6 100%);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background: rgb(var(--card) / 0.8);
|
||||
background: color-mix(in srgb, var(--color-card) 80%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgb(var(--border) / 0.5);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
}
|
||||
|
||||
/* Safe Area Insets for notches */
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
'slide-up': 'slideUp 0.5s ease-out forwards',
|
||||
'fade-in': 'fadeIn 0.3s ease-out forwards',
|
||||
},
|
||||
keyframes: {
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(10px)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
border: "rgb(var(--border))",
|
||||
input: "rgb(var(--input))",
|
||||
ring: "rgb(var(--ring))",
|
||||
background: "rgb(var(--background))",
|
||||
foreground: "rgb(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "rgb(var(--color-primary))",
|
||||
dark: "rgb(var(--color-primary-dark))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "rgb(var(--color-secondary))",
|
||||
gray: "rgb(var(--color-secondary-gray))",
|
||||
fuzzy: "rgb(var(--color-secondary-fuzzy))",
|
||||
},
|
||||
text: {
|
||||
DEFAULT: "rgb(var(--color-text))",
|
||||
light: "rgb(var(--color-text-light))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "rgb(var(--destructive))",
|
||||
foreground: "rgb(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "rgb(var(--muted))",
|
||||
foreground: "rgb(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "rgb(var(--accent))",
|
||||
foreground: "rgb(var(--accent-foreground))",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "rgb(var(--popover))",
|
||||
foreground: "rgb(var(--popover-foreground))",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "rgb(var(--card))",
|
||||
foreground: "rgb(var(--card-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user