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.

(cherry picked from commit b777c2d)

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",
 

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 = [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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