Karun Mall Design System

A comprehensive React component library and design system for Karun Mall applications. Built with React, SCSS, and MUI integration.

📦 Installation

bash
npm install karunmall-design-system || npm i static.karunmall.com/public/karunmall-design-system/karunmall-design-system-[Version].tgz

Peer Dependencies

This package requires the following peer dependencies:

bash
npm install react@^18.0.0 || ^19.0.0 react-dom@^18.0.0 || ^19.0.0 @emotion/react @emotion/styled @mui/icons-material @mui/material

🚀 Quick Start

jsx
import { Button, InputField, SwitchToggle, CheckBox, ThemeManager, Brands, Mapped, Alias } from 'karunmall-design-system';
import 'karunmall-design-system/dist/index.css';

function App() {
  return (
    <div>
      <Button variant="fill" size="small">Click Me</Button>
      <InputField label="Email" placeholder="Enter your email" />
      <SwitchToggle checked={false} onChange={(val) => console.log(val)} />
      <CheckBox type="unselected" />
    </div>
  );
}

🎨 Design Tokens

Brands Color Palette

The Brands token contains raw color values organized by color name and scale.

jsx
import { Brands } from 'karunmall-design-system';

// Access colors
Brands.Purple[500] // #9A65B2
Brands.Blue[700]   // #0047D8

Available Brands

| Brand | Scale | Colors | |-------|-------|--------| | Neutral | 0, 50, 100-900 | Grayscale palette | | Purple | 100-900 | Purple tones | | Blue | 100-900 | Blue tones | | Peach | 100-900 | Peach/Orange tones | | Violet | 100-950 | Violet tones | | Red | 100-900 | Red tones | | Green | 100-900 | Green tones | | Orange | 100-900 | Orange tones | | Cyan | 100-900 | Cyan tones | | Yellow | 50, 100-900 | Yellow tones | | Mint | 100-900 | Mint green tones |

Theme Manager

The ThemeManager provides theme configuration capabilities.

jsx
import { ThemeManager } from 'karunmall-design-system';

// Configure custom theme
const customTheme = {
  primary: '#6200ea',
  // ... other theme values
};

<ThemeManager theme={customTheme}>
  <App />
</ThemeManager>

Export Summary

| Export | Description | |--------|-------------| | Button | Button component | | InputField | Input/Textarea component | | SwitchToggle | Toggle switch component | | CheckBox | Checkbox component | | ThemeManager | Theme provider component | | Brands | Raw color palettes | | Alias | Semantic color mappings | | Mapped | Ready-to-use color schema |

Build & Development

File manage Tokens you need

import React, { useMemo, useEffect } from 'react';
import { ThemeManager, baseTokens } from 'karunmall-design-system';

export function ThemeProvider({ userTokens = {}, children }) {
  const theme = useMemo(() => ThemeManager(userTokens), [userTokens]);
  useEffect(() => {}, [theme]); // فقط برای effectهای جانبی اگر نیاز هست
  return children;
}

🐛 Support

For issues and feature requests, please contact the development team.

with ❤️ by Karun Mall Team