Set up a query parameter to use the token-based Sass API in the dev-app

Author: mmalerba

src/dev-app/BUILD.bazel

@@ -137,6 +137,16 @@ sass_binary(
     ],
 )
 
+sass_binary(
+    name = "theme_token_api",
+    src = "theme-token-api.scss",
+    deps = [
+        "//src/material:sass_lib",
+        "//src/material-experimental:sass_lib",
+        "//src/material/core:theming_scss_lib",
+    ],
+)
+
 # Variables that are going to be inlined into the dev app index.html.
 filegroup(
     name = "variables",
@@ -154,6 +164,7 @@ filegroup(
         "favicon.ico",
         "index.html",
         ":theme",
+        ":theme_token_api",
         ":variables",
         "//src/dev-app/icon:icon_demo_assets",
         "@npm//:node_modules/moment/min/moment-with-locales.min.js",

src/dev-app/dev-app.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation} from '@angular/core';
-import {RouterModule} from '@angular/router';
+import {Component, inject, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute, RouterModule} from '@angular/router';
 import {DevAppLayout} from './dev-app/dev-app-layout';
 
 /** Root component for the dev-app demos. */
@@ -18,4 +18,14 @@ import {DevAppLayout} from './dev-app/dev-app-layout';
   standalone: true,
   imports: [DevAppLayout, RouterModule],
 })
-export class DevApp {}
+export class DevApp {
+  route = inject(ActivatedRoute);
+
+  constructor() {
+    this.route.queryParams.subscribe(q => {
+      (document.querySelector('#theme-styles') as any).href = q.hasOwnProperty('tokenapi')
+        ? 'theme-token-api.css'
+        : 'theme.css';
+    });
+  }
+}

src/dev-app/index.html

@@ -10,7 +10,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="theme.css" rel="stylesheet">
+  <link href="theme.css" rel="stylesheet" id="theme-styles">
 
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

src/dev-app/theme-token-api.scss

@@ -0,0 +1,14 @@
+dev-app {
+  &::before {
+    content: 'Using experimental theming API';
+    display: inline-block;
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px;
+    background: red;
+    color: white;
+  }
+}