fix: account for new token data format

Updates the styling page to account for a change in the token docs format. Also outputs the example as HTML since it is now syntax-highlighted.

Author: crisbeto

material.angular.io/package.json

@@ -37,7 +37,7 @@
     "@angular/cdk-experimental": "^19.0.0-rc.0",
     "@angular/common": "^19.0.0-rc.0",
     "@angular/compiler": "^19.0.0-rc.0",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750",
     "@angular/core": "^19.0.0-rc.0",
     "@angular/forms": "^19.0.0-rc.0",
     "@angular/google-maps": "^19.0.0-rc.0",

material.angular.io/src/app/pages/component-viewer/component-styling.html

@@ -10,23 +10,23 @@
 } @else {
   <h2 class="cdk-visually-hidden" tabindex="-1">How to style {{item.id}}</h2>
   Styles from the <code>{{item.packageName}}/{{item.id}}</code> package can be customized using
-  @if (data.length === 1) {
-    the <code>{{data[0].overridesMixin}}</code> mixin.
+  @if (data.themes.length === 1) {
+    the <code>{{data.themes[0].overridesMixin}}</code> mixin.
   } @else {
-    the @for (current of data; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
+    the @for (current of data.themes; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
   }
-  {{data.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
+  {{data.themes.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
 
   @if (example) {
     <div class="docs-markdown">
-      <pre>{{example}}</pre>
+      <pre [innerHTML]="example"></pre>
     </div>
   }
 
   You can find the full list of supported mixins and tokens below.
 
   <div class="docs-markdown">
-    @for (current of data; track current.name) {
+    @for (current of data.themes; track current.name) {
       <h3>Tokens supported by <code>{{current.overridesMixin}}</code></h3>
       <token-table [tokens]="current.tokens"/>
     }

material.angular.io/src/app/pages/component-viewer/component-styling.ts

@@ -1,4 +1,5 @@
 import {Component, inject, Injectable} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
 import {HttpClient} from '@angular/common/http';
 import {AsyncPipe} from '@angular/common';
 import {Observable} from 'rxjs';
@@ -8,25 +9,28 @@ import {DocItem} from '../../shared/documentation-items/documentation-items';
 import {Token, TokenTable} from './token-table';
 
 interface StyleOverridesData {
-  name: string;
-  overridesMixin: string;
-  tokens: Token[];
+  example: string | null;
+  themes: {
+    name: string;
+    overridesMixin: string;
+    tokens: Token[];
+  }[];
 }
 
 @Injectable({providedIn: 'root'})
 class TokenService {
-  private _cache: Record<string, Observable<StyleOverridesData[]>> = {};
+  private _cache: Record<string, Observable<StyleOverridesData>> = {};
 
   constructor(private _http: HttpClient) {}
 
-  getTokenData(item: DocItem): Observable<StyleOverridesData[]> {
+  getTokenData(item: DocItem): Observable<StyleOverridesData> {
     const url = `/docs-content/tokens/${item.packageName}/${item.id}/${item.id}.json`;
 
     if (this._cache[url]) {
       return this._cache[url];
     }
 
-    const stream = this._http.get<StyleOverridesData[]>(url).pipe(shareReplay(1));
+    const stream = this._http.get<StyleOverridesData>(url).pipe(shareReplay(1));
     this._cache[url] = stream;
     return stream;
   }
@@ -41,39 +45,13 @@ class TokenService {
 export class ComponentStyling {
   private componentViewer = inject(ComponentViewer);
   private tokenService = inject(TokenService);
+  private domSanitizer = inject(DomSanitizer);
   protected docItem = this.componentViewer.componentDocItem;
   protected dataStream =
     this.docItem.pipe(switchMap(item => this.tokenService.getTokenData(item)));
   protected hasDataStream = this.dataStream.pipe(
-    map(data => data.length > 0 && data.some(d => d.tokens.length > 0)));
+    map(data => data.themes.length > 0 && data.themes.some(d => d.tokens.length > 0)));
 
-  protected exampleStream = this.dataStream.pipe(map(data => {
-    const mixin = data.find(d => d.tokens.length > 0);
-
-    if (!mixin) {
-      return null;
-    }
-
-    // Pick out a couple of color tokens to show as examples.
-    const firstToken = mixin.tokens.find(token => token.type === 'color');
-    const secondToken = mixin.tokens.find(token => token.type === 'color' && token !== firstToken);
-
-    if (!firstToken) {
-      return null;
-    }
-
-    const lines = [
-      `@use '@angular/material' as mat;`,
-      ``,
-      `// Customize the entire app. Change :root to your selector if you want to scope the styles.`,
-      `:root {`,
-      `  @include mat.${mixin.overridesMixin}((`,
-      `    ${firstToken.overridesName}: orange,`,
-      ...(secondToken ? [`    ${secondToken.overridesName}: red,`] : []),
-      `  ));`,
-      `}`,
-    ];
-
-    return lines.join('\n');
-  }));
+  protected exampleStream = this.dataStream.pipe(map(data => data.example ?
+    this.domSanitizer.bypassSecurityTrustHtml(data.example) : null));
 }

material.angular.io/yarn.lock

@@ -482,22 +482,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular/components-examples@https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36":
-  version: 19.1.0-next.0+sha-ade32c6
-  resolution: "@angular/components-examples@https://github.com/angular/material2-docs-content.git#commit=3743b2eee49ff4637ad5233f93049e1472ac1c36"
+"@angular/components-examples@https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750":
+  version: 19.1.0-next.0+sha-bd75077
+  resolution: "@angular/components-examples@https://github.com/angular/material2-docs-content.git#commit=63dd3f7fdbbf85440aa18742c24646b9f9676750"
   dependencies:
     tslib: "npm:^2.3.0"
   peerDependencies:
-    "@angular/cdk": 19.1.0-next.0+sha-ade32c6
-    "@angular/cdk-experimental": 19.1.0-next.0+sha-ade32c6
+    "@angular/cdk": 19.1.0-next.0+sha-bd75077
+    "@angular/cdk-experimental": 19.1.0-next.0+sha-bd75077
     "@angular/common": ^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0
     "@angular/core": ^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0
-    "@angular/material": 19.1.0-next.0+sha-ade32c6
-    "@angular/material-date-fns-adapter": 19.1.0-next.0+sha-ade32c6
-    "@angular/material-experimental": 19.1.0-next.0+sha-ade32c6
-    "@angular/material-luxon-adapter": 19.1.0-next.0+sha-ade32c6
-    "@angular/material-moment-adapter": 19.1.0-next.0+sha-ade32c6
-  checksum: 10c0/b74c8fd617232c7b2f1e2f185682068fb0e1ea29adafa310c304cf4459c0da7d285d1295eeb89b59385b25e9cd04b331ae2340c9f2ab4f3526c39f1c0dde2a1d
+    "@angular/material": 19.1.0-next.0+sha-bd75077
+    "@angular/material-date-fns-adapter": 19.1.0-next.0+sha-bd75077
+    "@angular/material-experimental": 19.1.0-next.0+sha-bd75077
+    "@angular/material-luxon-adapter": 19.1.0-next.0+sha-bd75077
+    "@angular/material-moment-adapter": 19.1.0-next.0+sha-bd75077
+  checksum: 10c0/66097a5a29dcd141882898d80611c299868d8d6e0818de6a1b9d822680ec8a6556c5427b7d0eee1be505602580d5597501cd6d2949a778080d6a8adfb91ce9dd
   languageName: node
   linkType: hard
 
@@ -12776,7 +12776,7 @@ __metadata:
     "@angular/common": "npm:^19.0.0-rc.0"
     "@angular/compiler": "npm:^19.0.0-rc.0"
     "@angular/compiler-cli": "npm:^19.0.0-rc.0"
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36"
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750"
     "@angular/core": "npm:^19.0.0-rc.0"
     "@angular/forms": "npm:^19.0.0-rc.0"
     "@angular/google-maps": "npm:^19.0.0-rc.0"