Styling Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/app/styles/shared-styles.less
• marketplace-frontend/src/app/styles/common/colors.less
• marketplace-frontend/src/app/styles/common/media.less
• marketplace-frontend/src/app/styles/material/material-override.less
• marketplace-frontend/src/styles.less
• marketplace-frontend/angular.json
• marketplace-frontend/src/app/app.component.less

The Styling Architecture of the Marketplace project centralizes design definitions using LESS (Leaner Style Sheets). The system organizes styles into global resets, variable-driven themes, responsive media queries, and component-specific overrides to ensure visual consistency across the frontend application.

Core Hierarchy and Organization

The application entry point for styles is defined in the Angular configuration, which loads a main stylesheet that imports all other architectural layers.

The hierarchy ensures that variables and mixins are available to components and overrides.
Sources: marketplace-frontend/angular.json:28, marketplace-frontend/src/styles.less:1-5, marketplace-frontend/src/app/styles/shared-styles.less:1-17

Style Entry Points

File	Role
angular.json	Configures src/styles.less as the global style array for the build process.
styles.less	Acts as the main manifest; imports third-party themes and the shared architecture.
shared-styles.less	Aggregates all project-specific LESS imports including colors, media, and fonts.

Sources: marketplace-frontend/angular.json:27-29, marketplace-frontend/src/styles.less:1-5, marketplace-frontend/src/app/styles/shared-styles.less:1-17

Variable and Theme Management

The architecture uses LESS variables to maintain a consistent color palette and layout measurements. This allows for rapid theme updates across the entire UI.

Color Palette

Colors are centralized and referenced by semantic or descriptive names within component styles.

• Backgrounds: Uses @light-grey for the main body background.
• Scrollbars: Uses @grey and @mid-grey for scrollbar tracks and thumbs.
• Typography: Defaults text to @black or @white depending on the container (e.g., headers/footers).

Sources: marketplace-frontend/src/styles.less:22, marketplace-frontend/src/styles.less:92-99, marketplace-frontend/src/app/styles/shared-styles.less:8

Layout Constants

Constants like @header-height manage spatial relationships between fixed elements like the header and the main content area. For example, the mat-drawer-container uses this variable to set its top inset.
Sources: marketplace-frontend/src/app/app.component.less:41, marketplace-frontend/src/app/styles/shared-components/market-header.less:11

Responsive Design Framework

Media queries are abstracted into variables within media.less. This allows developers to use semantic names like @xsmall or @large instead of hardcoded pixel values in their component LESS files.

Variable	Media Query Definition	Target
@xsmall	max-width: 599px	Mobile handsets
@small	min-width: 600px and max-width: 959px	Tablets
@medium	min-width: 960px and max-width: 1279px	Small Laptops
@large	min-width: 1280px	Desktops

Sources: marketplace-frontend/src/app/styles/common/media.less:1-18

Responsive Implementation

Components implement these queries to adjust layout properties, such as the sidenav width which shrinks from 300px to 256px on @xsmall screens.
Sources: marketplace-frontend/src/app/app.component.less:12-15

Component Styling and Overrides

The architecture distinguishes between global base styles, shared component styles, and Angular Material overrides.

Global Base Styles

The styles.less file defines the default look for HTML elements:

• Typography: Sets font-size: 16px and line-height: 24px on the body.
• Headings: Standardizes h1 through h4 with specific font sizes (48px to 24px).
• Box Model: Applies box-sizing: border-box to all elements.

Sources: marketplace-frontend/src/styles.less:7-80

Angular Material Overrides

Material components are customized to fit the project's design language. The layout specifically overrides the behavior of mat-drawer and mat-drawer-content to integrate with the fixed header.

Summary

The Styling Architecture provides a scalable foundation by separating concerns into variables, common utilities, and specific component styles. By utilizing LESS imports and centralized configuration, it maintains strict visual consistency while allowing for responsive adjustments across different device sizes.