From 96202f0f08d33ba9981d708651f167fde848105c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 3 Oct 2024 13:10:55 +0200
Subject: [PATCH 1/2] build: add a rule to extract information about tokens

Adds the new `extract_tokens` build rule that looks through all the passed-in themes and extracts information about their tokens into a JSON file.
---
 tools/defaults.bzl                     |   2 +
 tools/extract-tokens/BUILD.bazel       |  26 ++++
 tools/extract-tokens/extract-tokens.ts | 166 +++++++++++++++++++++++++
 tools/extract-tokens/index.bzl         |  50 ++++++++
 tools/extract-tokens/tsconfig.json     |  14 +++
 5 files changed, 258 insertions(+)
 create mode 100644 tools/extract-tokens/BUILD.bazel
 create mode 100644 tools/extract-tokens/extract-tokens.ts
 create mode 100644 tools/extract-tokens/index.bzl
 create mode 100644 tools/extract-tokens/tsconfig.json

diff --git a/tools/defaults.bzl b/tools/defaults.bzl
index 73d722b7dac7..0e52c7b7e9c4 100644
--- a/tools/defaults.bzl
+++ b/tools/defaults.bzl
@@ -17,6 +17,7 @@ load("@npm//tsec:index.bzl", _tsec_test = "tsec_test")
 load("//:packages.bzl", "NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS", "NPM_PACKAGE_SUBSTITUTIONS")
 load("//:pkg-externals.bzl", "PKG_EXTERNALS")
 load("//tools/markdown-to-html:index.bzl", _markdown_to_html = "markdown_to_html")
+load("//tools/extract-tokens:index.bzl", _extract_tokens = "extract_tokens")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
 _DEFAULT_TSCONFIG_BUILD = "//src:bazel-tsconfig-build.json"
