docs: show component tokens default value (#32876)

Show default value of component tokens in styling tab to better understand their meanings.

Author: martinboue

docs/src/app/pages/component-viewer/token-table.html

@@ -24,9 +24,9 @@
   </mat-form-field>
 
   <mat-form-field subscriptSizing="dynamic" appearance="outline">
-    <mat-label>Filter by system token</mat-label>
-    <input #systemTokenInput matInput [value]="systemTokenFilter()"
-           (input)="systemTokenFilter.set(systemTokenInput.value)"/>
+    <mat-label>Filter by default value</mat-label>
+    <input #defaultValueInput matInput [value]="defaultValueFilter()"
+           (input)="defaultValueFilter.set(defaultValueInput.value)"/>
   </mat-form-field>
 
   <button mat-button (click)="reset()">Reset filters</button>
@@ -38,7 +38,7 @@
       <tr>
         <th>Name</th>
         <th class="docs-type-header">Type</th>
-        <th class="docs-system-header">Based on system token</th>
+        <th class="docs-value-header">Default value</th>
       </tr>
     </thead>
 
@@ -47,13 +47,7 @@
         <tr>
           <td><token-name [name]="token.overridesName"/></td>
           <td>{{token.type | titlecase}}</td>
-          <td>
-            @if (token.derivedFrom) {
-              <token-name [name]="token.derivedFrom"/>
-            } @else {
-              None
-            }
-          </td>
+          <td>{{token.value}}</td>
         </tr>
       } @empty {
         <tr>

docs/src/app/pages/component-viewer/token-table.scss

@@ -32,6 +32,6 @@ thead {
   width: 10%;
 }
 
-.docs-system-header {
+.docs-value-header {
   width: 30%;
 }

docs/src/app/pages/component-viewer/token-table.ts

@@ -24,6 +24,7 @@ export interface Token {
   prefix: string;
   type: TokenType;
   derivedFrom?: string;
+  value: string | number | null;
 }
 
 @Component({
@@ -51,24 +52,24 @@ export class TokenTable {
 
   protected readonly nameFilter = signal('');
   protected readonly typeFilter = signal<TokenType | null>(null);
-  protected readonly systemTokenFilter = signal('');
+  protected readonly defaultValueFilter = signal('');
   protected readonly types: TokenType[] = ['base', 'color', 'typography', 'density'];
   protected readonly filteredTokens = computed(() => {
     const name = this.nameFilter().trim().toLowerCase();
     const typeFilter = this.typeFilter();
-    const systemTokenFilter = this.systemTokenFilter();
+    const defaultValueFilter = this.defaultValueFilter();
 
     return this.tokens().filter(
       token =>
         (!name || token.overridesName.toLowerCase().includes(name)) &&
         (!typeFilter || token.type === typeFilter) &&
-        (!systemTokenFilter || token.derivedFrom?.toLowerCase().includes(systemTokenFilter)),
+        (!defaultValueFilter || token.value?.toString().toLowerCase().includes(defaultValueFilter)),
     );
   });
 
   protected reset() {
     this.nameFilter.set('');
     this.typeFilter.set(null);
-    this.systemTokenFilter.set('');
+    this.defaultValueFilter.set('');
   }
 }

tools/extract-tokens/extract-tokens.mts

@@ -13,7 +13,7 @@ interface ExtractedToken {
   /** Type of the token (color, typography etc.) */
   type: 'color' | 'typography' | 'density' | 'base';
   /** Value of the token. */
-  value: string | number;
+  value: string | number | null;
   /** Name under which the token can be referred to inside the `overrides` mixin. */
   overridesName: string;
 }
@@ -142,6 +142,7 @@ function extractTokens(themePath: string): Token[] {
       overridesName: token.overridesName,
       // Set to `undefined` so the key gets dropped from the JSON if there's no value.
       derivedFrom: derivedFrom || undefined,
+      value: token.value,
     };
   });
 }