Theming & Styling

/**
 * Theme palette type for component coloring
 */
type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;

/**
 * Animation configuration interface
 */
interface AnimationsConfig {
  disabled?: boolean;
}

/**
 * Material animations injection token
 */
const MATERIAL_ANIMATIONS: InjectionToken<AnimationsConfig>;

/**
 * Animation curves constants (deprecated, use CSS variables)
 */
class AnimationCurves {
  static STANDARD_CURVE: string;
  static DECELERATION_CURVE: string;
  static ACCELERATION_CURVE: string;
  static SHARP_CURVE: string;
}

/**
 * Animation durations constants (deprecated, use CSS variables)
 */
class AnimationDurations {
  static COMPLEX: string;
  static ENTERING: string;
  static EXITING: string;
}

/**
 * Gets current animations state
 */
function _getAnimationsState(): boolean;

/**
 * Checks if animations are disabled
 */
function _animationsDisabled(): boolean;

/**
 * Ripple directive for adding Material Design ripple effects
 */
class MatRipple implements OnInit, OnDestroy, RippleTarget {
  @Input() matRippleRadius: number;
  @Input() matRippleColor: string;
  @Input() matRippleCentered: boolean;
  @Input() matRippleDisabled: boolean;
  @Input() matRippleUnbounded: boolean;
  @Input() matRippleTrigger: HTMLElement;
  @Input() matRippleAnimation: RippleAnimationConfig;
  
  readonly rippleConfig: RippleConfig;
  readonly rippleDisabled: boolean;
  
  launch(config?: RippleConfig): RippleRef;
  launch(x: number, y: number, config?: RippleConfig): RippleRef;
  fadeOutAll(): void;
  fadeOutAllNonPersistent(): void;
}

/**
 * Ripple reference for controlling individual ripples
 */
class RippleRef {
  readonly element: HTMLElement;
  readonly config: RippleConfig;
  readonly state: RippleState;
  
  fadeOut(): void;
}

/**
 * Ripple renderer for programmatic ripple creation
 */
class RippleRenderer implements EventListenerObject {
  constructor(
    private _target: RippleTarget,
    private _ngZone: NgZone,
    elementOrElementRef: Element | ElementRef<Element>,
    private _platform: Platform
  );
  
  fadeInRipple(x: number, y: number, config?: RippleConfig): RippleRef;
  fadeOutRipple(rippleRef: RippleRef): void;
  fadeOutAll(): void;
  fadeOutAllNonPersistent(): void;
  setupTriggerEvents(elementOrElementRef: Element | ElementRef<Element>): void;
  handleEvent(event: Event): void;
}

/**
 * Ripple target interface
 */
interface RippleTarget {
  rippleConfig: RippleConfig;
  rippleDisabled: boolean;
}

/**
 * Ripple configuration interface
 */
interface RippleConfig {
  color?: string;
  centered?: boolean;
  radius?: number;
  persistent?: boolean;
  animation?: RippleAnimationConfig;
  terminateOnPointerUp?: boolean;
}

/**
 * Ripple animation configuration
 */
interface RippleAnimationConfig {
  enterDuration?: number;
  exitDuration?: number;
}

/**
 * Default ripple animation configuration
 */
const defaultRippleAnimationConfig: RippleAnimationConfig;

/**
 * Ripple state enum
 */
enum RippleState {
  FADING_IN,
  VISIBLE,
  FADING_OUT,
  HIDDEN
}

/**
 * Ripple module
 */
class MatRippleModule {
  // NgModule for ripple functionality
}

/**
 * Common module with shared Material functionality
 */
class MatCommonModule {
  constructor(highContrastModeDetector: HighContrastModeDetector);
  
  // Shared functionality for all Material components
}

/**
 * Version information
 */
const VERSION: Version;

/**
 * Sanity checks configuration
 */
type SanityChecks = boolean | GranularSanityChecks;

/**
 * Granular sanity checks configuration
 */
interface GranularSanityChecks {
  doctype: boolean;
  theme: boolean;
  version: boolean;
}

/**
 * Material sanity checks injection token
 */
const MATERIAL_SANITY_CHECKS: InjectionToken<SanityChecks>;

/**
 * Error state tracker utility
 */
class _ErrorStateTracker {
  readonly errorState: boolean;
  
  constructor(
    private _parentForm: NgForm | FormGroupDirective | null,
    private _parentFormGroup: FormGroupDirective | null,
    private _defaultMatcher: ErrorStateMatcher | null,
    public ngControl: NgControl | null
  );
}

/**
 * Error state matcher interface
 */
interface ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean;
}

/**
 * Show on dirty error state matcher
 */
class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean;
}

/**
 * Error state matcher injection token
 */
const MAT_ERROR_GLOBAL_OPTIONS: InjectionToken<ErrorStateMatcher>;

/**
 * Default error state matcher injection token  
 */
const ErrorStateMatcher: InjectionToken<ErrorStateMatcher>;

// Core theming mixins
@mixin mat.core($typography-config);
@mixin mat.all-component-themes($theme);
@mixin mat.all-component-colors($theme);
@mixin mat.all-component-typographies($typography-config);
@mixin mat.all-component-densities($density-config);

// Theme creation functions
@function mat.define-light-theme($primary, $accent, $warn);
@function mat.define-dark-theme($primary, $accent, $warn);
@function mat.define-palette($base-palette, $default, $lighter, $darker, $text);

