authsec_angular_clarity_modern/frontend/angular-clarity-master/UI_ENHANCEMENT_RULES.md

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:

  .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:

  .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

.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

.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

.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:

.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