184 lines
4.7 KiB
Markdown
184 lines
4.7 KiB
Markdown
|
# 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
|