Rustelo/templates/shared/unocss.config.ts

// UnoCSS Configuration
// Generated by cargo rustelo v0.1.0 - Framework-managed file
// Template: content-website | Generation: 2025-10-28T18:46:17.145459+00:00
//
// This file provides the default Rustelo framework CSS configuration.
// To customize colors, fonts, or other design tokens, create a local override
// by copying specific sections to a new file: unocss.local.ts
//
// The framework will automatically merge local configurations with this base.

import { defineConfig, presetUno, presetTypography, presetWebFonts, presetIcons } from 'unocss';

export default defineConfig({
  // Framework-provided presets
  presets: [
    presetUno(),
    presetTypography({
      cssExtend: {
        'h1, h2, h3, h4, h5, h6': {
          'font-weight': '600',
          'line-height': '1.2',
        },
        'code': {
          'background-color': '#f1f5f9',
          'padding': '0.125rem 0.25rem',
          'border-radius': '0.25rem',
          'font-size': '0.875em',
        },
        'pre': {
          'background-color': '#1e293b !important',
          'padding': '1rem',
          'border-radius': '0.5rem',
          'overflow-x': 'auto',
        },
      },
    }),
    presetWebFonts({
      fonts: {
        sans: 'Inter:400,500,600,700',
        mono: 'JetBrains Mono:400,500',
      },
    }),
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
  ],

  // Rustelo framework theme
  theme: {
    colors: {
      // Primary brand colors
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6', // Primary
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
        950: '#172554',
      },
      // Secondary/accent colors
      secondary: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b', // Secondary
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a',
        950: '#020617',
      },
      // Success colors
      success: {
        50: '#f0fdf4',
        500: '#22c55e', // Success
        600: '#16a34a',
      },
      // Warning colors
      warning: {
        50: '#fffbeb',
        500: '#f59e0b', // Warning
        600: '#d97706',
      },
      // Error colors
      error: {
        50: '#fef2f2',
        500: '#ef4444', // Error
        600: '#dc2626',
      },
      // Framework rust-inspired colors
      rust: {
        50: '#fef7f0',
        100: '#fdede0',
        200: '#fbd9c0',
        300: '#f8c295',
        400: '#f4a261', // Rust orange
        500: '#e76f51', // Rust red
        600: '#d55e47',
        700: '#b24936',
        800: '#8f3a2d',
        900: '#73302a',
      },
    },

    // Typography scale
    fontSize: {
      'xs': ['0.75rem', { lineHeight: '1rem' }],
      'sm': ['0.875rem', { lineHeight: '1.25rem' }],
      'base': ['1rem', { lineHeight: '1.5rem' }],
      'lg': ['1.125rem', { lineHeight: '1.75rem' }],
      'xl': ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
    },

    // Spacing scale (extended)
    spacing: {
      '18': '4.5rem',
      '88': '22rem',
      '128': '32rem',
    },

    // Animation and transitions
    animation: {
      'fade-in': 'fadeIn 0.5s ease-in-out',
      'slide-up': 'slideUp 0.3s ease-out',
      'bounce-soft': 'bounceSoft 0.6s ease-in-out',
      'spin-slow': 'spin 2s linear infinite',
    },
  },

  // Custom keyframes
  keyframes: {
    fadeIn: {
      '0%': { opacity: '0' },
      '100%': { opacity: '1' },
    },
    slideUp: {
      '0%': { transform: 'translateY(10px)', opacity: '0' },
      '100%': { transform: 'translateY(0)', opacity: '1' },
    },
    bounceSoft: {
      '0%, 100%': { transform: 'translateY(0)' },
      '50%': { transform: 'translateY(-5px)' },
    },
  },

  // Framework-provided shortcuts
  shortcuts: {
    // Layout shortcuts
    'flex-center': 'flex items-center justify-center',
    'flex-between': 'flex items-center justify-between',
    'flex-col-center': 'flex flex-col items-center justify-center',

    // Button shortcuts
    'btn-base': 'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
    'btn-primary': 'btn-base bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500',
    'btn-secondary': 'btn-base bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500',
    'btn-outline': 'btn-base border border-primary-300 bg-transparent text-primary-700 hover:bg-primary-50 focus-visible:ring-primary-500',
    'btn-ghost': 'btn-base text-secondary-600 hover:bg-secondary-100 focus-visible:ring-secondary-500',

    // Card shortcuts
    'card': 'rounded-lg border border-secondary-200 bg-white p-6 shadow-sm',
    'card-hover': 'card hover:shadow-md transition-shadow duration-200',

    // Input shortcuts
    'input-base': 'block w-full rounded-md border-secondary-300 bg-white px-3 py-2 text-sm placeholder-secondary-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500',

    // Text shortcuts
    'text-muted': 'text-secondary-600',
    'text-subtle': 'text-secondary-500',
    'heading-1': 'text-4xl font-bold text-secondary-900 tracking-tight',
    'heading-2': 'text-3xl font-semibold text-secondary-800 tracking-tight',
    'heading-3': 'text-2xl font-semibold text-secondary-800',

    // Icon shortcuts
    'icon-sm': 'w-4 h-4',
    'icon-md': 'w-5 h-5',
    'icon-lg': 'w-6 h-6',
  },

  // Content scanning for CSS generation
  content: {
    filesystem: [
      './src/**/*.{html,js,ts,jsx,tsx,rs}',
      './assets/**/*.{html,js,css}',
      './templates/**/*.{html,hbs}',
      './content/**/*.{md,mdx}',
    ],
  },

  // Framework-provided safelist (always include these classes)
  safelist: [
    // Common utility classes
    'container',
    'mx-auto',
    'px-4',
    'py-2',
    'py-4',
    'py-8',

    // State classes
    'hover:bg-primary-700',
    'focus:ring-primary-500',
    'disabled:opacity-50',

    // Animation classes
    'animate-fade-in',
    'animate-slide-up',
    'animate-spin-slow',
    'transition-all',
    'duration-200',
    'duration-300',

    // Icon classes
    'i-heroicons-outline:home',
    'i-heroicons-outline:user',
    'i-heroicons-outline:cog',
  ],

  // Development mode
  dev: process.env.NODE_ENV === 'development',
});

/*
 * CUSTOMIZATION GUIDE
 * ===================
 *
 * To customize this configuration without losing changes during framework updates:
 *
 * 1. Create 'unocss.local.ts' in your project root
 * 2. Export a partial configuration that will be merged:
 *
 * ```typescript
 * // unocss.local.ts
 * import { defineConfig } from 'unocss';
 *
 * export default defineConfig({
 *   theme: {
 *     colors: {
 *       // Override primary color
 *       primary: {
 *         500: '#your-custom-color',
 *       },
 *       // Add custom colors
 *       brand: {
 *         500: '#your-brand-color',
 *       },
 *     },
 *   },
 *   shortcuts: {
 *     // Add custom shortcuts
 *     'btn-brand': 'btn-base bg-brand-500 text-white hover:bg-brand-600',
 *   },
 * });
 * ```
 *
 * 3. The framework will automatically detect and merge your local config.
 *
 * This approach ensures your customizations persist through framework updates!
 */