angular-styling

Angular Styling

Prismatic Angular (Org Default)

@Vensure-Devops-QA/prismatic-angular is the organization's default UI library for Angular projects. Use it before reaching for Angular Material or other libraries.

Installation

npm install @Vensure-Devops-QA/prismatic-angular

Setup

// app.config.ts
import { providePrismatic } from '@Vensure-Devops-QA/prismatic-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrismatic({ theme: 'light' }),
  ],
};

Import the global token stylesheet in styles.scss:

@use '@Vensure-Devops-QA/prismatic-angular/tokens' as tokens;
@use '@Vensure-Devops-QA/prismatic-angular/base';

Using Prismatic Components

import { PrismaticButtonModule, PrismaticInputModule } from '@Vensure-Devops-QA/prismatic-angular';

@Component({
  standalone: true,
  imports: [PrismaticButtonModule, PrismaticInputModule],
  template: `
    <prs-input label="Email" [(ngModel)]="email" type="email" />
    <prs-button variant="primary" (click)="submit()">Submit</prs-button>
  `,
})
export class LoginFormComponent {
  email = signal('');
  submit() { /* ... */ }
}

Prismatic Design Tokens

Reference design tokens via CSS custom properties. Do not hard-code colors, spacing, or typography values — always use tokens.

.card {
  background: var(--prs-color-surface-default);
  border: 1px solid var(--prs-color-border-default);
  border-radius: var(--prs-radius-md);
  padding: var(--prs-spacing-4);
  color: var(--prs-color-text-primary);
  font-family: var(--prs-font-family-base);
}

.card__title {
  font-size: var(--prs-font-size-lg);
  font-weight: var(--prs-font-weight-semibold);
  margin-bottom: var(--prs-spacing-2);
}

Angular Material

Use Angular Material when Prismatic does not cover a needed component.

Setup

ng add @angular/material

// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimationsAsync()],
};

Theming

Define a custom theme in styles.scss:

@use '@angular/material' as mat;

// Define typography
$my-typography: mat.define-typography-config(
  $font-family: 'Inter, sans-serif',
);

// Define palette
$my-primary: mat.define-palette(mat.$indigo-palette, 600);
$my-accent:  mat.define-palette(mat.$pink-palette, A200);

// Build theme
$my-theme: mat.define-light-theme((
  color: (primary: $my-primary, accent: $my-accent),
  typography: $my-typography,
  density: 0,
));

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

Component Usage

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  standalone: true,
  imports: [MatButtonModule, MatInputModule, MatFormFieldModule, ReactiveFormsModule],
  template: `
    <mat-form-field appearance="outline">
      <mat-label>Email</mat-label>
      <input matInput type="email" [formControl]="emailControl" />
    </mat-form-field>
    <button mat-raised-button color="primary" (click)="submit()">
      Submit
    </button>
  `,
})
export class FormComponent { }

Angular CDK

Use CDK for behavior without pre-styled components (overlays, drag-and-drop, virtual scrolling, a11y).

import { DragDropModule } from '@angular/cdk/drag-drop';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { A11yModule } from '@angular/cdk/a11y';

Bootstrap with ng-bootstrap

For projects using Bootstrap as the CSS framework, use ng-bootstrap for Angular-native components.

npm install @ng-bootstrap/ng-bootstrap bootstrap

