@dxtmisha/styles

🎨 SCSS styles and utilities for DXT UI design system. A comprehensive collection of mixins, variables, and utilities for building consistent user interfaces.


🚀 Installation

``bash
npm install @dxtmisha/styles
`

✨ Features

- 🎨 Comprehensive color system with utilities and mixins
- 📐 Flexible dimension and spacing utilities
- 🔤 Typography system with font utilities
- 📱 Responsive design with media query helpers
- 🎯 Flexbox utilities for modern layouts
- 🔧 SCSS mixins and functions
- 📦 Modular architecture - import only what you need
- ⚡ Tree-shaking support for optimization

📖 Quick Start

$3

`scss
@import '@dxtmisha/styles';
`

$3

`scss
@import '@dxtmisha/styles/properties';
`

$3

`vue



`

📚 Available modules

$3

`scss
@import '@dxtmisha/styles'; // All utilities and styles
`

$3

`scss
@import '@dxtmisha/styles/properties'; // Design system properties
`

The main import includes all available utilities:
- Color system and mixins
- Flexbox utilities
- Typography system
- Media query helpers
- Dimension and spacing utilities
- Content utilities
- CSS custom properties
- And more...

🛠️ Practical examples

$3

`scss
@import '@dxtmisha/styles';

.primary-button {
@include color(primary);
@include backgroundColor(primary);
@include backgroundAsColor;
}

.success-text {
@include color(success);
}
`

$3

`scss
@import '@dxtmisha/styles';

.container {
@include flex;
@include flexDirection(column);
@include justifyContent(center);
@include alignItems(center);
}
`

$3

`scss
@import '@dxtmisha/styles';

.responsive-grid {
display: grid;
grid-template-columns: 1fr;

@include media(md) {
grid-template-columns: repeat(2, 1fr);
}

@include media(lg) {
grid-template-columns: repeat(3, 1fr);
}
}
`

$3

`scss
@import '@dxtmisha/styles';

.heading {
@include font(displayLarge);
}

.body-text {
@include font(bodyMedium);
}

.caption {
@include font(labelSmall);
}
`

📊 Bundle information

| Import | Size | Description |
|--------|------|-------------|
| Main bundle | ~45KB | All utilities and styles |
| Properties | ~12KB | Design system properties only |

🔧 Requirements

- Node.js: ≥18.0.0
- Sass/SCSS: ≥1.50.0
- Build tool: Vite, Webpack, Parcel

📁 Export structure

`
@dxtmisha/styles
├── / # Main styles bundle (all utilities)
└── /properties # Design system properties
``

🤝 Compatibility

| Technology | Support |
|------------|---------|
| Vite | ✅ Full support |
| Webpack | ✅ Full support |
| Parcel | ✅ Full support |
| Vue.js | ✅ Recommended |
| React | ✅ Compatible |
| Angular | ✅ Compatible |

🌐 Browser Support

Modern browsers that support:
- CSS custom properties
- Flexbox
- CSS Grid

📄 License

MIT © dxtmisha@gmail.com

🔗 Links

- 📦 NPM Package
- 🏠 Homepage
- 🐛 Issues
- 📚 Repository