# UI Enhancement Rules

This document outlines the standard UI enhancement patterns to be followed across all components in the application.

## 1. ThemeService Integration

All styling must use ThemeService variables instead of hardcoded colors or values:
- Use `var(--theme-primary)`, `var(--theme-accent)`, etc. for colors
- Use `var(--theme-font-primary)`, `var(--theme-font-secondary)` for fonts
- Use `var(--theme-surface)`, `var(--theme-background)` for backgrounds
- Use `var(--theme-text)`, `var(--theme-text-secondary)` for text colors

## 2. Modern Component Layout

### Hero Section
- Implement a hero section with gradient background:
  ```scss
  .component-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    color: white;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  ```

### Container Styling
- Use consistent container styling with rounded corners and shadows:
  ```scss
  .component-container {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
  }
  ```

## 3. Button Styling

Use the standardized button classes with ThemeService integration:

### Base Button Class
```scss
.sq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 200ms ease-out;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-family: var(--theme-font-primary);
  z-index: 1;
}
```

### Button Variants
- Primary: `.sq-btn.sq-btn-primary` (gradient background)
- Outline: `.sq-btn.sq-btn-outline` (transparent background with border)
- Error: `.sq-btn.sq-btn-error` (error color styling)
- Ghost: `.sq-btn.sq-btn-ghost` (minimal styling)

### Button Sizes
- Small: `.sq-btn.sq-btn-sm`
- Medium: `.sq-btn.sq-btn-md`
- Large: `.sq-btn.sq-btn-lg`

## 4. Form Enhancement

### Form Labels
```scss
.sq-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-text);
  margin-bottom: 8px;
  font-family: var(--theme-font-primary);
}
```

### Form Inputs
```scss
.sq-form-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--theme-text);
  background: var(--theme-surface);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: all 200ms ease-out;
}
```

## 5. Card-Based Design

Implement responsive card layouts for data display:
```scss
.sq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.sq-card-item {
  background: var(--theme-surface);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 200ms ease-out;
}
```

## 6. Modal Enhancement

Enhance modals with consistent styling:
- Gradient headers
- Proper padding
- Consistent footer styling
- ThemeService integration for all elements

## 7. Data Grid Enhancement

Improve data grids with:
- Custom column styling
- Enhanced row hover effects
- Better pagination styling
- Consistent action overflow menus

## 8. Responsive Design

Ensure all components are responsive:
- Mobile-first approach
- Flexible grid layouts
- Appropriate breakpoints
- Touch-friendly elements

## 9. Typography

Use consistent typography with ThemeService:
- Primary font for general text: `var(--theme-font-primary)`
- Secondary font for headings: `var(--theme-font-secondary)`
- Proper font weights and sizes
- Consistent text colors

## 10. Spacing and Layout

Follow consistent spacing rules:
- 8px baseline grid
- Consistent padding and margins
- Proper visual hierarchy
- Balanced whitespace

## Implementation Checklist

When enhancing any component, ensure:
- [ ] ThemeService is used for all colors and fonts
- [ ] Hero section is implemented with gradient background
- [ ] All buttons use sq-btn classes with appropriate variants
- [ ] Forms are properly styled with consistent labels and inputs
- [ ] Card view is implemented for data display where appropriate
- [ ] Modals are enhanced with modern styling
- [ ] Data grids are customized with improved styling
- [ ] Component is fully responsive
- [ ] Typography follows ThemeService guidelines
- [ ] Spacing and layout follow the 8px grid system