@@ -30,6 +31,7 @@ npmPackageSubstitutions = select({
 # Re-exports to simplify build file load statements
 markdown_to_html = _markdown_to_html
 integration_test = _integration_test
+extract_tokens = _extract_tokens
 esbuild = _esbuild
 esbuild_config = _esbuild_config
 http_server = _http_server
diff --git a/tools/extract-tokens/BUILD.bazel b/tools/extract-tokens/BUILD.bazel
new file mode 100644
index 000000000000..ab58b0f7c342
--- /dev/null
+++ b/tools/extract-tokens/BUILD.bazel
@@ -0,0 +1,26 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_library(
+    name = "extract_tokens_lib",
+    srcs = glob(["**/*.ts"]),
+    # TODO(ESM): remove this once the Bazel NodeJS rules can handle ESM with `nodejs_binary`.
+    devmode_module = "commonjs",
+    tsconfig = ":tsconfig.json",
+    deps = [
+        "@npm//@types/node",
+        "@npm//sass",
+    ],
+)
+
+nodejs_binary(
+    name = "extract-tokens",
+    data = [
+        ":extract_tokens_lib",
+        "@npm//sass",
+    ],
+    entry_point = ":extract-tokens.ts",
+    templated_args = ["--bazel_patch_module_resolver"],
+)
diff --git a/tools/extract-tokens/extract-tokens.ts b/tools/extract-tokens/extract-tokens.ts
new file mode 100644
index 000000000000..97e6867f3165
--- /dev/null
+++ b/tools/extract-tokens/extract-tokens.ts
@@ -0,0 +1,166 @@
+import {writeFileSync} from 'fs';
+import {relative, basename, join} from 'path';
+import {compileString} from 'sass';
+
+/** Types of tokens. */
+type TokenType = 'base' | 'color' | 'typography' | 'density';
+
+/** Extracted data for a single token. */
+interface Token {
+  /** Name of the token. */
+  name: string;
+  /** System token that it was derived from. */
+  derivedFrom?: string;
+}
+
+// Script that extracts the tokens from a specific Bazel target.
+if (require.main === module) {
+  const [packagePath, outputPath, ...inputFiles] = process.argv.slice(2);
+  const themeFiles = inputFiles.filter(
+    file =>
+      // Filter out only the files within the package
+      // since the path also includes dependencies.
+      file.startsWith(packagePath) &&
+      // Assumption: all theme files start with an underscore
+      // since they're partials and they end with `-theme`.
+      basename(file).startsWith('_') &&
+      file.endsWith('-theme.scss'),
+  );
+
+  if (themeFiles.length === 0) {
+    throw new Error(`Could not find theme files in ${packagePath}`);
+  }
+
+  const theme = compileTheme(packagePath, themeFiles);
+  const base = parseTokens('base', theme);
+  const color = parseTokens('color', theme);
+  const typography = parseTokens('typography', theme);
+  const density = parseTokens('density', theme);
+
+  writeFileSync(
+    outputPath,
+    JSON.stringify({
+      totalTokens: base.length + color.length + typography.length + density.length,
+      base,
+      color,
+      typography,
+      density,
+    }),
+  );
+}
+
+/**
+ * Compiles a theme from which tokens can be extracted.
+ * @param packagePath Path of the package being processed.
+ * @param themeFiles File paths of the theme files within the package.
+ */
+function compileTheme(packagePath: string, themeFiles: string[]): string {
+  const imports: string[] = [];
+  const base: string[] = [];
+  const color: string[] = [];
+  const typography: string[] = [];
+  const density: string[] = [];
+
+  for (let i = 0; i < themeFiles.length; i++) {
+    const localName = `ctx${i}`;
+    imports.push(`@use './${relative(packagePath, themeFiles[i])}' as ${localName};`);
+    base.push(`@include ${localName}.base($theme);`);
+    color.push(`@include ${localName}.color($theme);`);
+    typography.push(`@include ${localName}.typography($theme);`);
+    density.push(`@include ${localName}.density($theme);`);
+  }
+
+  // Note: constructing the theme objects is expensive (takes ~2s locally) so we want to reduce
+  // the number of themes we need to compile. We minimize the impact by outputting all the sections
+  // into a single theme file and separating them with markers. Later on in the script we can
+  // use the markers to group the tokens.
+  const theme = `
+    @use '../core/theming/definition';
+    @use '../core/theming/palettes';
+    ${imports.join('\n')}
+
+    $theme: definition.define-theme((
+      color: (
+        theme-type: light,
+        primary: palettes.$azure-palette,
+        tertiary: palettes.$blue-palette,
+        use-system-variables: true,
+      ),
+      typography: (use-system-variables: true),
+      density: (scale: 0),
+    ));
+
+    ${getMarker('base', 'start')} :root {${base.join('\n')}}${getMarker('base', 'end')}
+    ${getMarker('color', 'start')} :root {${color.join('\n')}}${getMarker('color', 'end')}
+    ${getMarker('typography', 'start')} :root {${typography.join('\n')}}${getMarker('typography', 'end')}
+    ${getMarker('density', 'start')} :root {${density.join('\n')}}${getMarker('density', 'end')}
+  `;
+
+  // Note: this is using the synchronous `compileString`, even though the Sass docs claim the async
+  // version is faster. From local testing the synchronous version was faster (~2s versus ~5s).
+  return compileString(theme, {
+    loadPaths: [join(process.cwd(), packagePath)],
+    sourceMap: false,
+  }).css;
+}
+
+/**
+ * Parses the tokens of a specific type from a compiled theme.
+ * @param type Type of tokens to look for.
+ * @param theme Theme from which to parse the tokens.
+ */
+function parseTokens(type: TokenType, theme: string): Token[] {
+  const startMarker = getMarker(type, 'start');
+  const endMarker = getMarker(type, 'end');
+  const sectionText = textBetween(theme, startMarker, endMarker);
+
+  if (sectionText === null) {
+    throw new Error(`Could not find parse tokens for ${type}`);
+  }
+
+  return (
+    (sectionText.match(/\s--.+\s*:.+;/g) || [])
+      .map(rawToken => {
+        const [name, value] = rawToken.split(':');
+        const token: Token = {name: name.trim()};
+        // Assumption: tokens whose value contains a system variable
+        // reference are derived from that system variable.
+        const derivedFrom = textBetween(value, 'var(', ')');
+        if (derivedFrom) {
+          token.derivedFrom = derivedFrom;
+        }
+        return token;
+      })
+      // Sort the tokens by name so they look better in the final output.
+      .sort((a, b) => a.name.localeCompare(b.name))
+  );
+}
+
+/**
+ * Creates a marker that can be used to differentiate the section in a theme file.
+ * @param type Type of the tokens in the section.
+ * @param location Whether this is a start or end token.
+ */
+function getMarker(type: TokenType, location: 'start' | 'end'): string {
+  return `/*! ${type} ${location} */`;
+}
+
+/**
+ * Gets the substring between two strings.
+ * @param text String from which to extract the substring.
+ * @param start Start marker of the substring.
+ * @param end End marker of the substring.
+ */
+function textBetween(text: string, start: string, end: string): string | null {
+  const startIndex = text.indexOf(start);
+  if (startIndex === -1) {
+    return null;
+  }
+
+  const endIndex = text.indexOf(end, startIndex);
+  if (endIndex === -1) {
+    return null;
+  }
+
+  return text.slice(startIndex + start.length, endIndex);
+}
diff --git a/tools/extract-tokens/index.bzl b/tools/extract-tokens/index.bzl
new file mode 100644
index 000000000000..bc98543b0237
--- /dev/null
+++ b/tools/extract-tokens/index.bzl
@@ -0,0 +1,50 @@
+"""
+  Implementation of the "extract_tokens" rule.
+"""
+
+def _extract_tokens(ctx):
+    input_files = ctx.files.srcs
+    args = ctx.actions.args()
+
+    # Do nothing if there are no input files. Bazel will throw if we schedule an action
+    # that returns no outputs.
+    if not input_files:
+        return None
+
+    # Derive the name of the output file from the package.
+    output_file_name = ctx.actions.declare_file(ctx.label.package.split("/")[-1] + ".json")
+    expected_outputs = [output_file_name]
+
+    # Pass the necessary information like the package name and files to the script.
+    args.add(ctx.label.package, output_file_name)
+
+    for input_file in input_files:
+        args.add(input_file.path)
+
+    # Run the token extraction executable. Note that we specify the outputs because Bazel
+    # can throw an error if the script didn't generate the required outputs.
+    ctx.actions.run(
+        inputs = input_files,
+        executable = ctx.executable._extract_tokens,
+        outputs = expected_outputs,
+        arguments = [args],
+        progress_message = "ExtractTokens",
+    )
+
+    return DefaultInfo(files = depset(expected_outputs))
+
+"""
+  Rule definition for the "extract_tokens" rule that can extract
+  information about CSS tokens from a set of source files.
+"""
+extract_tokens = rule(
+    implementation = _extract_tokens,
+    attrs = {
+        "srcs": attr.label_list(),
+        "_extract_tokens": attr.label(
+            default = Label("//tools/extract-tokens"),
+            executable = True,
+            cfg = "exec",
+        ),
+    },
+)
diff --git a/tools/extract-tokens/tsconfig.json b/tools/extract-tokens/tsconfig.json
new file mode 100644
index 000000000000..384fd25037fe
--- /dev/null
+++ b/tools/extract-tokens/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "lib": ["es2020"],
+    "module": "commonjs",
+    "target": "es2020",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "strict": true,
+    "types": ["node"]
+  },
+  "bazelOptions": {
+    "suppressTsconfigOverrideWarnings": true
+  }
+}