// Typography functions
@function mat.define-typography-config(
  $font-family,
  $headline-1, $headline-2, $headline-3, $headline-4, $headline-5, $headline-6,
  $subtitle-1, $subtitle-2,
  $body-1, $body-2,
  $caption, $button, $overline
);

// Density functions
@function mat.define-density-config($scale);

// Component-specific theming mixins
@mixin mat.button-theme($theme);
@mixin mat.card-theme($theme);
@mixin mat.checkbox-theme($theme);
@mixin mat.chips-theme($theme);
@mixin mat.core-theme($theme);
@mixin mat.datepicker-theme($theme);
@mixin mat.dialog-theme($theme);
@mixin mat.divider-theme($theme);
@mixin mat.expansion-theme($theme);
@mixin mat.form-field-theme($theme);
@mixin mat.grid-list-theme($theme);
@mixin mat.icon-theme($theme);
@mixin mat.input-theme($theme);
@mixin mat.list-theme($theme);
@mixin mat.menu-theme($theme);
@mixin mat.paginator-theme($theme);
@mixin mat.progress-bar-theme($theme);
@mixin mat.progress-spinner-theme($theme);
@mixin mat.radio-theme($theme);
@mixin mat.select-theme($theme);
@mixin mat.sidenav-theme($theme);
@mixin mat.slide-toggle-theme($theme);
@mixin mat.slider-theme($theme);
@mixin mat.snack-bar-theme($theme);
@mixin mat.sort-theme($theme);
@mixin mat.stepper-theme($theme);
@mixin mat.table-theme($theme);
@mixin mat.tabs-theme($theme);
@mixin mat.toolbar-theme($theme);
@mixin mat.tooltip-theme($theme);
@mixin mat.tree-theme($theme);

// Color palette variables
$mat-red: (/* color map */);
$mat-pink: (/* color map */);
$mat-purple: (/* color map */);
$mat-deep-purple: (/* color map */);
$mat-indigo: (/* color map */);
$mat-blue: (/* color map */);
$mat-light-blue: (/* color map */);
$mat-cyan: (/* color map */);
$mat-teal: (/* color map */);
$mat-green: (/* color map */);
$mat-light-green: (/* color map */);
$mat-lime: (/* color map */);
$mat-yellow: (/* color map */);
$mat-amber: (/* color map */);
$mat-orange: (/* color map */);
$mat-deep-orange: (/* color map */);
$mat-brown: (/* color map */);
$mat-grey: (/* color map */);
$mat-gray: (/* alias for mat-grey */);
$mat-blue-grey: (/* color map */);
$mat-blue-gray: (/* alias for mat-blue-grey */);

/**
 * Pre-built theme CSS files available via package.json exports
 */
interface PrebuiltThemes {
  'indigo-pink': '@angular/material/prebuilt-themes/indigo-pink.css';
  'deeppurple-amber': '@angular/material/prebuilt-themes/deeppurple-amber.css';
  'pink-bluegrey': '@angular/material/prebuilt-themes/pink-bluegrey.css';
  'purple-green': '@angular/material/prebuilt-themes/purple-green.css';
  'azure-blue': '@angular/material/prebuilt-themes/azure-blue.css';
  'rose-red': '@angular/material/prebuilt-themes/rose-red.css';
  'cyan-orange': '@angular/material/prebuilt-themes/cyan-orange.css';
  'magenta-violet': '@angular/material/prebuilt-themes/magenta-violet.css';
}

// Angular component theming
import { MatCommonModule } from '@angular/material/core';
import { MatRippleModule } from '@angular/material/core';

@Component({
  imports: [MatCommonModule, MatRippleModule],
  template: `
    <!-- Ripple effects -->
    <div matRipple 
         class="demo-ripple" 
         [matRippleColor]="rippleColor"
         [matRippleCentered]="centered"
         [matRippleDisabled]="disabled"
         [matRippleRadius]="radius">
      Click me!
    </div>
    
    <!-- Theme palette usage -->
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
  `
})
export class ThemingExample {
  rippleColor = 'rgba(255, 0, 0, 0.3)';
  centered = false;
  disabled = false;
  radius = 50;
}

// SCSS theming example
@use '@angular/material' as mat;

// Include the common styles for Angular Material
@include mat.core();

// Define custom palettes
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-warn: mat.define-palette(mat.$red-palette);

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

// Apply theme to all components
@include mat.all-component-themes($my-theme);

// Custom component theming
.my-custom-component {
  // Use theme colors
  color: mat.get-color-from-palette($my-primary, 500);
  background-color: mat.get-color-from-palette($my-accent, 100);
  
  // Dark theme variant
  .dark-theme & {
    color: mat.get-color-from-palette($my-primary, 200);
    background-color: mat.get-color-from-palette($my-accent, 900);
  }
}

// Typography usage
.my-text {
  @include mat.typography-level($my-theme, 'body-1');
}

// Density customization
$high-density-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  density: -2,
));

@media (max-width: 600px) {
  @include mat.all-component-densities($high-density-theme);
}

<!-- Pre-built theme usage -->
<!-- In index.html or component styles -->
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

<!-- Or using package exports in build tools -->
<link href="@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

// Animations configuration
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MATERIAL_ANIMATIONS, AnimationsConfig } from '@angular/material/core';

// Disable animations globally
const animationsConfig: AnimationsConfig = { disabled: true };

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync(),
    { provide: MATERIAL_ANIMATIONS, useValue: animationsConfig }
  ]
});