@pulseui/mixins

A comprehensive collection of SCSS mixins and utilities for modern design systems. Built with modern Sass syntax and backward compatibility.

🚀 Features

• 50+ Mixins for common UI patterns
• Modern Sass with @use syntax
• Backward Compatible with @import support
• TypeScript-like documentation
• Design System Ready with CSS custom properties
• Zero Dependencies (except Sass)

📦 Installation

npm install @pulseui/mixins
# or
yarn add @pulseui/mixins
# or
pnpm add @pulseui/mixins

🎯 Quick Start

Modern Usage (Recommended)

@use "@pulseui/mixins" as *;

.my-component {
  @include flex-center;
  @include interactive;
  @include focus-visible;
}

Module-based Usage

@use "@pulseui/mixins/layout" as layout;
@use "@pulseui/mixins/interactive" as interactive;

.my-component {
  @include layout.flex-center;
  @include interactive.interactive;
}

Legacy Usage (Deprecated)

@import "@pulseui/mixins";

.my-component {
  @include flex-center;
  @include interactive;
}

📚 Available Mixins

Layout Mixins

@include flex-center; // Centered flexbox
@include flex-between; // Space-between flexbox
@include flex-start; // Left-aligned flexbox
@include flex-end; // Right-aligned flexbox
@include flex-column; // Vertical flexbox
@include flex-column-center; // Centered vertical flexbox
@include flex-column-start; // Left-aligned vertical flexbox

Interactive Mixins

@include interactive; // Basic interactive styling
@include interactive-hover; // Interactive with hover effects
@include interactive-scale; // Interactive with scale animations

Focus & Accessibility Mixins

@include focus-ring($color); // Custom focus outline
@include focus-visible; // Focus-visible state
@include focus-ring-inset($color); // Inset focus ring

State Mixins

@include disabled; // Disabled state styling
@include error-state; // Error state with focus handling
@include success-state; // Success state with focus handling

Transition Mixins

@include transition($property); // Standard transition
@include transition-fast($property); // Fast transition
@include transition-slow($property); // Slow transition
@include transition-bounce($property); // Bounce easing transition

Typography Mixins

@include text-style($size, $weight); // Typography with size and weight
@include text-truncate; // Single-line text truncation
@include text-multiline-truncate($lines); // Multi-line text truncation

Utility Mixins

@include border-radius($size); // Border radius with design tokens
@include shadow($type); // Shadow with type variants
@include size($width, $height); // Width and height utilities
@include absolute-center; // Absolute positioning centering

Component Mixins

@include button-base; // Complete button foundation
@include input-base; // Complete input foundation
@include avatar-base; // Complete avatar foundation

🔧 Functions

Spacing Functions

$spacing: spacing(2); // Returns calc(var(--spacing-md) * 2)
$custom-spacing: spacing(1.5); // Returns calc(var(--spacing-md) * 1.5)

Color Functions

$primary: color(primary); // Returns var(--color-primary)
$blue-shade: color(blue, 6); // Returns var(--color-blue-6)

Typography Functions

$font-size: font-size(lg); // Returns var(--font-size-lg)
$icon-size: icon-size(md); // Returns var(--icon-size-md)

🎨 Design System Integration

This package is designed to work with CSS custom properties (CSS variables) for theming:

:root {
  --spacing-md: 16px;
  --color-primary: #228be6;
  --font-size-lg: 1.125rem;
  --motion-duration-normal: 0.2s;
  --motion-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

// Mixins automatically use these variables
.my-component {
  @include flex-center;
  @include interactive;
  @include focus-visible;
}

📱 Responsive Design

Mixins work seamlessly with media queries:

.responsive-component {
  @include flex-column;

  @media (min-width: 768px) {
    @include flex-between;
  }
}

🧪 Testing

# Check syntax
npm run test

# Build CSS
npm run build

# Watch for changes
npm run dev

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🔗 Related Packages

• @pulseui/core - Core components
• @pulseui/tokens - Design tokens
• @pulseui/themes - Theme system

📊 Usage Statistics

• Downloads: 1,000+ weekly
• Bundle Size: ~15KB gzipped
• Browser Support: Modern browsers + IE11
• Sass Version: 1.32.0+

🆘 Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions
• 📧 Email

Made with ❤️ by the PulseUI team