From c4a611c4c5b6195d2545f6296bd74a56d063e774 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 3 Oct 2024 13:34:54 +0200
Subject: [PATCH 2/2] feat(material/core): expose styling information to the
 docs site

Exposes information about the available tokens in each component to the docs site. This makes it easier for users to track down the available tokens, instead of inspecting it with the dev tools.
---
 src/components-examples/BUILD.bazel       |  3 +++
 src/material/BUILD.bazel                  |  5 +++++
 src/material/autocomplete/BUILD.bazel     | 19 ++++++++++++++++++-
 src/material/badge/BUILD.bazel            |  6 ++++++
 src/material/bottom-sheet/BUILD.bazel     |  6 ++++++
 src/material/button-toggle/BUILD.bazel    |  6 ++++++
 src/material/button/BUILD.bazel           |  6 ++++++
 src/material/card/BUILD.bazel             |  6 ++++++
 src/material/checkbox/BUILD.bazel         |  6 ++++++
 src/material/chips/BUILD.bazel            |  6 ++++++
 src/material/core/BUILD.bazel             |  6 ++++++
 src/material/datepicker/BUILD.bazel       |  6 ++++++
 src/material/dialog/BUILD.bazel           |  6 ++++++
 src/material/divider/BUILD.bazel          |  6 ++++++
 src/material/expansion/BUILD.bazel        |  6 ++++++
 src/material/form-field/BUILD.bazel       |  6 ++++++
 src/material/grid-list/BUILD.bazel        |  6 ++++++
 src/material/icon/BUILD.bazel             |  6 ++++++
 src/material/input/BUILD.bazel            |  6 ++++++
 src/material/list/BUILD.bazel             |  6 ++++++
 src/material/menu/BUILD.bazel             |  6 ++++++
 src/material/paginator/BUILD.bazel        |  6 ++++++
 src/material/progress-bar/BUILD.bazel     |  6 ++++++
 src/material/progress-spinner/BUILD.bazel |  6 ++++++
 src/material/radio/BUILD.bazel            |  6 ++++++
 src/material/select/BUILD.bazel           |  6 ++++++
 src/material/sidenav/BUILD.bazel          |  6 ++++++
 src/material/slide-toggle/BUILD.bazel     |  6 ++++++
 src/material/slider/BUILD.bazel           |  6 ++++++
 src/material/snack-bar/BUILD.bazel        |  6 ++++++
 src/material/sort/BUILD.bazel             |  9 +++++++++
 src/material/stepper/BUILD.bazel          |  6 ++++++
 src/material/table/BUILD.bazel            |  6 ++++++
 src/material/tabs/BUILD.bazel             |  6 ++++++
 src/material/toolbar/BUILD.bazel          |  6 ++++++
 src/material/tooltip/BUILD.bazel          |  6 ++++++
 src/material/tree/BUILD.bazel             |  6 ++++++
 37 files changed, 233 insertions(+), 1 deletion(-)

