IluaAir
169 lines
7.3 KiB
JavaScript
169 lines
7.3 KiB
JavaScript
/**
|
|
* Tailwind CSS Class Presets for Task&Coffee
|
|
* Material Design 3 + Neon Aesthetic
|
|
* Using Mirage Color Palette
|
|
*/
|
|
|
|
// Card Styles - Material Design 3 Variants
|
|
export const cardStyles = {
|
|
// Filled card - основной вариант для большинства карточек
|
|
filled: "bg-card text-card-foreground p-6 rounded-lg shadow-sm",
|
|
|
|
// Elevated card - карточки с эффектом поднятия
|
|
elevated: "bg-card text-card-foreground p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300",
|
|
|
|
// Outlined card - карточки с границей
|
|
outlined: "bg-background border-2 border-border text-foreground p-6 rounded-lg",
|
|
|
|
// Task card - компактные карточки для задач
|
|
task: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200",
|
|
|
|
// Task card with neon accent
|
|
taskNeon: "bg-card text-card-foreground p-3 rounded-lg shadow-sm hover:shadow-[0_0_15px_rgba(104,147,200,0.3)] hover:-translate-y-0.5 transition-all duration-200",
|
|
};
|
|
|
|
// Button Styles
|
|
export const buttonStyles = {
|
|
// Primary button - основные действия
|
|
primary: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md",
|
|
|
|
// Primary with neon glow
|
|
primaryNeon: "bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:shadow-[0_0_20px_rgba(104,147,200,0.5)]",
|
|
|
|
// Secondary button - вторичные действия
|
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2 rounded-lg font-medium transition-all duration-200",
|
|
|
|
// Outline button - менее важные действия
|
|
outline: "border-2 border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200",
|
|
|
|
// Ghost button - минималистичные кнопки
|
|
ghost: "text-foreground hover:bg-accent hover:text-accent-foreground px-4 py-2 rounded-lg font-medium transition-all duration-200",
|
|
|
|
// Destructive button - опасные действия
|
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md",
|
|
|
|
// Icon button
|
|
icon: "p-2 rounded-lg hover:bg-accent transition-all duration-200",
|
|
|
|
// Icon button with neon effect
|
|
iconNeon: "p-2 rounded-lg hover:bg-accent transition-all duration-200 hover:shadow-[0_0_15px_rgba(104,147,200,0.4)]",
|
|
};
|
|
|
|
// Layout Styles
|
|
export const layoutStyles = {
|
|
// Main container
|
|
container: "flex min-h-screen bg-background text-foreground",
|
|
|
|
// Sidebar/Navigation rail
|
|
sidebar: "w-20 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-4 gap-4",
|
|
|
|
// Main content area
|
|
main: "flex-1 p-6 bg-background flex flex-col",
|
|
|
|
// Content wrapper with max width
|
|
content: "max-w-7xl mx-auto w-full flex flex-1 flex-col gap-6",
|
|
|
|
// Grid layouts
|
|
gridCards: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
|
|
gridTasks: "grid grid-cols-1 gap-3",
|
|
};
|
|
|
|
// Input Styles
|
|
export const inputStyles = {
|
|
// Standard input
|
|
default: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200",
|
|
|
|
// Input with neon focus effect
|
|
neon: "w-full px-4 py-2 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:shadow-[0_0_15px_rgba(104,147,200,0.3)] transition-all duration-200",
|
|
|
|
// Search input
|
|
search: "w-full px-4 py-2 pl-10 bg-background border border-input rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all duration-200",
|
|
};
|
|
|
|
// Text Styles
|
|
export const textStyles = {
|
|
// Headings
|
|
h1: "text-4xl font-bold text-foreground",
|
|
h2: "text-3xl font-semibold text-foreground",
|
|
h3: "text-2xl font-semibold text-foreground",
|
|
h4: "text-xl font-semibold text-foreground",
|
|
|
|
// Body text
|
|
body: "text-base text-foreground",
|
|
bodyMuted: "text-base text-muted-foreground",
|
|
|
|
// Small text
|
|
small: "text-sm text-foreground",
|
|
smallMuted: "text-sm text-muted-foreground",
|
|
|
|
// Neon text (to be combined with neon.css animations)
|
|
neonBlue: "text-[#c6e2ff]",
|
|
neonPink: "text-[#ffc5ec]",
|
|
};
|
|
|
|
// Badge/Chip Styles
|
|
export const badgeStyles = {
|
|
// Default badge
|
|
default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30",
|
|
|
|
// Priority badges
|
|
low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
|
|
medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
|
|
high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30",
|
|
critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
|
|
|
|
// Status badges
|
|
success: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
|
|
warning: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
|
|
error: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
|
|
info: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-500/20 text-blue-400 border border-blue-500/30",
|
|
};
|
|
|
|
// Utility Styles
|
|
export const utilityStyles = {
|
|
// Neon glow effects (for hover states)
|
|
glowBlue: "hover:shadow-[0_0_20px_rgba(104,147,200,0.6)]",
|
|
glowPink: "hover:shadow-[0_0_20px_rgba(255,20,147,0.6)]",
|
|
glowSoft: "hover:shadow-[0_0_15px_rgba(104,147,200,0.3)]",
|
|
|
|
// Glassmorphism effect
|
|
glass: "bg-card/50 backdrop-blur-md border border-border/50",
|
|
|
|
// Smooth transitions
|
|
transition: "transition-all duration-200 ease-in-out",
|
|
transitionSlow: "transition-all duration-300 ease-in-out",
|
|
|
|
// Focus visible states
|
|
focusRing: "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
|
|
};
|
|
|
|
// Complete component compositions
|
|
export const componentStyles = {
|
|
// Day column in calendar
|
|
dayColumn: "flex-1 min-w-[180px] flex flex-col bg-background rounded-lg p-4 transition-all duration-300",
|
|
dayColumnToday: "flex-1 min-w-[180px] flex flex-col bg-primary/10 border-2 border-primary rounded-lg p-4 transition-all duration-300",
|
|
|
|
// Avatar
|
|
avatar: "w-14 h-14 rounded-lg overflow-hidden",
|
|
avatarLarge: "w-20 h-20 rounded-xl overflow-hidden",
|
|
|
|
// Divider
|
|
divider: "h-px bg-border w-full",
|
|
dividerVertical: "w-px bg-border h-full",
|
|
};
|
|
|
|
// Export all styles as a single object for convenience
|
|
export const styles = {
|
|
card: cardStyles,
|
|
button: buttonStyles,
|
|
layout: layoutStyles,
|
|
input: inputStyles,
|
|
text: textStyles,
|
|
badge: badgeStyles,
|
|
utility: utilityStyles,
|
|
component: componentStyles,
|
|
};
|
|
|
|
export default styles;
|
|
|