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 55052119d521..5971d9bae82a 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",
@@ -71,6 +72,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 a5b126bb209e..591cdab4eb97 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",
@@ -189,6 +190,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 854552d0f760..b3499ab3d8dc 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",
@@ -108,6 +109,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"]),