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"]),
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
+  }
+}