Setting the file. One moment.
Skill 07 · Stitch::extract Design Md
Subchapter 7.1
references/angular.mdMarkdown5 KBView on GitHub
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.
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 (tailwind.config.js or Tailwind v4 @theme {}) — For Tailwind v3, read tailwind.config.js. For Tailwind v4, inspect @theme {} blocks, @custom-variant, and @plugin 'tailwindcss-primeui' in your global CSS/SCSS (e.g. src/styles.css or src/assets/tailwind.css) for CSS custom property tokens (--color-*, --font-*, --text-*, --breakpoint-*).
src/app/app.component.scss — Root component styles, reveals global
layout patterns.
Component .scss / .css files — Co-located styles (ViewEncapsulation
scoped by default).
External Template .html files (src/app/**/*.component.html) — Essential for Angular 17+ standalone components using Tailwind CSS utility classes (bg-*, text-*, p-*, rounded-*) or structural class bindings ([ngClass], [class.*]). Always inspect .html templates when styling uses utility classes.
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:
For Angular Material 3 (MDC-based), look for mat.define-theme() using
the new token system with --mat-* CSS custom properties.
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.
Angular scopes styles by default (similar to Vue’s scoped). When scanning
component styles:
:host selectors — these style the component’s root element::ng-deep (deprecated but still used) — styles that pierce encapsulationIf component libraries are used:
src/app.config.ts (e.g., providePrimeNG({ theme: { preset: Aura, options: { darkModeSelector: '.app-dark' } } })). Check for Tailwind v4 integration via @plugin 'tailwindcss-primeui' in CSS assets. Inspect CSS custom properties defined by PrimeNG tokens (--primary-color, --surface-*).nb-theme() in styles.scss with custom theme object.ng-zorro-antd.less variables
or custom theme config in angular.json.In modern Angular repositories:
@Component({ standalone: true })): Components import their own dependencies directly without NgModules. Inspect templateUrl and styleUrl(s) in component metadata to locate the template and style files.@if, @for, @switch): Notice how conditional layouts and lists are structured in .html templates when analyzing component density and spacing rules.signal(), input(), computed(), provideZonelessChangeDetection()): Dynamic styling or theme toggling is often driven by signals bound to [class.dark] or custom CSS classes in templates. Notice app.config.ts for app-wide providers.Check for:
@media queries in styles.scss and component stylesBreakpointObserver usage in componentsfxLayout, fxFlex) in templates