Material Design 3 (Material You) Skill

🎯 Purpose

This skill provides comprehensive guidance on Material Design 3 (also known as Material You), Google's latest design system that emphasizes personalization, accessibility, and modern UI patterns for Angular applications.

📦 What is Material Design 3?

Material Design 3 is Google's latest design language that introduces:

• Dynamic Color: Adaptive color palettes based on user preferences

• Enhanced Accessibility: WCAG 2.1 AA compliance by default

• Flexible Theming: Token-based theming system

• Modern Components: Updated component designs with better customization

• Personalization: User-centric design that adapts to preferences

🎨 When to Use This Skill

Use Material Design 3 guidance when:

• Implementing a new Angular application with Material Design

• Migrating from Material Design 2 to Material Design 3

• Creating custom themes using Material Design 3 tokens

• Implementing dynamic color theming

• Building accessible, modern UI components

• Following Material You design principles

• Working with Material Design 3 typography and spacing systems

🛠️ Core Concepts

1. Color System

Material Design 3 introduces a sophisticated color system:

Color Roles:

• Primary: Main brand color for prominent actions

• Secondary: Supporting color for less prominent actions

• Tertiary: Accent color for highlights and contrasts

• Error: Color for error states

• Surface: Background colors for components

• On-colors: Contrasting text/icon colors (on-primary, on-secondary, etc.)

Color Variants:

• Container colors (e.g., primary-container )

• On-container colors (e.g., on-primary-container )

• Surface variants (surface-dim, surface-bright, surface-container)

2. Dynamic Color

Material Design 3's signature feature:

• Generate color schemes from source colors

• Support both light and dark themes

• Automatic contrast adjustments

• System-level color extraction (from wallpaper on supported platforms)

3. Typography

Five typography scales:

• Display: Largest text (display-large, display-medium, display-small)

• Headline: Section headers (headline-large to headline-small)

• Title: Subsection titles (title-large to title-small)

• Body: Main content (body-large, body-medium, body-small)

• Label: UI labels (label-large to label-small)

4. Elevation

Three elevation strategies:

• Shadow: Traditional elevation with shadows

• Overlay: Tonal surface overlays

• Combined: Shadow + overlay for enhanced depth perception

5. Shape

Rounded corner system with four scales:

• None: 0dp (sharp corners)

• Extra Small: 4dp

• Small: 8dp

• Medium: 12dp

• Large: 16dp

• Extra Large: 28dp

📚 Implementation in Angular

Setting Up Material Design 3 Theme

// Define your theme using M3 tokens @use '@angular/material' as mat;

// Include core Material Design 3 styles @include mat.core();

// Define your color palette $my-primary: mat.define-palette(mat.$azure-palette); $my-accent: mat.define-palette(mat.$blue-palette); $my-warn: mat.define-palette(mat.$red-palette);

// Create the theme $my-theme: mat.define-theme(( color: ( theme-type: light, primary: $my-primary, tertiary: $my-accent, ), typography: ( brand-family: 'Roboto', bold-weight: 700 ), density: ( scale: 0 ) ));

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

// Dark theme variant $my-dark-theme: mat.define-theme(( color: ( theme-type: dark, primary: $my-primary, tertiary: $my-accent, ) ));

// Apply dark theme when needed .dark-theme { @include mat.all-component-colors($my-dark-theme); }

Using Color Tokens

// Access theme colors in your components .my-component { background-color: var(--mat-sys-primary); color: var(--mat-sys-on-primary);

&:hover { background-color: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); } }

// Surface variants .surface { background-color: var(--mat-sys-surface); color: var(--mat-sys-on-surface); }

.surface-container { background-color: var(--mat-sys-surface-container); }

Typography Usage

// Using typography tokens .heading { font: var(--mat-sys-headline-large); }

.body-text { font: var(--mat-sys-body-medium); }

.label { font: var(--mat-sys-label-small); }

Elevation and Shadows

.elevated-card { // Level 1 elevation box-shadow: var(--mat-sys-level1);

&:hover { // Level 2 elevation on hover box-shadow: var(--mat-sys-level2); } }

🎯 Best Practices

1. Theme Consistency

• Use design tokens instead of hardcoded values

• Maintain consistent color usage across components

• Follow Material Design 3 color role guidelines

2. Accessibility

• Ensure minimum 4.5:1 contrast ratio for text

• Use semantic color roles (primary, secondary, error)

• Support both light and dark themes

• Provide sufficient touch target sizes (48x48dp minimum)

3. Responsive Design

• Use Material Design 3 breakpoints

• Adapt layouts for different screen sizes

• Test on mobile, tablet, and desktop viewports

4. Dynamic Theming

// Example: Dynamic theme switching in Angular export class ThemeService { private isDark = signal(false);

toggleTheme() { this.isDark.update(dark => !dark); document.body.classList.toggle('dark-theme', this.isDark()); }

applyCustomColors(sourceColor: string) { // Generate M3 palette from source color const palette = this.generateM3Palette(sourceColor); this.applyCSSVariables(palette); } }

🔧 Common Patterns

Custom Component with M3 Tokens

@Component({ selector: 'app-custom-button', template: <button class="m3-button" [class.filled]="variant === 'filled'"> <ng-content></ng-content> </button> , styles: [` .m3-button { padding: 10px 24px; border-radius: var(--mat-sys-corner-full); font: var(--mat-sys-label-large); border: none; cursor: pointer;

  &.filled {
    background-color: var(--mat-sys-primary);
    color: var(--mat-sys-on-primary);
    
    &:hover {
      background-color: var(--mat-sys-primary-container);
      color: var(--mat-sys-on-primary-container);
    }
  }
  
  &.outlined {
    background-color: transparent;
    border: 1px solid var(--mat-sys-outline);
    color: var(--mat-sys-primary);
  }
}

`] }) export class CustomButtonComponent { @Input() variant: 'filled' | 'outlined' = 'filled'; }

🐛 Troubleshooting

Issue Solution

Colors not applying Ensure @include mat.core() is called first

Theme tokens undefined Check Angular Material version (requires v15+)

Dark theme not working Verify .dark-theme class is applied to parent element

Custom colors not working Use define-palette() with proper Material color palette

Typography not loading Include Material Design fonts (Roboto) in index.html

Accessibility contrast issues Use Material's built-in color roles instead of custom colors

📖 References

• Material Design 3 Official Guidelines

• Angular Material Theming Guide

• Material Design Color System

• Material Design Typography

• Accessibility Guidelines

💡 Migration from Material Design 2

Key changes when migrating from M2 to M3:

• Replace color palette with theme-type approach

• Update component styles to use design tokens

• Migrate custom themes to new theming API

• Update typography from mat-typography-level to M3 tokens

• Replace elevation mixins with CSS custom properties

• Test accessibility with new contrast requirements

📂 Recommended Placement

Project-level skill:

/.github/skills/material-design-3/skill.md

Personal global skill:

~/.github/skills/material-design-3/skill.md

Copilot will automatically load this skill when Material Design 3 topics are mentioned.