Angular Extraction Patterns

Angular projects use a structured, convention-heavy approach to styling. Design systems often live in SCSS/CSS files with clear separation between global themes and component-scoped styles.

File Discovery Order

angular.json — Lists global style files under projects.*.architect.build.options.styles. These are the entry-point CSS/SCSS files.
src/styles.scss / src/styles.css — Global stylesheet. CSS custom properties, font imports, and base styles live here.
src/theme.scss / src/theme/ — Explicit theme directory. Custom Material/component palettes.
tailwind.config.js (if Tailwind) — Same extraction as React.
src/app/app.component.scss — Root component styles, reveals global layout patterns.
Component .scss / .css files — Co-located styles (ViewEncapsulation scoped by default).

Angular Material Theme Extraction

Angular Material is the most common component library. Themes are SCSS-based:

// src/theme.scss
@use '@angular/material' as mat;

$primary-palette: mat.m2-define-palette(mat.$m2-teal-palette, 800);
$accent-palette: mat.m2-define-palette(mat.$m2-blue-grey-palette);
$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);

$theme: mat.m2-define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette,
  ),
  typography: mat.m2-define-typography-config(
    $font-family: 'Manrope, sans-serif',
    $headline-1: mat.m2-define-typography-level(3.5rem, 4rem, 600),
    $headline-5: mat.m2-define-typography-level(1.5rem, 2rem, 500),
    $body-1: mat.m2-define-typography-level(1rem, 1.7, 400),
  ),
));

@include mat.all-component-themes($theme);

What to extract:

Palette choices → map to functional color roles
Typography config → maps directly to the hierarchy section
Light vs dark theme → atmosphere

For Angular Material 3 (MDC-based), look for mat.define-theme() using the new token system with --mat-* CSS custom properties.

SCSS Variable Patterns

Many Angular projects use SCSS variables for tokens:

// _variables.scss
$color-primary: #294056;
$color-background: #FCFAFA;
$color-surface: #F5F5F5;
$color-text: #2C2C2C;

$font-heading: 'Manrope', sans-serif;
$font-body: 'Inter', sans-serif;

$radius-button: 8px;
$radius-card: 12px;

$breakpoint-mobile: 768px;
$breakpoint-desktop: 1024px;

$spacing-section: 5rem;
$spacing-component: 2rem;

These are explicit design tokens. Map them directly.

ViewEncapsulation and Scoped Styles

Angular scopes styles by default (similar to Vue's scoped). When scanning component styles:

Look for :host selectors — these style the component's root element
::ng-deep (deprecated but still used) — styles that pierce encapsulation
Repeated values across components indicate design system conventions

PrimeNG / Nebular / NG-ZORRO

If component libraries are used:

PrimeNG: Theme SCSS in node_modules/primeng/resources/themes/ — look for custom theme or styles.scss overrides.
Nebular: nb-theme() in styles.scss with custom theme object.
NG-ZORRO (Ant Design for Angular): ng-zorro-antd.less variables or custom theme config in angular.json.

Responsive Patterns

Check for:

@media queries in styles.scss and component styles
Angular CDK BreakpointObserver usage in components
Tailwind responsive prefixes if Tailwind is configured
Angular Flex-Layout directives (fxLayout, fxFlex) in templates

3.5 KiB Raw Permalink Blame History