# ERP UI Library - Styles

This directory contains all the SCSS/CSS styles for the ERP UI Library.

## Structure

```
styles/
├── sass/                  # Core SCSS files
│   ├── _variables.scss   # Color palette, fonts, and design tokens
│   ├── _mixins.scss      # Reusable SCSS mixins (flexbox, media queries, etc.)
│   ├── _utils.scss       # Utility classes (spacing, layout, typography)
│   ├── _animations.scss  # Keyframe animations
│   └── main.scss         # Main entry point that imports all core files
├── css/
│   └── reset.css         # CSS reset (imports normalize.css)
├── variables.scss        # Export file for variables
├── mixins.scss          # Export file for mixins
├── utils.scss           # Export file for utilities
├── animations.scss      # Export file for animations
├── all.scss             # Export file for all SCSS features
└── index.ts             # TypeScript entry point that bundles all styles
```

## Usage in Consuming Applications

### 1. Import Compiled CSS

The simplest way to use the library styles:

```typescript
// In your main application file (e.g., main.tsx or App.tsx)
import '@erpforce/common/style.css';
```

This imports the complete bundled CSS with all component styles and utilities.

### 2. Use SCSS Variables in Your Application

If you want to use the same design tokens (colors, fonts, etc.) in your SCSS files:

```scss
// In your .scss file
@import '@erpforce/common/styles/variables';

.my-component {
  background-color: $primary-500;
  color: $neutral-900;
  font-family: $main_font;
}
```

### 3. Use SCSS Mixins

Access responsive breakpoints and other mixins:

```scss
// In your .scss file
@import '@erpforce/common/styles/mixins';

.my-responsive-component {
  display: flex;
  
  @include media-md {
    flex-direction: column;
  }
  
  @include flex(center, space-between, row);
}
```

### 4. Use Utility Classes

The library includes Bootstrap-like utility classes:

```scss
// In your .scss file
@import '@erpforce/common/styles/utils';
```

Then in your JSX:

```tsx
<div className="d-flex justify-content-center align-items-center mb-2">
  <span className="s2 bold">Hello World</span>
</div>
```

### 5. Use Animations

Access predefined animations:

```scss
// In your .scss file
@import '@erpforce/common/styles/animations';

.my-animated-element {
  animation: textfadein 0.3s ease-in;
}
```

### 6. Import Everything

If you need access to all SCSS features:

```scss
// In your .scss file
@import '@erpforce/common/styles/all';
```

## Available Design Tokens

### Color Palette

- **Primary Colors**: `$primary-100` to `$primary-1000`
- **Green Colors**: `$green-100` to `$green-1000`
- **Light Green**: `$lightGreen-100` to `$lightGreen-1000`
- **Olive**: `$olive-100` to `$olive-1000`
- **Magenta**: `$magenta-100` to `$magenta-1000`
- **Blue**: `$blue-100` to `$blue-1000`
- **Neutral**: `$neutral-100` to `$neutral-1000`
- **Red**: `$red-100` to `$red-1000`
- **Error**: `$error-100` to `$error-1000`

### Typography

- **Fonts**: `$main_font`, `$secondary_font`, `$tertiary_font`

## Available Mixins

### Flexbox

```scss
@include flex($align, $justify, $direction);
```

### Transitions

```scss
@include transition($time, $motion);
```

### Animations

```scss
@include animate($time, $motion, $delay, $count, $direction, $fillmode, $state, $name);
```

### Center Element

```scss
@include center; // Absolutely centers element
```

### Disable Scrollbar

```scss
@include disableScroll;
```

### Responsive Breakpoints

- `@include media-xss` - max-width: 320px
- `@include media-ss` - max-width: 360px
- `@include media-sm` - max-width: 395px
- `@include media-sl` - max-width: 450px
- `@include media-md` - max-width: 812px
- `@include media-ml` - max-width: 1112px
- `@include media-l` - max-width: 1440px
- `@include media-xl` - max-width: 1600px
- `@include media-xxl` - max-width: 1920px

## Utility Classes

### Spacing

**Padding:**
- `.p-0`, `.pt-0`, `.pb-0`, `.pl-0`, `.pr-0` (0px)
- `.pt-1`, `.pb-1`, `.pl-1`, `.pr-1` (0.625rem / 10px)
- `.pb-2`, `.pr-2`, `.pl-2` (1.25rem / 20px)

**Margin:**
- `.m-0`, `.mt-0`, `.mb-0`, `.ml-0`, `.mr-0` (0px)
- `.mt-1`, `.mb-1`, `.ml-1`, `.mr-1` (0.625rem / 10px)
- `.mt-2`, `.mb-2`, `.mr-2` (1.25rem / 20px)

### Display & Flexbox

- `.d-flex` - display: flex
- `.justify-content-center`, `.jc-start`, `.jc-end`, `.jc-space-between`
- `.align-items-center`, `.ai-start`, `.ai-center`
- `.flex-direction-column`, `.fd-col`, `.fd-column`

### Text Alignment

- `.text-center`
- `.text-left`
- `.text-right`

### Width & Height

- `.w-25`, `.w-40`, `.w-50`, `.w-60`, `.w-100`
- `.h-100`, `.vh-100`

### Grid System

- `.row`
- `.col`, `.col-3`, `.col-4`, `.col-5`, `.col-6`, `.col-7`, `.col-8`, `.col-9`

### Typography

**Headings:**
- `.h1` (1.75rem / 28px)
- `.h2` (1.5rem / 24px)
- `.h3` (1.25rem / 20px)
- `.h4` (1.125rem / 18px)
- `.h5` (1rem / 16px)

**Body Text:**
- `.s1` (1.125rem / 18px)
- `.s2` (1rem / 16px)
- `.s3` (0.875rem / 14px)
- `.s4` (0.8125rem / 13px)
- `.s5` (0.75rem / 12px)

**Font Weight:**
- `.normal` (400)
- `.medium` (500)
- `.bold` (600)

### States

- `.edisabled` - Makes element non-interactive with reduced opacity

## Animations

Available keyframe animations:

- `cardswipe`, `cardreverseswipe`
- `cardrotate`, `cardreverserotate`
- `tabletreversemoveup`
- `textfadein`
- `navbarexpand`, `navbarshrink`

Usage example:

```scss
.my-element {
  animation: textfadein 0.5s ease-out;
}
```

## Best Practices

1. **Import Only What You Need**: Instead of importing `all.scss`, import specific files to reduce bundle size
2. **Use Utility Classes**: Leverage the utility classes for quick styling instead of writing custom CSS
3. **Follow Design System**: Use the provided color tokens and typography scale for consistency
4. **Responsive Design**: Use the provided media query mixins for consistent breakpoints
5. **Component-Specific Styles**: Keep component-specific styles in their respective component files

## Development

When adding new styles:

1. Add shared variables to `sass/_variables.scss`
2. Add reusable mixins to `sass/_mixins.scss`
3. Add utility classes to `sass/_utils.scss`
4. Add animations to `sass/_animations.scss`
5. Component-specific styles go in their respective component folders
6. Update `index.ts` if adding new component style files

## Build Process

The styles are processed during the build:

1. SCSS files are compiled to CSS
2. All component styles are bundled together
3. A single `style.css` file is output to `dist/`
4. Individual SCSS files remain available for import in consuming applications

## Notes

- The library uses `normalize.css` for consistent cross-browser styling
- All SCSS files use the Dart Sass syntax
- Media queries are mobile-first where applicable
- Colors follow a 100-1000 scale for consistent gradation