managarten/packages/shared-tailwind/src/preset.js

/**
 * Shared Tailwind CSS preset for all ManaCore apps
 *
 * This preset uses HSL-based CSS variables for theming.
 * Colors are defined as HSL values (e.g., "47 95% 58%") and
 * wrapped with hsl() in the Tailwind config for flexibility.
 *
 * Usage in tailwind.config.js:
 * ```
 * import preset from '@manacore/shared-tailwind/preset';
 *
 * export default {
 *   presets: [preset],
 *   content: ['./src/**\/*.{html,js,svelte,ts}'],
 *   // app-specific overrides...
 * }
 * ```
 */

/** @type {import('tailwindcss').Config} */
const preset = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Brand color (consistent across all apps)
        mana: '#4287f5',

        // ===== HSL-Based Semantic Colors =====
        // These use CSS variables set by @manacore/shared-theme
        // Format: hsl(var(--color-name)) where --color-name is "H S% L%"

        // Page background
        background: 'hsl(var(--color-background))',

        // Main text color
        foreground: 'hsl(var(--color-foreground))',

        // Primary brand color (customizable per app)
        primary: {
          DEFAULT: 'hsl(var(--color-primary))',
          foreground: 'hsl(var(--color-primary-foreground))',
        },

        // Secondary accent
        secondary: {
          DEFAULT: 'hsl(var(--color-secondary))',
          foreground: 'hsl(var(--color-secondary-foreground))',
        },

        // Card/content surfaces
        surface: {
          DEFAULT: 'hsl(var(--color-surface))',
          hover: 'hsl(var(--color-surface-hover))',
          elevated: 'hsl(var(--color-surface-elevated))',
        },

        // Muted/disabled elements
        muted: {
          DEFAULT: 'hsl(var(--color-muted))',
          foreground: 'hsl(var(--color-muted-foreground))',
        },

        // Borders
        border: {
          DEFAULT: 'hsl(var(--color-border))',
          strong: 'hsl(var(--color-border-strong))',
        },

        // Semantic/feedback colors
        error: 'hsl(var(--color-error))',
        success: 'hsl(var(--color-success))',
        warning: 'hsl(var(--color-warning))',

        // Form elements
        input: 'hsl(var(--color-input))',
        ring: 'hsl(var(--color-ring))',

        // ===== Legacy aliases (for backwards compatibility) =====
        content: {
          DEFAULT: 'hsl(var(--color-surface))',
          hover: 'hsl(var(--color-surface-hover))',
          page: 'hsl(var(--color-background))',
        },
        menu: {
          DEFAULT: 'hsl(var(--color-muted))',
          hover: 'hsl(var(--color-surface-hover))',
        },
        theme: {
          DEFAULT: 'hsl(var(--color-foreground))',
          secondary: 'hsl(var(--color-muted-foreground))',
        },
        'primary-btn': {
          DEFAULT: 'hsl(var(--color-primary))',
          text: 'hsl(var(--color-primary-foreground))',
        },
      },

      // Border radius tokens (CSS variable support)
      borderRadius: {
        'none': '0',
        'sm': 'var(--radius-sm, 0.25rem)',
        DEFAULT: 'var(--radius, 0.375rem)',
        'md': 'var(--radius-md, 0.5rem)',
        'lg': 'var(--radius-lg, 0.75rem)',
        'xl': 'var(--radius-xl, 1rem)',
        '2xl': 'var(--radius-2xl, 1.5rem)',
        '3xl': 'var(--radius-3xl, 2rem)',
        'full': '9999px',
      },

      // Box shadow tokens
      boxShadow: {
        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
        'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
        'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
        'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
        '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
        'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
        'none': 'none',
      },

      // Font family
      fontFamily: {
        sans: [
          'Inter',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'Helvetica Neue',
          'Arial',
          'sans-serif',
        ],
        mono: [
          'JetBrains Mono',
          'Fira Code',
          'Menlo',
          'Monaco',
          'Consolas',
          'monospace',
        ],
      },

      // Animation
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'bounce-slow': 'bounce 2s infinite',
        'fade-in': 'fadeIn 0.2s ease-out',
        'fade-out': 'fadeOut 0.2s ease-in',
        'slide-in': 'slideIn 0.2s ease-out',
        'slide-out': 'slideOut 0.2s ease-in',
      },

      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeOut: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
        slideIn: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideOut: {
          '0%': { transform: 'translateY(0)', opacity: '1' },
          '100%': { transform: 'translateY(-10px)', opacity: '0' },
        },
      },

      // Transition
      transitionDuration: {
        '250': '250ms',
        '350': '350ms',
        '400': '400ms',
      },
    },
  },
  plugins: [],
};

export default preset;