Enhance documentation and styling system with Mirage Palette, Material Design 3, and Neon accents. Add comprehensive style guide, color palette, and cheatsheet for improved developer experience.

2025-10-27 23:11:11 +03:00
parent cad5cfa780
commit 9820437556
11 changed files with 1415 additions and 381 deletions
--- a/taskncoffee-app/src/lib/styles.js
+++ b/taskncoffee-app/src/lib/styles.js
@@ -0,0 +1,168 @@
+/**
+ * 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;
+