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