// app.config.ts
import { provideNgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';

// Import Bootstrap SCSS in styles.scss

// styles.scss
@import 'bootstrap/scss/bootstrap';

import { NgbModalModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

SCSS Scoped Styles

Each component has its own scoped SCSS file. Angular's view encapsulation prevents style leakage by default.

Component styleUrl

@Component({
  selector: 'app-product-card',
  standalone: true,
  templateUrl: './product-card.component.html',
  styleUrl: './product-card.component.scss',
})
export class ProductCardComponent { }

Best Practices

// product-card.component.scss

// Use CSS custom properties for values that vary (theming, states)
:host {
  display: block;
  --card-border-color: var(--prs-color-border-default);
}

// Host-context modifier
:host([variant='featured']) {
  --card-border-color: var(--prs-color-brand-primary);
}

.product-card {
  border: 1px solid var(--card-border-color);
  padding: var(--prs-spacing-4);
}

.product-card__title {
  font-size: var(--prs-font-size-lg);
}

Avoid ::ng-deep

::ng-deep pierces the view encapsulation boundary and causes global style leaks. It is deprecated.

Instead of ::ng-deep, prefer:

1. Providing a CSS custom property that the child component exposes
2. Using the ViewEncapsulation.None option only on layout/wrapper components with global scope intent
3. Styling via global styles.scss using the component's public selector

// BAD — do not do this
::ng-deep .mat-mdc-form-field { border-radius: 8px; }

// GOOD — override via CSS custom property (if the library exposes it)
.my-form {
  --mdc-outlined-text-field-container-shape: 8px;
}

ViewEncapsulation

Mode	Behavior	When to Use
Emulated (default)	Adds attribute selectors to scope styles	Most components
ShadowDom	Uses native Shadow DOM	Web components, max isolation
None	No encapsulation, global styles	Layout shells, global theme wrappers

@Component({
  encapsulation: ViewEncapsulation.None,  // only when truly needed
  ...
})

Tailwind with Angular

For projects using Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: { extend: {} },
  plugins: [],
};

/* styles.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

Combine Tailwind utilities with Prismatic tokens:

<div class="flex flex-col gap-4 p-6 rounded-lg"
     style="background: var(--prs-color-surface-default)">
  <h2 class="text-xl font-semibold" style="color: var(--prs-color-text-primary)">
    Title
  </h2>
</div>

Do not mix Tailwind color utilities with Prismatic color tokens on the same element — use one system per project. Prefer Prismatic tokens when both are available.

Responsive Design

Use CSS custom properties and media queries for responsive layouts. Angular CDK BreakpointObserver for programmatic breakpoint detection.

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({ standalone: true, ... })
export class AppShellComponent {
  private breakpointObserver = inject(BreakpointObserver);

  isMobile = toSignal(
    this.breakpointObserver.observe([Breakpoints.Handset]).pipe(
      map(result => result.matches)
    ),
    { initialValue: false }
  );
}

<app-sidebar *ngIf="!isMobile()" />
<app-bottom-nav *ngIf="isMobile()" />

SCSS Responsive Helpers

// _breakpoints.scss
$bp-sm: 640px;
$bp-md: 768px;
$bp-lg: 1024px;
$bp-xl: 1280px;

@mixin respond-to($bp) {
  @media (min-width: $bp) { @content; }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;

  @include respond-to($bp-md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include respond-to($bp-lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Theming with CSS Custom Properties

Support light/dark modes and org-level theming via CSS custom properties.

Theme Variables

// styles.scss — base theme (light)
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-brand: #6366f1;
  --color-border: #e5e7eb;
}

// Dark mode
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #0f0f0f;
    --color-bg-secondary: #1a1a1a;
    --color-text-primary: #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-brand: #818cf8;
    --color-border: #374151;
  }
}

// Class-based theme switching
.theme-dark {
  --color-bg-primary: #0f0f0f;
  // ...
}

Theme Service

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private theme = signal<'light' | 'dark'>('light');
  readonly currentTheme = this.theme.asReadonly();

  toggleTheme() {
    const next = this.theme() === 'light' ? 'dark' : 'light';
    this.theme.set(next);
    document.documentElement.className = `theme-${next}`;
    localStorage.setItem('theme', next);
  }

  initTheme() {
    const saved = localStorage.getItem('theme') as 'light' | 'dark' | null;
    const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    const theme = saved ?? preferred;
    this.theme.set(theme);
    document.documentElement.className = `theme-${theme}`;
  }
}