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;
|
||
|