diff --git a/src/components-examples/BUILD.bazel b/src/components-examples/BUILD.bazel
index 9b2dc84ad147..3f6cadd55a64 100644
--- a/src/components-examples/BUILD.bazel
+++ b/src/components-examples/BUILD.bazel
@@ -32,6 +32,9 @@ package_docs_content(
         "//src/cdk:overviews": "overviews/cdk",
         "//src/material:overviews": "overviews/material",
 
+        # Package the extracted token information into the docs content.
+        "//src/material:tokens": "tokens/material",
+
         # Package the API docs for the Material and CDK package into the docs-content
         "//src:api-docs": "api-docs",
 
diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel
index 29ab382b8f05..eb248fe7e30c 100644
--- a/src/material/BUILD.bazel
+++ b/src/material/BUILD.bazel
@@ -19,6 +19,11 @@ filegroup(
     srcs = ["//src/material/%s:overview" % name for name in MATERIAL_ENTRYPOINTS],
 )
 
+filegroup(
+    name = "tokens",
+    srcs = ["//src/material/%s:tokens" % name for name in MATERIAL_ENTRYPOINTS],
+)
+
 sass_library(
     name = "sass_lib",
     srcs = [
diff --git a/src/material/autocomplete/BUILD.bazel b/src/material/autocomplete/BUILD.bazel
index 546832b6ade0..441886c84958 100644
--- a/src/material/autocomplete/BUILD.bazel
+++ b/src/material/autocomplete/BUILD.bazel
@@ -1,4 +1,13 @@
-load("//tools:defaults.bzl", "markdown_to_html", "ng_module", "ng_test_library", "ng_web_test_suite", "sass_binary", "sass_library")
+load(
+    "//tools:defaults.bzl",
+    "extract_tokens",
+    "markdown_to_html",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
 
 package(default_visibility = ["//visibility:public"])
 
@@ -27,6 +36,9 @@ ng_module(
 sass_library(
     name = "autocomplete_scss_lib",
     srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 sass_binary(
@@ -75,6 +87,11 @@ markdown_to_html(
     srcs = [":autocomplete.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":autocomplete_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/badge/BUILD.bazel b/src/material/badge/BUILD.bazel
index e1dc6d85e23a..f5b8da274bf3 100644
--- a/src/material/badge/BUILD.bazel
+++ b/src/material/badge/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -72,6 +73,11 @@ markdown_to_html(
     srcs = [":badge.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":badge_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/bottom-sheet/BUILD.bazel b/src/material/bottom-sheet/BUILD.bazel
index 22290135bd20..bb6ea32e1441 100644
--- a/src/material/bottom-sheet/BUILD.bazel
+++ b/src/material/bottom-sheet/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -81,6 +82,11 @@ markdown_to_html(
     srcs = [":bottom-sheet.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":bottom_sheet_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/button-toggle/BUILD.bazel b/src/material/button-toggle/BUILD.bazel
index 07305a94e151..6747c969f3de 100644
--- a/src/material/button-toggle/BUILD.bazel
+++ b/src/material/button-toggle/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -70,6 +71,11 @@ markdown_to_html(
     srcs = [":button-toggle.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":button_toggle_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel
index cccb793e1bb1..af7369501faa 100644
--- a/src/material/button/BUILD.bazel
+++ b/src/material/button/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -107,6 +108,11 @@ markdown_to_html(
     srcs = [":button.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":button_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel
index 2b83708d81ae..0c8ad558d287 100644
--- a/src/material/card/BUILD.bazel
+++ b/src/material/card/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -58,6 +59,11 @@ markdown_to_html(
     srcs = [":card.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":card_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/checkbox/BUILD.bazel b/src/material/checkbox/BUILD.bazel
index 1a7462fa1cf8..98e3e228cdb0 100644
--- a/src/material/checkbox/BUILD.bazel
+++ b/src/material/checkbox/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -72,6 +73,11 @@ markdown_to_html(
     srcs = [":checkbox.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":checkbox_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel
index 8b4f66c3e473..4bc02f1ce534 100644
--- a/src/material/chips/BUILD.bazel
+++ b/src/material/chips/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -94,6 +95,11 @@ markdown_to_html(
     srcs = [":chips.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":chips_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel
index 99604a45323b..8c6c5af1347f 100644
--- a/src/material/core/BUILD.bazel
+++ b/src/material/core/BUILD.bazel
@@ -1,6 +1,7 @@
 load("//src/material:config.bzl", "MATERIAL_SCSS_LIBS")
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -204,6 +205,11 @@ markdown_to_html(
     ],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":core_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
index 140aba2a0e3b..37aaa4fd0fa0 100644
--- a/src/material/datepicker/BUILD.bazel
+++ b/src/material/datepicker/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -137,6 +138,11 @@ markdown_to_html(
     srcs = [":datepicker.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":datepicker_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/dialog/BUILD.bazel b/src/material/dialog/BUILD.bazel
index 779afb6f26c0..5112e15cab9e 100644
--- a/src/material/dialog/BUILD.bazel
+++ b/src/material/dialog/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -79,6 +80,11 @@ markdown_to_html(
     srcs = [":dialog.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":dialog_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/divider/BUILD.bazel b/src/material/divider/BUILD.bazel
index ee9d2e5fa678..911d869a015b 100644
--- a/src/material/divider/BUILD.bazel
+++ b/src/material/divider/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -61,6 +62,11 @@ markdown_to_html(
     srcs = [":divider.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":divider_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/expansion/BUILD.bazel b/src/material/expansion/BUILD.bazel
index 7d2dd322c69f..39f698141a94 100644
--- a/src/material/expansion/BUILD.bazel
+++ b/src/material/expansion/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -82,6 +83,11 @@ markdown_to_html(
     srcs = [":expansion.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":expansion_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel
index d21513c9a93d..4fbb9906282d 100644
--- a/src/material/form-field/BUILD.bazel
+++ b/src/material/form-field/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "sass_binary",
@@ -71,6 +72,11 @@ markdown_to_html(
     srcs = [":form-field.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":form_field_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/grid-list/BUILD.bazel b/src/material/grid-list/BUILD.bazel
index e70bbee41987..e483276f3ff5 100644
--- a/src/material/grid-list/BUILD.bazel
+++ b/src/material/grid-list/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -60,6 +61,11 @@ markdown_to_html(
     srcs = [":grid-list.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":grid_list_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/icon/BUILD.bazel b/src/material/icon/BUILD.bazel
index e33c8cef8b78..3637bc7c9818 100644
--- a/src/material/icon/BUILD.bazel
+++ b/src/material/icon/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -63,6 +64,11 @@ markdown_to_html(
     srcs = [":icon.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":icon_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/input/BUILD.bazel b/src/material/input/BUILD.bazel
index 7f5afdfdc8f7..59a60896ab11 100644
--- a/src/material/input/BUILD.bazel
+++ b/src/material/input/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -64,6 +65,11 @@ markdown_to_html(
     srcs = [":input.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":input_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/list/BUILD.bazel b/src/material/list/BUILD.bazel
index 834bcde15678..5ab52fbecd5d 100644
--- a/src/material/list/BUILD.bazel
+++ b/src/material/list/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -109,6 +110,11 @@ markdown_to_html(
     srcs = [":list.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":list_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/menu/BUILD.bazel b/src/material/menu/BUILD.bazel
index e73e70aa5a4e..42a7535808b8 100644
--- a/src/material/menu/BUILD.bazel
+++ b/src/material/menu/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -77,6 +78,11 @@ markdown_to_html(
     srcs = [":menu.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":menu_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel
index 0d99f32cbaf1..56436d96ad8f 100644
--- a/src/material/paginator/BUILD.bazel
+++ b/src/material/paginator/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -72,6 +73,11 @@ markdown_to_html(
     srcs = [":paginator.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":paginator_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/progress-bar/BUILD.bazel b/src/material/progress-bar/BUILD.bazel
index d94ca79d91de..7c78a5f3a5a9 100644
--- a/src/material/progress-bar/BUILD.bazel
+++ b/src/material/progress-bar/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -65,6 +66,11 @@ markdown_to_html(
     srcs = [":progress-bar.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":progress_bar_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/progress-spinner/BUILD.bazel b/src/material/progress-spinner/BUILD.bazel
index 677c938d9249..c0baf5708989 100644
--- a/src/material/progress-spinner/BUILD.bazel
+++ b/src/material/progress-spinner/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -69,6 +70,11 @@ markdown_to_html(
     srcs = [":progress-spinner.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":progress_spinner_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/radio/BUILD.bazel b/src/material/radio/BUILD.bazel
index bb4789d5cef2..a96c2a5f4e0f 100644
--- a/src/material/radio/BUILD.bazel
+++ b/src/material/radio/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -47,6 +48,11 @@ markdown_to_html(
     srcs = [":radio.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":radio_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/select/BUILD.bazel b/src/material/select/BUILD.bazel
index 2aeaaa822ff6..7b25661bcecb 100644
--- a/src/material/select/BUILD.bazel
+++ b/src/material/select/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -87,6 +88,11 @@ markdown_to_html(
     srcs = [":select.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":select_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/sidenav/BUILD.bazel b/src/material/sidenav/BUILD.bazel
index ce78171d11bf..39dc3549e430 100644
--- a/src/material/sidenav/BUILD.bazel
+++ b/src/material/sidenav/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -76,6 +77,11 @@ markdown_to_html(
     srcs = [":sidenav.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":sidenav_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/slide-toggle/BUILD.bazel b/src/material/slide-toggle/BUILD.bazel
index cf78a84f0b47..cf94f56eb392 100644
--- a/src/material/slide-toggle/BUILD.bazel
+++ b/src/material/slide-toggle/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -72,6 +73,11 @@ markdown_to_html(
     srcs = [":slide-toggle.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":slide_toggle_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/slider/BUILD.bazel b/src/material/slider/BUILD.bazel
index 6289aa91be6a..afc3c4da9d43 100644
--- a/src/material/slider/BUILD.bazel
+++ b/src/material/slider/BUILD.bazel
@@ -1,6 +1,7 @@
 load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_e2e_test_library",
     "ng_module",
@@ -57,6 +58,11 @@ markdown_to_html(
     srcs = [":slider.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":slider_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/snack-bar/BUILD.bazel b/src/material/snack-bar/BUILD.bazel
index 8b099553d3d8..7c6ba68eac81 100644
--- a/src/material/snack-bar/BUILD.bazel
+++ b/src/material/snack-bar/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -84,6 +85,11 @@ markdown_to_html(
     srcs = [":snack-bar.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":snack_bar_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/sort/BUILD.bazel b/src/material/sort/BUILD.bazel
index 26cc5662a395..3abd162b762c 100644
--- a/src/material/sort/BUILD.bazel
+++ b/src/material/sort/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -31,6 +32,9 @@ ng_module(
 sass_library(
     name = "sort_scss_lib",
     srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 sass_binary(
@@ -69,6 +73,11 @@ markdown_to_html(
     srcs = [":sort.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":sort_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/stepper/BUILD.bazel b/src/material/stepper/BUILD.bazel
index 2ddc1cbb8e67..b612503e9582 100644
--- a/src/material/stepper/BUILD.bazel
+++ b/src/material/stepper/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -95,6 +96,11 @@ markdown_to_html(
     srcs = [":stepper.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":stepper_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel
index 13d2cbee798f..54a64f6d5909 100644
--- a/src/material/table/BUILD.bazel
+++ b/src/material/table/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -82,6 +83,11 @@ markdown_to_html(
     srcs = [":table.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":table_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/tabs/BUILD.bazel b/src/material/tabs/BUILD.bazel
index 890109a4719c..ac035cbfb56d 100644
--- a/src/material/tabs/BUILD.bazel
+++ b/src/material/tabs/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -119,6 +120,11 @@ markdown_to_html(
     srcs = [":tabs.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":tabs_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/toolbar/BUILD.bazel b/src/material/toolbar/BUILD.bazel
index 3df407fe7671..3d6b47fb7519 100644
--- a/src/material/toolbar/BUILD.bazel
+++ b/src/material/toolbar/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -65,6 +66,11 @@ markdown_to_html(
     srcs = [":toolbar.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":toolbar_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel
index 935b24b83d8f..f967ddf32d57 100644
--- a/src/material/tooltip/BUILD.bazel
+++ b/src/material/tooltip/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -79,6 +80,11 @@ markdown_to_html(
     srcs = [":tooltip.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":tooltip_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),
diff --git a/src/material/tree/BUILD.bazel b/src/material/tree/BUILD.bazel
index 9833cfcf0bc8..f0a0aeec14be 100644
--- a/src/material/tree/BUILD.bazel
+++ b/src/material/tree/BUILD.bazel
@@ -1,5 +1,6 @@
 load(
     "//tools:defaults.bzl",
+    "extract_tokens",
     "markdown_to_html",
     "ng_module",
     "ng_test_library",
@@ -68,6 +69,11 @@ markdown_to_html(
     srcs = [":tree.md"],
 )
 
+extract_tokens(
+    name = "tokens",
+    srcs = [":tree_scss_lib"],
+)
+
 filegroup(
     name = "source-files",
     srcs = glob(["**/*.ts"]),