diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index 19b195d257fb..d43423de185b 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -1,7 +1,7 @@ +load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild") +load("@npm2//:defs.bzl", "npm_link_all_packages") load("//tools:defaults.bzl", "http_server", "sass_binary") load("//tools:defaults2.bzl", "ng_project") -load("@npm2//:defs.bzl", "npm_link_all_packages") -load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild") package(default_visibility = ["//visibility:public"]) @@ -56,7 +56,6 @@ sass_binary( deps = [ "//src/material:sass_lib", "//src/material-experimental:sass_lib", - "//src/material/core:theming_scss_lib", ], ) diff --git a/src/material/BUILD.bazel b/src/material/BUILD.bazel index a2c6adad61fd..f5e62d00cfa1 100644 --- a/src/material/BUILD.bazel +++ b/src/material/BUILD.bazel @@ -1,7 +1,6 @@ load( "//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", - "MATERIAL_SCSS_LIBS", "MATERIAL_TARGETS", "MATERIAL_TESTING_TARGETS", ) @@ -35,8 +34,72 @@ sass_library( "_index.scss", ], deps = [ - "//src/material/core:core_scss_lib", - "//src/material/core:theming_scss_lib", + "//src/material/autocomplete:theme", + "//src/material/badge:theme", + "//src/material/bottom-sheet:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/button-toggle:theme", + "//src/material/card:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core:core_sass", + "//src/material/core:ripple_sass", + "//src/material/core:ripple_sass_theme", + "//src/material/core:theme_sass", + "//src/material/core/color", + "//src/material/core/density/private:all_density", + "//src/material/core/focus-indicators", + "//src/material/core/m2:m2_sass", + "//src/material/core/option:theme", + "//src/material/core/selection/pseudo-checkbox:_pseudo_checkbox_common", + "//src/material/core/selection/pseudo-checkbox:sass_theme", + "//src/material/core/style:_validation", + "//src/material/core/style:elevation", + "//src/material/core/style:private", + "//src/material/core/style:sass_utils", + "//src/material/core/style:variables", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/theming", + "//src/material/core/theming:_color_api_backwards_compatibility", + "//src/material/core/theming:_definition", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_palettes", + "//src/material/core/theming:core_all_theme", + "//src/material/core/tokens:m3_system", + "//src/material/core/tokens/m2", + "//src/material/core/typography", + "//src/material/core/typography:all_typography", + "//src/material/core/typography:utils", + "//src/material/datepicker:theme", + "//src/material/dialog:dialog_legacy_padding", + "//src/material/dialog:theme", + "//src/material/divider:theme", + "//src/material/expansion:theme", + "//src/material/form-field:theme", + "//src/material/grid-list:theme", + "//src/material/icon:theme", + "//src/material/input:theme", + "//src/material/list:theme", + "//src/material/menu:theme", + "//src/material/paginator:theme", + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/sidenav:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/snack-bar:theme", + "//src/material/sort:theme", + "//src/material/stepper:theme", + "//src/material/table:theme", + "//src/material/tabs:theme", + "//src/material/timepicker:theme", + "//src/material/toolbar:theme", + "//src/material/tooltip:theme", + "//src/material/tree:theme", ], ) @@ -47,7 +110,56 @@ ng_package( srcs = [ "package.json", ":sass_lib", - "//src/material/core:theming_scss_lib", + "//src/material/autocomplete:theme", + "//src/material/badge:theme", + "//src/material/bottom-sheet:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/button-toggle:theme", + "//src/material/card:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core:core_sass", + "//src/material/core:ripple_sass", + "//src/material/core:ripple_sass_theme", + "//src/material/core:theme_sass", + "//src/material/core/color", + "//src/material/core/density/private:all_density", + "//src/material/core/focus-indicators", + "//src/material/core/m2:m2_sass", + "//src/material/core/option:theme", + "//src/material/core/selection/pseudo-checkbox:_pseudo_checkbox_common", + "//src/material/core/selection/pseudo-checkbox:sass_theme", + "//src/material/core/style:_validation", + "//src/material/core/style:elevation", + "//src/material/core/style:private", + "//src/material/core/style:sass_utils", + "//src/material/core/style:variables", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/theming", + "//src/material/core/theming:_color_api_backwards_compatibility", + "//src/material/core/theming:_definition", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_palettes", + "//src/material/core/theming:core_all_theme", + "//src/material/core/tokens:m3_system", + "//src/material/core/tokens/m2", + "//src/material/core/typography", + "//src/material/core/typography:all_typography", + "//src/material/core/typography:utils", + "//src/material/datepicker:theme", + "//src/material/dialog:dialog_legacy_padding", + "//src/material/dialog:theme", + "//src/material/divider:theme", + "//src/material/expansion:theme", + "//src/material/form-field:theme", + "//src/material/grid-list:theme", + "//src/material/icon:theme", + "//src/material/input:theme", + "//src/material/list:theme", + "//src/material/menu:theme", + "//src/material/paginator:theme", "//src/material/prebuilt-themes:azure-blue", "//src/material/prebuilt-themes:cyan-orange", "//src/material/prebuilt-themes:deeppurple-amber", @@ -56,7 +168,23 @@ ng_package( "//src/material/prebuilt-themes:pink-bluegrey", "//src/material/prebuilt-themes:purple-green", "//src/material/prebuilt-themes:rose-red", - ] + MATERIAL_SCSS_LIBS, + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/sidenav:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/snack-bar:theme", + "//src/material/sort:theme", + "//src/material/stepper:theme", + "//src/material/table:theme", + "//src/material/tabs:theme", + "//src/material/timepicker:theme", + "//src/material/toolbar:theme", + "//src/material/tooltip:theme", + "//src/material/tree:theme", + ], nested_packages = ["//src/material/schematics:npm_package"], tags = ["release-package"], deps = [get_legacy_label(t) for t in MATERIAL_TARGETS + MATERIAL_TESTING_TARGETS], diff --git a/src/material/autocomplete/BUILD.bazel b/src/material/autocomplete/BUILD.bazel index ce0067ddaf81..3c18d8583eff 100644 --- a/src/material/autocomplete/BUILD.bazel +++ b/src/material/autocomplete/BUILD.bazel @@ -10,17 +10,46 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_autocomplete-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "css", + src = "autocomplete.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "autocomplete", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), + srcs = [ + "autocomplete.ts", + "autocomplete-origin.ts", + "autocomplete-trigger.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], assets = [ - ":autocomplete_scss", - ] + glob(["**/*.html"]), + "autocomplete.html", + ":css", + ], deps = [ "//:node_modules/@angular/common", "//:node_modules/@angular/core", @@ -32,23 +61,6 @@ ng_project( ], ) -sass_library( - name = "autocomplete_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "autocomplete_scss", - src = "autocomplete.scss", - deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - ts_project( name = "autocomplete_tests_lib", testonly = True, @@ -85,7 +97,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":autocomplete_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/badge/BUILD.bazel b/src/material/badge/BUILD.bazel index 8076f9968147..7164621d3b77 100644 --- a/src/material/badge/BUILD.bazel +++ b/src/material/badge/BUILD.bazel @@ -10,41 +10,49 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "badge", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":badge_scss", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_badge-theme.scss", + ], deps = [ - "//:node_modules/@angular/animations", - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/platform-browser", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "badge_scss", + name = "badge_css", src = "badge.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_library( - name = "badge_scss_lib", - srcs = glob(["**/_*.scss"]), +ng_project( + name = "badge", + srcs = [ + "badge.ts", + "badge-module.ts", + "index.ts", + "public-api.ts", + ], + assets = [":badge_css"], deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/animations", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/platform-browser", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -75,7 +83,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":badge_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/bottom-sheet/BUILD.bazel b/src/material/bottom-sheet/BUILD.bazel index c099f1a18e86..b000a2ef6e67 100644 --- a/src/material/bottom-sheet/BUILD.bazel +++ b/src/material/bottom-sheet/BUILD.bazel @@ -10,15 +10,49 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_bottom-sheet-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "css", + src = "bottom-sheet-container.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:elevation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "bottom-sheet", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), + srcs = [ + "bottom-sheet.ts", + "bottom-sheet-animations.ts", + "bottom-sheet-config.ts", + "bottom-sheet-container.ts", + "bottom-sheet-module.ts", + "bottom-sheet-ref.ts", + "index.ts", + "public-api.ts", + ], assets = [ - ":bottom-sheet-container.css", - ] + glob(["**/*.html"]), + "bottom-sheet-container.html", + ":css", + ], deps = [ "//:node_modules/@angular/core", "//:node_modules/rxjs", @@ -28,21 +62,6 @@ ng_project( ], ) -sass_library( - name = "bottom_sheet_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_binary( - name = "bottom_sheet_container_scss", - src = "bottom-sheet-container.scss", - deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - ts_project( name = "unit_test_sources", testonly = True, @@ -71,7 +90,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":bottom_sheet_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/button-toggle/BUILD.bazel b/src/material/button-toggle/BUILD.bazel index d5d2094ff367..28a0fdf8caee 100644 --- a/src/material/button-toggle/BUILD.bazel +++ b/src/material/button-toggle/BUILD.bazel @@ -10,37 +10,53 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "button-toggle", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":button-toggle.css"] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - ], -) - sass_library( - name = "button_toggle_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_button-toggle-theme.scss", + ], deps = [ - "//src/cdk/a11y:a11y_scss_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "button_toggle_scss", + name = "css", src = "button-toggle.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:elevation", + "//src/material/core/style:layout_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "button-toggle", + srcs = [ + "button-toggle.ts", + "button-toggle-module.ts", + "index.ts", + "public-api.ts", + ], + assets = [ + "button-toggle.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -72,7 +88,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":button_toggle_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/button/BUILD.bazel b/src/material/button/BUILD.bazel index 2cb2b659204a..270cc5130606 100644 --- a/src/material/button/BUILD.bazel +++ b/src/material/button/BUILD.bazel @@ -10,74 +10,128 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "button", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [ - ":button_high_contrast_scss", - ":button_scss", - ":fab_scss", - ":icon-button_scss", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_button-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "button_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "fab_theme", + srcs = ["_fab-theme.scss"], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "button_base_scss_lib", - srcs = ["_button-base.scss"], + name = "icon_button_theme", + srcs = ["_icon-button-theme.scss"], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], ) sass_binary( - name = "button_scss", - src = "button.scss", + name = "icon_button_css", + src = "icon-button.scss", + deps = [ + ":base_lib", + "//src/material/core/style:private", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_binary( + name = "fab_css", + src = "fab.scss", deps = [ - ":button_base_scss_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + ":base_lib", + "//src/material/core/focus-indicators", + "//src/material/core/style:private", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "button_high_contrast_scss", + name = "button_high_contrast", src = "button-high-contrast.scss", deps = [ "//src/cdk:sass_lib", ], ) -sass_binary( - name = "fab_scss", - src = "fab.scss", +sass_library( + name = "base_lib", + srcs = [ + "_button-base.scss", + ], deps = [ - ":button_base_scss_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:layout_common", + "//src/material/core/tokens:token_utils", ], ) sass_binary( - name = "icon-button_scss", - src = "icon-button.scss", + name = "css", + src = "button.scss", + deps = [ + ":base_lib", + "//src/material/core/focus-indicators", + "//src/material/core/style:private", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "button", + srcs = [ + "button.ts", + "button-base.ts", + "fab.ts", + "icon-button.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "button.html", + ":css", + ":fab_css", + ":icon_button_css", + "icon-button.html", + ":button_high_contrast", + ], deps = [ - ":button_base_scss_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/core", + "//src/material/core", ], ) @@ -110,7 +164,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":button_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel index 65c406c0ec45..c43c8fa86b6d 100644 --- a/src/material/card/BUILD.bazel +++ b/src/material/card/BUILD.bazel @@ -10,32 +10,48 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "card", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":card_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_card-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "card_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "card.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "card_scss", - src = "card.scss", +ng_project( + name = "card", + srcs = [ + "card.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "card-header.html", + "card-title-group.html", + "card.html", + ":css", + ], deps = [ - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/core", + "//src/material/core", ], ) @@ -63,7 +79,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":card_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/checkbox/BUILD.bazel b/src/material/checkbox/BUILD.bazel index 60769656340d..cbd32b200bac 100644 --- a/src/material/checkbox/BUILD.bazel +++ b/src/material/checkbox/BUILD.bazel @@ -10,38 +10,62 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "checkbox", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [":checkbox_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_checkbox-theme.scss", + ], deps = [ - "//:node_modules/@angular/animations", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "checkbox_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "checkbox_common", + srcs = ["_checkbox-common.scss"], deps = [ - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "checkbox_scss", + name = "css", src = "checkbox.scss", deps = [ - ":checkbox_scss_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + ":checkbox_common", + "//src/material/core/style:layout_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "checkbox", + srcs = [ + "checkbox.ts", + "checkbox-config.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "checkbox.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/animations", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//src/material/core", ], ) @@ -75,7 +99,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":checkbox_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel index 28e42a0634d2..5d4e1aea7d84 100644 --- a/src/material/chips/BUILD.bazel +++ b/src/material/chips/BUILD.bazel @@ -10,52 +10,75 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "chips", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [ - ":chip_scss", - ":chip_set_scss", - ] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/animations", - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material/core", - "//src/material/form-field", - ], -) - sass_library( - name = "chips_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_chips-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "chip_scss", + name = "chip_css", src = "chip.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/focus-indicators", + "//src/material/core/style:layout_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "chip_set_scss", + name = "chip_set_css", src = "chip-set.scss", + deps = ["//src/material/core/style:vendor_prefixes"], +) + +ng_project( + name = "chips", + srcs = [ + "chip.ts", + "chip-action.ts", + "chip-edit-input.ts", + "chip-grid.ts", + "chip-icons.ts", + "chip-input.ts", + "chip-listbox.ts", + "chip-option.ts", + "chip-row.ts", + "chip-set.ts", + "chip-text-control.ts", + "index.ts", + "module.ts", + "public-api.ts", + "tokens.ts", + ], + assets = [ + "chip-option.html", + "chip-row.html", + "chip.html", + ":chip_css", + ":chip_set_css", + ], deps = [ - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/animations", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material/core", + "//src/material/form-field", ], ) @@ -95,7 +118,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":chips_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/config.bzl b/src/material/config.bzl index ea40e8b7ab82..7b63b4a3253b 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -94,10 +94,3 @@ MATERIAL_TARGETS = ["//src/material"] + \ # List of all testing entry-point targets of the Angular Material package. MATERIAL_TESTING_TARGETS = ["//src/material/%s" % ep for ep in MATERIAL_TESTING_ENTRYPOINTS] - -# List that references the sass libraries for each Material non-testing entry-point. This -# can be used to specify dependencies for the "all-theme.scss" file in core. -MATERIAL_SCSS_LIBS = [ - "//src/material/%s:%s_scss_lib" % (ep, ep.replace("-", "_")) - for ep in MATERIAL_ENTRYPOINTS -] diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel index b9be7ec5d41e..3ef5e10127ad 100644 --- a/src/material/core/BUILD.bazel +++ b/src/material/core/BUILD.bazel @@ -1,4 +1,3 @@ -load("//src/material:config.bzl", "MATERIAL_SCSS_LIBS") load( "//tools:defaults.bzl", "extract_tokens", @@ -11,161 +10,72 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -exports_files(["theming/_theming.scss"]) - ng_project( name = "core", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":selection/pseudo-checkbox/pseudo-checkbox.css", - ":option/option.css", - ":option/optgroup.css", - ":internal-form-field/internal-form-field.css", - ":ripple/ripple-structure.css", - ":focus-indicators/structural-styles.css", - ] + glob(["**/*.html"]), + srcs = [ + "index.ts", + "line/line.ts", + "public-api.ts", + ], deps = [ - "//:node_modules/@angular/animations", - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/@angular/platform-browser", + ":version", "//:node_modules/rxjs", "//src:dev_mode_types", "//src/material:node_modules/@angular/cdk", + "//src/material/core:ripple", + "//src/material/core/animation", + "//src/material/core/common-behaviors", + "//src/material/core/datetime", + "//src/material/core/error", + "//src/material/core/focus-indicators:internal", + "//src/material/core/internal-form-field", + "//src/material/core/option", + "//src/material/core/private", + "//src/material/core/selection", ], ) -ALL_THEMING_FILES = [ - # The `_core.scss` file needs to be added here too because it depends - # on the `_all-typography` file. - "_core.scss", - "color/_all-color.scss", - "density/private/_all-density.scss", - "theming/_all-theme.scss", - "typography/_all-typography.scss", -] - -sass_library( - name = "core_scss_lib", - srcs = glob( - ["**/_*.scss"], - exclude = ALL_THEMING_FILES + ["./tokens/m3/definitions/unused/**/*_.scss"], - ), +ng_project( + name = "version", + srcs = [ + "version.ts", + ], deps = [ - "//src/cdk:sass_lib", + "//:node_modules/@angular/core", ], ) sass_library( - name = "theming_scss_lib", - srcs = ALL_THEMING_FILES, - deps = MATERIAL_SCSS_LIBS + [ - "//src/cdk:sass_lib", - ], -) - -sass_binary( - name = "structural_styles_scss", - src = "focus-indicators/structural-styles.scss", - deps = [":core_scss_lib"], -) - -sass_binary( - name = "pseudo_checkbox_scss", - src = "selection/pseudo-checkbox/pseudo-checkbox.scss", - deps = [":core_scss_lib"], -) - -sass_binary( - name = "option_scss", - src = "option/option.scss", - deps = [":core_scss_lib"], -) - -sass_binary( - name = "optgroup_scss", - src = "option/optgroup.scss", - deps = [":core_scss_lib"], -) - -sass_binary( - name = "internal_form_field_scss", - src = "internal-form-field/internal-form-field.scss", - deps = [":core_scss_lib"], -) - -sass_binary( - name = "ripple_structure_scss", - src = "ripple/ripple-structure.scss", - deps = [":core_scss_lib"], -) - -# M3 themes -sass_binary( - name = "azure_blue_prebuilt", - src = "theming/prebuilt/azure-blue.scss", - deps = [ - ":theming_scss_lib", - "//src/material-experimental:sass_lib", + name = "core_sass", + srcs = [ + "_core.scss", ], -) - -sass_binary( - name = "rose_red_prebuilt", - src = "theming/prebuilt/rose-red.scss", deps = [ - ":theming_scss_lib", - "//src/material-experimental:sass_lib", + "//src/material/core/style:elevation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "cyan_orange_prebuilt", - src = "theming/prebuilt/cyan-orange.scss", - deps = [ - ":theming_scss_lib", - "//src/material-experimental:sass_lib", +sass_library( + name = "theme_sass", + srcs = [ + "_core-theme.scss", ], -) - -sass_binary( - name = "magenta_violet_prebuilt", - src = "theming/prebuilt/magenta-violet.scss", deps = [ - ":theming_scss_lib", - "//src/material-experimental:sass_lib", + "//src/material/core:ripple_sass_theme", + "//src/material/core/option:theme", + "//src/material/core/selection/pseudo-checkbox:sass_theme", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -# Legacy M2 themes -sass_binary( - name = "indigo_pink_prebuilt", - src = "theming/prebuilt/indigo-pink.scss", - deps = [":theming_scss_lib"], -) - -sass_binary( - name = "deeppurple-amber_prebuilt", - src = "theming/prebuilt/deeppurple-amber.scss", - deps = [":theming_scss_lib"], -) - -sass_binary( - name = "pink-bluegrey_prebuilt", - src = "theming/prebuilt/pink-bluegrey.scss", - deps = [":theming_scss_lib"], -) - -sass_binary( - name = "purple-green_prebuilt", - src = "theming/prebuilt/purple-green.scss", - deps = [":theming_scss_lib"], -) - ################# # Test targets ################# @@ -201,10 +111,70 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":core_scss_lib"], + srcs = [":theme_sass"], ) filegroup( name = "source-files", srcs = glob(["**/*.ts"]), ) + +### Ripple +### Cannot be in its own ripple/BUILD.bazel due to breaking docs generation. + +sass_library( + name = "ripple_sass_theme", + srcs = [ + "ripple/_ripple-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_library( + name = "ripple_sass", + srcs = [ + "ripple/_ripple.scss", + ], + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_binary( + name = "ripple_structure", + src = "ripple/ripple-structure.scss", + deps = [ + ":ripple_sass", + ], +) + +ng_project( + name = "ripple", + srcs = [ + "ripple/index.ts", + "ripple/ripple.ts", + "ripple/ripple-event-manager.ts", + "ripple/ripple-ref.ts", + "ripple/ripple-renderer.ts", + ], + assets = [ + ":ripple_structure", + ], + deps = [ + "//src/cdk/a11y", + "//src/cdk/coercion", + "//src/cdk/platform", + "//src/cdk/private", + "//src/material/core/animation", + "//src/material/core/common-behaviors", + ], +) diff --git a/src/material/core/animation/BUILD.bazel b/src/material/core/animation/BUILD.bazel new file mode 100644 index 000000000000..0d95cde284ac --- /dev/null +++ b/src/material/core/animation/BUILD.bazel @@ -0,0 +1,11 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "animation", + srcs = ["animation.ts"], + deps = [ + "//:node_modules/@angular/core", + ], +) diff --git a/src/material/core/color/BUILD.bazel b/src/material/core/color/BUILD.bazel new file mode 100644 index 000000000000..fc51348164da --- /dev/null +++ b/src/material/core/color/BUILD.bazel @@ -0,0 +1,14 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "color", + srcs = [ + "_all-color.scss", + ], + deps = [ + "//src/material/core/theming:_inspection", + "//src/material/core/theming:core_all_theme", + ], +) diff --git a/src/material/core/common-behaviors/BUILD.bazel b/src/material/core/common-behaviors/BUILD.bazel new file mode 100644 index 000000000000..0ad4cdcdbf1d --- /dev/null +++ b/src/material/core/common-behaviors/BUILD.bazel @@ -0,0 +1,21 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "common-behaviors", + srcs = [ + "common-module.ts", + "error-state.ts", + "index.ts", + "palette.ts", + ], + deps = [ + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src/cdk/a11y", + "//src/cdk/bidi", + "//src/cdk/platform", + "//src/material/core/error", + ], +) diff --git a/src/material/core/datetime/BUILD.bazel b/src/material/core/datetime/BUILD.bazel new file mode 100644 index 000000000000..571f52f441e4 --- /dev/null +++ b/src/material/core/datetime/BUILD.bazel @@ -0,0 +1,26 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "internal", + srcs = [ + "date-adapter.ts", + "date-formats.ts", + "native-date-adapter.ts", + "native-date-formats.ts", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + ], +) + +ng_project( + name = "datetime", + srcs = ["index.ts"], + deps = [ + ":internal", + "//:node_modules/@angular/core", + ], +) diff --git a/src/material/core/density/private/BUILD.bazel b/src/material/core/density/private/BUILD.bazel new file mode 100644 index 000000000000..ebe5f6ec30ba --- /dev/null +++ b/src/material/core/density/private/BUILD.bazel @@ -0,0 +1,42 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "all_density", + srcs = [ + "_all-density.scss", + ], + deps = [ + "//src/material/autocomplete:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/button-toggle:theme", + "//src/material/card:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core:theme_sass", + "//src/material/core/theming:_inspection", + "//src/material/dialog:theme", + "//src/material/expansion:theme", + "//src/material/form-field:theme", + "//src/material/input:theme", + "//src/material/list:theme", + "//src/material/menu:theme", + "//src/material/paginator:theme", + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/snack-bar:theme", + "//src/material/stepper:theme", + "//src/material/table:theme", + "//src/material/tabs:theme", + "//src/material/toolbar:theme", + "//src/material/tooltip:theme", + "//src/material/tree:theme", + ], +) diff --git a/src/material/core/error/BUILD.bazel b/src/material/core/error/BUILD.bazel new file mode 100644 index 000000000000..0ae787f1ed67 --- /dev/null +++ b/src/material/core/error/BUILD.bazel @@ -0,0 +1,14 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "error", + srcs = [ + "error-options.ts", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + ], +) diff --git a/src/material/core/focus-indicators/BUILD.bazel b/src/material/core/focus-indicators/BUILD.bazel new file mode 100644 index 000000000000..1958970228c3 --- /dev/null +++ b/src/material/core/focus-indicators/BUILD.bazel @@ -0,0 +1,30 @@ +load("//tools:defaults.bzl", "sass_binary", "sass_library") +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "focus-indicators", + srcs = [ + "_private.scss", + ], + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:layout_common", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + ], +) + +ng_project( + name = "internal", + srcs = ["structural-styles.ts"], + assets = [":structural_styles_css"], + deps = ["//:node_modules/@angular/core"], +) + +sass_binary( + name = "structural_styles_css", + src = "structural-styles.scss", + deps = [":focus-indicators"], +) diff --git a/src/material/core/internal-form-field/BUILD.bazel b/src/material/core/internal-form-field/BUILD.bazel new file mode 100644 index 000000000000..80e9369e71e9 --- /dev/null +++ b/src/material/core/internal-form-field/BUILD.bazel @@ -0,0 +1,21 @@ +load("//tools:defaults.bzl", "sass_binary") +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "internal-form-field", + srcs = [ + "internal-form-field.ts", + ], + assets = [":internal_form_field_css"], + deps = [ + "//:node_modules/@angular/core", + ], +) + +sass_binary( + name = "internal_form_field_css", + src = "internal-form-field.scss", + deps = ["//src/material/core/style:vendor_prefixes"], +) diff --git a/src/material/core/m2/BUILD.bazel b/src/material/core/m2/BUILD.bazel new file mode 100644 index 000000000000..063941b0165d --- /dev/null +++ b/src/material/core/m2/BUILD.bazel @@ -0,0 +1,15 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "m2_sass", + srcs = [ + "_index.scss", + "_palette.scss", + "_theming.scss", + "_typography.scss", + "_typography-utils.scss", + ], + deps = ["//src/material/core/theming"], +) diff --git a/src/material/core/option/BUILD.bazel b/src/material/core/option/BUILD.bazel new file mode 100644 index 000000000000..7cc35c94206b --- /dev/null +++ b/src/material/core/option/BUILD.bazel @@ -0,0 +1,69 @@ +load("//tools:defaults.bzl", "sass_binary", "sass_library") +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "theme", + srcs = [ + "_optgroup-theme.scss", + "_option-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +ng_project( + name = "option", + srcs = [ + "index.ts", + "optgroup.ts", + "option.ts", + "option-parent.ts", + ], + assets = [ + "optgroup.html", + "option.html", + ":optgroup_css", + ":option_css", + ], + deps = [ + "//:node_modules/rxjs", + "//src/cdk/a11y", + "//src/cdk/keycodes", + "//src/cdk/private", + "//src/material/core:ripple", + "//src/material/core/common-behaviors", + "//src/material/core/focus-indicators:internal", + "//src/material/core/selection", + "//src/material/core/selection/pseudo-checkbox", + ], +) + +sass_binary( + name = "option_css", + src = "option.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:layout_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_binary( + name = "optgroup_css", + src = "optgroup.scss", + deps = [ + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) diff --git a/src/material/core/private/BUILD.bazel b/src/material/core/private/BUILD.bazel new file mode 100644 index 000000000000..ccce2eb7b86a --- /dev/null +++ b/src/material/core/private/BUILD.bazel @@ -0,0 +1,18 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "private", + srcs = [ + "index.ts", + "ripple-loader.ts", + ], + deps = [ + "//:node_modules/@angular/common", + "//src/cdk/platform", + "//src/cdk/private", + "//src/material/core:ripple", + "//src/material/core/animation", + ], +) diff --git a/src/material/core/selection/BUILD.bazel b/src/material/core/selection/BUILD.bazel new file mode 100644 index 000000000000..206305ac0bd1 --- /dev/null +++ b/src/material/core/selection/BUILD.bazel @@ -0,0 +1,11 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "selection", + srcs = [ + "index.ts", + ], + deps = ["//src/material/core/selection/pseudo-checkbox"], +) diff --git a/src/material/core/selection/pseudo-checkbox/BUILD.bazel b/src/material/core/selection/pseudo-checkbox/BUILD.bazel new file mode 100644 index 000000000000..8f2d2860f49d --- /dev/null +++ b/src/material/core/selection/pseudo-checkbox/BUILD.bazel @@ -0,0 +1,54 @@ +load("//tools:defaults.bzl", "sass_binary", "sass_library") +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "pseudo-checkbox", + srcs = [ + "pseudo-checkbox.ts", + "pseudo-checkbox-module.ts", + ], + assets = [ + ":css", + ], + deps = [ + "//:node_modules/@angular/core", + "//src/material/core/animation", + "//src/material/core/common-behaviors", + ], +) + +sass_library( + name = "sass_theme", + srcs = [ + "_pseudo-checkbox-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_library( + name = "_pseudo_checkbox_common", + srcs = ["_pseudo-checkbox-common.scss"], + deps = ["//src/material/core/style:checkbox_common"], +) + +sass_binary( + name = "css", + src = "pseudo-checkbox.scss", + deps = [ + ":_pseudo_checkbox_common", + "//src/material/core/style:checkbox_common", + "//src/material/core/style:private", + "//src/material/core/style:variables", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) diff --git a/src/material/core/style/BUILD.bazel b/src/material/core/style/BUILD.bazel new file mode 100644 index 000000000000..663f7ffff165 --- /dev/null +++ b/src/material/core/style/BUILD.bazel @@ -0,0 +1,81 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "button_common", + srcs = ["_button-common.scss"], + deps = [":vendor_prefixes"], +) + +sass_library( + name = "checkbox_common", + srcs = ["_checkbox-common.scss"], +) + +sass_library( + name = "elevation", + srcs = ["_elevation.scss"], + deps = [ + ":sass_utils", + ":variables", + ], +) + +sass_library( + name = "form_common", + srcs = ["_form-common.scss"], + deps = [ + ":sass_utils", + "//src/material/core/theming:_inspection", + ], +) + +sass_library( + name = "layout_common", + srcs = ["_layout-common.scss"], +) + +sass_library( + name = "list_common", + srcs = ["_list-common.scss"], +) + +sass_library( + name = "menu_common", + srcs = ["_menu-common.scss"], + deps = [ + ":layout_common", + ":list_common", + "//src/cdk:sass_lib", + ], +) + +sass_library( + name = "private", + srcs = ["_private.scss"], + deps = [ + ":elevation", + "//src/material/core/theming:_inspection", + ], +) + +sass_library( + name = "variables", + srcs = ["_variables.scss"], +) + +sass_library( + name = "vendor_prefixes", + srcs = ["_vendor-prefixes.scss"], +) + +sass_library( + name = "sass_utils", + srcs = ["_sass-utils.scss"], +) + +sass_library( + name = "_validation", + srcs = ["_validation.scss"], +) diff --git a/src/material/core/theming/BUILD.bazel b/src/material/core/theming/BUILD.bazel new file mode 100644 index 000000000000..21da8428367e --- /dev/null +++ b/src/material/core/theming/BUILD.bazel @@ -0,0 +1,141 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +exports_files(["_theming.scss"]) + +sass_library( + name = "core_all_theme", + srcs = [ + "_all-theme.scss", + ], + deps = [ + ":theming", + "//src/material/autocomplete:theme", + "//src/material/badge:theme", + "//src/material/bottom-sheet:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/button-toggle:theme", + "//src/material/card:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core:theme_sass", + "//src/material/datepicker:theme", + "//src/material/dialog:theme", + "//src/material/divider:theme", + "//src/material/expansion:theme", + "//src/material/form-field:theme", + "//src/material/grid-list:theme", + "//src/material/icon:theme", + "//src/material/input:theme", + "//src/material/list:theme", + "//src/material/menu:theme", + "//src/material/paginator:theme", + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/sidenav:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/snack-bar:theme", + "//src/material/sort:theme", + "//src/material/stepper:theme", + "//src/material/table:theme", + "//src/material/tabs:theme", + "//src/material/timepicker:theme", + "//src/material/toolbar:theme", + "//src/material/tooltip:theme", + "//src/material/tree:theme", + ], +) + +sass_library( + name = "theming", + srcs = [ + "_theming.scss", + ], +) + +sass_library( + name = "_inspection", + srcs = ["_inspection.scss"], + deps = [ + ":_m2_inspection", + "//src/material/core/style:_validation", + ], +) + +sass_library( + name = "_m2_inspection", + srcs = ["_m2-inspection.scss"], + deps = [ + ":theming", + "//src/material/core/m2:m2_sass", + "//src/material/core/typography:_versioning", + ], +) + +sass_library( + name = "_validation", + srcs = ["_validation.scss"], +) + +sass_library( + name = "_theming_deprecated", + srcs = ["_theming-deprecated.scss"], + deps = ["//src/material/core/m2:m2_sass"], +) + +sass_library( + name = "_palettes", + srcs = ["_palettes.scss"], +) + +sass_library( + name = "_config_validation", + srcs = ["_config-validation.scss"], + deps = [ + ":_palettes", + "//src/material/core/style:_validation", + ], +) + +sass_library( + name = "_color_api_backwards_compatibility", + srcs = ["_color-api-backwards-compatibility.scss"], + deps = [ + "//src/material/badge:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core/option:theme", + "//src/material/core/selection/pseudo-checkbox:sass_theme", + "//src/material/datepicker:theme", + "//src/material/form-field:theme", + "//src/material/icon:theme", + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/stepper:theme", + "//src/material/tabs:theme", + ], +) + +sass_library( + name = "_definition", + srcs = ["_definition.scss"], + deps = [ + ":_config_validation", + ":_palettes", + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:m3_tokens", + ], +) diff --git a/src/material/core/theming/prebuilt/BUILD.bazel b/src/material/core/theming/prebuilt/BUILD.bazel new file mode 100644 index 000000000000..1530fead1c9b --- /dev/null +++ b/src/material/core/theming/prebuilt/BUILD.bazel @@ -0,0 +1,83 @@ +load("//tools:defaults.bzl", "sass_binary") + +package(default_visibility = ["//visibility:public"]) + +sass_binary( + name = "indigo-pink-theme", + src = "indigo-pink.scss", + deps = [ + "//src/material/core:core_sass", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "deeppurple-amber-theme", + src = "deeppurple-amber.scss", + deps = [ + "//src/material/core:core_sass", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "pink-bluegrey-theme", + src = "pink-bluegrey.scss", + deps = [ + "//src/material/core:core_sass", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "purple-green-theme", + src = "purple-green.scss", + deps = [ + "//src/material/core:core_sass", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "rose_red", + src = "rose-red.scss", + deps = [ + "//src/material/core/theming:_palettes", + "//src/material/core/tokens:m3_system", + ], +) + +sass_binary( + name = "azure_blue", + src = "azure-blue.scss", + deps = [ + "//src/material/core/theming:_palettes", + "//src/material/core/tokens:m3_system", + ], +) + +sass_binary( + name = "cyan_orange", + src = "cyan-orange.scss", + deps = [ + "//src/material/core/theming:_palettes", + "//src/material/core/tokens:m3_system", + ], +) + +sass_binary( + name = "magenta_violet", + src = "magenta-violet.scss", + deps = [ + "//src/material/core/theming:_palettes", + "//src/material/core/tokens:m3_system", + ], +) diff --git a/src/material/core/theming/tests/BUILD.bazel b/src/material/core/theming/tests/BUILD.bazel index c9d355abc6b1..3466ef95ea48 100644 --- a/src/material/core/theming/tests/BUILD.bazel +++ b/src/material/core/theming/tests/BUILD.bazel @@ -1,6 +1,6 @@ +load("@bazel_skylib//rules:build_test.bzl", "build_test") load("//tools:defaults.bzl", "sass_binary") load("//tools:defaults2.bzl", "jasmine_test", "ts_project") -load("@bazel_skylib//rules:build_test.bzl", "build_test") package(default_visibility = ["//visibility:public"]) @@ -11,7 +11,12 @@ sass_binary( testonly = True, src = "test-css-variables-theme.scss", deps = [ - "//src/material/core:theming_scss_lib", + "//src/material/core/color", + "//src/material/core/density/private:all_density", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography:all_typography", ], ) @@ -23,7 +28,12 @@ sass_binary( testonly = True, src = "test-theming-api.scss", deps = [ - "//src/material/core:theming_scss_lib", + "//src/material/core/color", + "//src/material/core/density/private:all_density", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming", + "//src/material/core/theming:core_all_theme", + "//src/material/core/typography:all_typography", ], ) diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss index 3aa05ef1e964..566992f8ceac 100644 --- a/src/material/core/theming/tests/test-theming-api.scss +++ b/src/material/core/theming/tests/test-theming-api.scss @@ -1,13 +1,13 @@ -@use 'sass:map'; -@use '../../density/private/all-density'; @use '../../color/all-color'; +@use '../../density/private/all-density'; +@use '../../m2/palette' as m2-palette; +@use '../../m2/theming' as m2-theming; +@use '../../m2/typography' as m2-typography; @use '../../typography/all-typography'; -@use '../all-theme'; @use '../../typography/typography'; +@use '../all-theme'; @use '../theming'; -@use '../../m2/typography' as m2-typography; -@use '../../m2/palette' as m2-palette; -@use '../../m2/theming' as m2-theming; +@use 'sass:map'; // Disable theme style duplication warnings. This test intentionally generates // the same themes multiple times. diff --git a/src/material/core/tokens/BUILD.bazel b/src/material/core/tokens/BUILD.bazel new file mode 100644 index 000000000000..e6a66b56bfb6 --- /dev/null +++ b/src/material/core/tokens/BUILD.bazel @@ -0,0 +1,59 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "format_tokens", + srcs = ["_format-tokens.scss"], +) + +sass_library( + name = "token_utils", + srcs = [ + "_token-utils.scss", + ], + deps = [ + ":m3_system", + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + ], +) + +sass_library( + name = "m3_system", + srcs = ["_m3-system.scss"], + deps = [ + ":m3_tokens", + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_config_validation", + "//src/material/core/theming:_definition", + "//src/material/core/tokens/m3/definitions", + ], +) + +sass_library( + name = "token_definition", + srcs = ["_token-definition.scss"], + deps = ["//src/material/core/m2:m2_sass"], +) + +sass_library( + name = "density", + srcs = ["_density.scss"], + deps = ["//src/material/core/theming"], +) + +sass_library( + name = "m3_tokens", + srcs = ["_m3-tokens.scss"], + deps = [ + ":density", + ":format_tokens", + "//src/material/core/m2:m2_sass", + "//src/material/core/style:sass_utils", + "//src/material/core/tokens/m2", + "//src/material/core/tokens/m3", + "//src/material/core/tokens/m3/definitions", + ], +) diff --git a/src/material/core/tokens/m2/BUILD.bazel b/src/material/core/tokens/m2/BUILD.bazel new file mode 100644 index 000000000000..e66c0831cc74 --- /dev/null +++ b/src/material/core/tokens/m2/BUILD.bazel @@ -0,0 +1,13 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "m2", + srcs = ["_index.scss"], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens/m2/mat", + ], +) diff --git a/src/material/core/tokens/m2/mat/BUILD.bazel b/src/material/core/tokens/m2/mat/BUILD.bazel new file mode 100644 index 000000000000..b576a60527e2 --- /dev/null +++ b/src/material/core/tokens/m2/mat/BUILD.bazel @@ -0,0 +1,73 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "mat", + srcs = [ + "_app.scss", + "_autocomplete.scss", + "_badge.scss", + "_bottom-sheet.scss", + "_card.scss", + "_checkbox.scss", + "_chip.scss", + "_circular-progress.scss", + "_datepicker.scss", + "_dialog.scss", + "_divider.scss", + "_elevated-card.scss", + "_expansion.scss", + "_extended-fab.scss", + "_fab.scss", + "_fab-small.scss", + "_filled-button.scss", + "_filled-text-field.scss", + "_form-field.scss", + "_full-pseudo-checkbox.scss", + "_grid-list.scss", + "_icon.scss", + "_icon-button.scss", + "_legacy-button-toggle.scss", + "_linear-progress.scss", + "_list.scss", + "_menu.scss", + "_minimal-pseudo-checkbox.scss", + "_optgroup.scss", + "_option.scss", + "_outlined-button.scss", + "_outlined-card.scss", + "_outlined-text-field.scss", + "_paginator.scss", + "_plain-tooltip.scss", + "_protected-button.scss", + "_radio.scss", + "_ripple.scss", + "_secondary-navigation-tab.scss", + "_select.scss", + "_sidenav.scss", + "_slider.scss", + "_snack-bar.scss", + "_sort.scss", + "_standard-button-toggle.scss", + "_stepper.scss", + "_switch.scss", + "_tab-header.scss", + "_tab-header-with-background.scss", + "_tab-indicator.scss", + "_table.scss", + "_text-button.scss", + "_timepicker.scss", + "_tonal-button.scss", + "_toolbar.scss", + "_tree.scss", + ], + deps = [ + "//src/material/core/m2:m2_sass", + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/tokens:token_definition", + ], +) diff --git a/src/material/core/tokens/m3/BUILD.bazel b/src/material/core/tokens/m3/BUILD.bazel new file mode 100644 index 000000000000..79a2c4d44b3f --- /dev/null +++ b/src/material/core/tokens/m3/BUILD.bazel @@ -0,0 +1,11 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "m3", + srcs = ["_index.scss"], + deps = [ + "//src/material/core/tokens/m3/mat", + ], +) diff --git a/src/material/core/tokens/m3/definitions/BUILD.bazel b/src/material/core/tokens/m3/definitions/BUILD.bazel new file mode 100644 index 000000000000..227e3f497f7e --- /dev/null +++ b/src/material/core/tokens/m3/definitions/BUILD.bazel @@ -0,0 +1,18 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "definitions", + srcs = [ + "_index.scss", + "_md-ref-palette.scss", + "_md-ref-typeface.scss", + "_md-sys-color.scss", + "_md-sys-elevation.scss", + "_md-sys-motion.scss", + "_md-sys-shape.scss", + "_md-sys-state.scss", + "_md-sys-typescale.scss", + ], +) diff --git a/src/material/core/tokens/m3/mat/BUILD.bazel b/src/material/core/tokens/m3/mat/BUILD.bazel new file mode 100644 index 000000000000..b2db9aaba5b0 --- /dev/null +++ b/src/material/core/tokens/m3/mat/BUILD.bazel @@ -0,0 +1,68 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "mat", + srcs = [ + "_app.scss", + "_autocomplete.scss", + "_badge.scss", + "_bottom-sheet.scss", + "_card.scss", + "_checkbox.scss", + "_chip.scss", + "_circular-progress.scss", + "_datepicker.scss", + "_dialog.scss", + "_divider.scss", + "_elevated-card.scss", + "_expansion.scss", + "_extended-fab.scss", + "_fab.scss", + "_fab-small.scss", + "_filled-button.scss", + "_filled-text-field.scss", + "_form-field.scss", + "_full-pseudo-checkbox.scss", + "_grid-list.scss", + "_icon.scss", + "_icon-button.scss", + "_linear-progress.scss", + "_list.scss", + "_menu.scss", + "_minimal-pseudo-checkbox.scss", + "_optgroup.scss", + "_option.scss", + "_outlined-button.scss", + "_outlined-card.scss", + "_outlined-text-field.scss", + "_paginator.scss", + "_plain-tooltip.scss", + "_protected-button.scss", + "_radio.scss", + "_ripple.scss", + "_secondary-navigation-tab.scss", + "_select.scss", + "_sidenav.scss", + "_slider.scss", + "_snack-bar.scss", + "_sort.scss", + "_standard-button-toggle.scss", + "_stepper.scss", + "_switch.scss", + "_tab-header.scss", + "_tab-indicator.scss", + "_table.scss", + "_text-button.scss", + "_timepicker.scss", + "_tonal-button.scss", + "_toolbar.scss", + "_tree.scss", + ], + deps = [ + "//src/material/core/style:elevation", + "//src/material/core/style:sass_utils", + "//src/material/core/tokens:token_definition", + ], +) diff --git a/src/material/core/typography/BUILD.bazel b/src/material/core/typography/BUILD.bazel new file mode 100644 index 000000000000..325583e8960d --- /dev/null +++ b/src/material/core/typography/BUILD.bazel @@ -0,0 +1,84 @@ +load("//tools:defaults.bzl", "sass_library") + +package(default_visibility = ["//visibility:public"]) + +sass_library( + name = "all_typography", + srcs = [ + "_all-typography.scss", + ], + deps = [ + ":typography", + "//src/material/autocomplete:theme", + "//src/material/badge:theme", + "//src/material/bottom-sheet:theme", + "//src/material/button:fab_theme", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", + "//src/material/button-toggle:theme", + "//src/material/card:theme", + "//src/material/checkbox:theme", + "//src/material/chips:theme", + "//src/material/core:theme_sass", + "//src/material/core/m2:m2_sass", + "//src/material/core/theming:_inspection", + "//src/material/datepicker:theme", + "//src/material/dialog:theme", + "//src/material/divider:theme", + "//src/material/expansion:theme", + "//src/material/form-field:theme", + "//src/material/grid-list:theme", + "//src/material/icon:theme", + "//src/material/input:theme", + "//src/material/list:theme", + "//src/material/menu:theme", + "//src/material/paginator:theme", + "//src/material/progress-bar:theme", + "//src/material/progress-spinner:theme", + "//src/material/radio:theme", + "//src/material/select:theme", + "//src/material/sidenav:theme", + "//src/material/slide-toggle:theme", + "//src/material/slider:theme", + "//src/material/snack-bar:theme", + "//src/material/sort:theme", + "//src/material/stepper:theme", + "//src/material/table:theme", + "//src/material/tabs:theme", + "//src/material/timepicker:theme", + "//src/material/toolbar:theme", + "//src/material/tooltip:theme", + "//src/material/tree:theme", + ], +) + +sass_library( + name = "typography", + srcs = [ + "_typography.scss", + ], + deps = [ + ":_versioning", + ":utils", + "//src/material/core/theming:_inspection", + ], +) + +sass_library( + name = "utils", + srcs = [ + "_typography-utils.scss", + ], +) + +sass_library( + name = "_versioning", + srcs = ["_versioning.scss"], + deps = ["//src/material/core/m2:m2_sass"], +) + +sass_library( + name = "_typography_utils_deprecated", + srcs = ["_typography-utils-deprecated.scss"], + deps = [":utils"], +) diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel index ff0cd5247ea4..3cefcd6c7e80 100644 --- a/src/material/datepicker/BUILD.bazel +++ b/src/material/datepicker/BUILD.bazel @@ -10,88 +10,146 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "datepicker", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":datepicker-content.css", - ":datepicker-actions.css", - ":datepicker-toggle.css", - ":date-range-input.css", - ":calendar-body.css", - ":calendar.css", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_datepicker-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/button", - "//src/material/core", - "//src/material/form-field", - "//src/material/input", + "//src/material/button:icon_button_theme", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "datepicker_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "datepicker_legacy_compat", + srcs = ["_datepicker-legacy-compat.scss"], deps = [ - "//src/material/button:button_scss_lib", - "//src/material/core:core_scss_lib", + "//src/material/button:icon_button_theme", + "//src/material/button:theme", ], ) sass_binary( - name = "datepicker_content_scss", + name = "datepicker_content_css", src = "datepicker-content.scss", - deps = ["//src/material/core:core_scss_lib"], + deps = [ + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], ) sass_binary( - name = "datepicker_toggle_scss", - src = "datepicker-toggle.scss", + name = "calendar_css", + src = "calendar.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/focus-indicators", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "calendar_scss", - src = "calendar.scss", + name = "calendar_body_css", + src = "calendar-body.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:button_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "calendar_body_scss", - src = "calendar-body.scss", + name = "datepicker_toggle_css", + src = "datepicker-toggle.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "date_range_input_scss", + name = "datepicker_actions_css", + src = "datepicker-actions.scss", +) + +sass_binary( + name = "date_range_input_css", src = "date-range-input.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:variables", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "datepicker_actions_scss", - src = "datepicker-actions.scss", +ng_project( + name = "datepicker", + srcs = [ + "aria-accessible-name.ts", + "calendar.ts", + "calendar-body.ts", + "date-range-input.ts", + "date-range-input-parts.ts", + "date-range-picker.ts", + "date-range-selection-strategy.ts", + "date-selection-model.ts", + "datepicker.ts", + "datepicker-actions.ts", + "datepicker-animations.ts", + "datepicker-base.ts", + "datepicker-errors.ts", + "datepicker-input.ts", + "datepicker-input-base.ts", + "datepicker-intl.ts", + "datepicker-module.ts", + "datepicker-toggle.ts", + "index.ts", + "month-view.ts", + "multi-year-view.ts", + "public-api.ts", + "year-view.ts", + ], + assets = [ + "calendar-body.html", + "calendar-header.html", + "calendar.html", + "date-range-input.html", + "datepicker-content.html", + "datepicker-toggle.html", + "month-view.html", + "multi-year-view.html", + "year-view.html", + ":datepicker_actions_css", + ":datepicker_content_css", + ":datepicker_toggle_css", + ":date_range_input_css", + ":calendar_css", + ":calendar_body_css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/button", + "//src/material/core", + "//src/material/form-field", + "//src/material/input", + ], ) ts_project( @@ -128,7 +186,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":datepicker_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/dialog/BUILD.bazel b/src/material/dialog/BUILD.bazel index 9dfefaaef26f..abef3e70f4a2 100644 --- a/src/material/dialog/BUILD.bazel +++ b/src/material/dialog/BUILD.bazel @@ -10,35 +10,62 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "dialog", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":dialog_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_dialog-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "dialog_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material/core:core_scss_lib", + name = "dialog_legacy_padding", + srcs = [ + "_dialog-legacy-padding.scss", ], ) sass_binary( - name = "dialog_scss", + name = "css", src = "dialog.scss", deps = [ - ":dialog_scss_lib", - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/style:variables", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "dialog", + srcs = [ + "dialog.ts", + "dialog-animations.ts", + "dialog-config.ts", + "dialog-container.ts", + "dialog-content-directives.ts", + "dialog-ref.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "dialog-container.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -76,7 +103,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":dialog_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/divider/BUILD.bazel b/src/material/divider/BUILD.bazel index 3f9b594ad4e7..6302d0b18280 100644 --- a/src/material/divider/BUILD.bazel +++ b/src/material/divider/BUILD.bazel @@ -10,32 +10,46 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "divider", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":divider.css"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = ["_divider-theme.scss"], deps = [ - "//:node_modules/@angular/core", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_library( - name = "divider_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], + name = "offset_sass", + srcs = ["_divider-offset.scss"], ) sass_binary( - name = "divider_scss", + name = "css", src = "divider.scss", deps = [ - ":divider_scss_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "divider", + srcs = [ + "divider.ts", + "divider-module.ts", + "index.ts", + "public-api.ts", + ], + assets = [":css"], + deps = [ + "//:node_modules/@angular/core", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -65,7 +79,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":divider_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/expansion/BUILD.bazel b/src/material/expansion/BUILD.bazel index 9fbcccd54d39..799f89d9a33c 100644 --- a/src/material/expansion/BUILD.bazel +++ b/src/material/expansion/BUILD.bazel @@ -10,47 +10,77 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "expansion", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = glob(["**/*.html"]) + [ - ":expansion-panel.css", - ":expansion-panel-header.css", +sass_library( + name = "theme", + srcs = [ + "_expansion-theme.scss", ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/platform-browser", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "expansion_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - sass_binary( - name = "expansion_panel_scss", + name = "css", src = "expansion-panel.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/style:elevation", + "//src/material/core/style:variables", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "expansion_panel_header_scss", + name = "header_css", src = "expansion-panel-header.scss", deps = [ - ":expansion_scss_lib", + ":variables", "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_library( + name = "variables", + srcs = ["_expansion-variables.scss"], +) + +ng_project( + name = "expansion", + srcs = [ + "accordion.ts", + "accordion-base.ts", + "expansion-animations.ts", + "expansion-module.ts", + "expansion-panel.ts", + "expansion-panel-base.ts", + "expansion-panel-content.ts", + "expansion-panel-header.ts", + "index.ts", + "public-api.ts", + ], + assets = [ + "expansion-panel-header.html", + "expansion-panel.html", + ":css", + ":header_css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/platform-browser", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -80,7 +110,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":expansion_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/form-field/BUILD.bazel b/src/material/form-field/BUILD.bazel index 84db7ba5f6d9..0160f7721608 100644 --- a/src/material/form-field/BUILD.bazel +++ b/src/material/form-field/BUILD.bazel @@ -9,42 +9,46 @@ load("//tools:defaults2.bzl", "ng_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "form-field", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":form_field_scss"] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - ], -) - sass_library( - name = "form_field_scss_lib", + name = "theme", srcs = [ "_form-field-theme.scss", ], deps = [ - ":form_field_partials", - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "form_field_scss", + name = "css", src = "form-field.scss", deps = [ ":form_field_partials", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_library( + name = "form_field_scss_lib", + srcs = [ + "_form-field-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) @@ -63,7 +67,37 @@ sass_library( ], deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:layout_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "form-field", + srcs = [ + "form-field.ts", + "form-field-animations.ts", + "form-field-control.ts", + "form-field-errors.ts", + "index.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "form-field.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", + "//src/material/form-field/directives", ], ) @@ -74,7 +108,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":form_field_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/form-field/directives/BUILD.bazel b/src/material/form-field/directives/BUILD.bazel new file mode 100644 index 000000000000..ff583dd5d324 --- /dev/null +++ b/src/material/form-field/directives/BUILD.bazel @@ -0,0 +1,25 @@ +load("//tools:defaults2.bzl", "ng_project") + +package(default_visibility = ["//visibility:public"]) + +ng_project( + name = "directives", + srcs = [ + "error.ts", + "floating-label.ts", + "hint.ts", + "label.ts", + "line-ripple.ts", + "notched-outline.ts", + "prefix.ts", + "suffix.ts", + ], + assets = [ + "notched-outline.html", + ], + deps = [ + "//:node_modules/rxjs", + "//src/cdk/a11y", + "//src/cdk/observers/private", + ], +) diff --git a/src/material/grid-list/BUILD.bazel b/src/material/grid-list/BUILD.bazel index 05c2a655b47d..ea54a9eb810d 100644 --- a/src/material/grid-list/BUILD.bazel +++ b/src/material/grid-list/BUILD.bazel @@ -10,13 +10,51 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_grid-list-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "css", + src = "grid-list.scss", + deps = [ + "//src/material/core/style:layout_common", + "//src/material/core/style:list_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "grid-list", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":grid-list.css"] + glob(["**/*.html"]), + srcs = [ + "grid-list.ts", + "grid-list-base.ts", + "grid-list-module.ts", + "grid-tile.ts", + "index.ts", + "public-api.ts", + "tile-coordinator.ts", + "tile-styler.ts", + ], + assets = [ + "grid-list.html", + "grid-tile-text.html", + "grid-tile.html", + ":css", + ], deps = [ "//:node_modules/@angular/core", "//src:dev_mode_types", @@ -25,18 +63,6 @@ ng_project( ], ) -sass_library( - name = "grid_list_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_binary( - name = "grid_list_scss", - src = "grid-list.scss", - deps = ["//src/material/core:core_scss_lib"], -) - ts_project( name = "unit_test_sources", testonly = True, @@ -63,7 +89,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":grid_list_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/icon/BUILD.bazel b/src/material/icon/BUILD.bazel index 7fdb4264ac42..165813d03bfd 100644 --- a/src/material/icon/BUILD.bazel +++ b/src/material/icon/BUILD.bazel @@ -10,13 +10,45 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_icon-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_binary( + name = "css", + src = "icon.scss", + deps = [ + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "icon", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":icon.css"] + glob(["**/*.html"]), + srcs = [ + "fake-svgs.ts", + "icon.ts", + "icon-module.ts", + "icon-registry.ts", + "index.ts", + "public-api.ts", + "trusted-types.ts", + ], + assets = [ + ":css", + ], deps = [ "//:node_modules/@angular/common", "//:node_modules/@angular/core", @@ -27,18 +59,6 @@ ng_project( ], ) -sass_library( - name = "icon_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_binary( - name = "icon_scss", - src = "icon.scss", - deps = ["//src/material/core:core_scss_lib"], -) - ts_project( name = "unit_test_sources", testonly = True, @@ -66,7 +86,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":icon_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/input/BUILD.bazel b/src/material/input/BUILD.bazel index 220dc2f73131..87a1b5795b92 100644 --- a/src/material/input/BUILD.bazel +++ b/src/material/input/BUILD.bazel @@ -9,13 +9,30 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_input-theme.scss", + ], + deps = [ + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/typography", + ], +) + ng_project( name = "input", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = glob(["**/*.html"]), + srcs = [ + "index.ts", + "input.ts", + "input-errors.ts", + "input-value-accessor.ts", + "module.ts", + "public-api.ts", + ], deps = [ "//:node_modules/@angular/core", "//:node_modules/@angular/forms", @@ -26,12 +43,6 @@ ng_project( ], ) -sass_library( - name = "input_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - ########### # Testing ########### @@ -69,7 +80,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":input_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/list/BUILD.bazel b/src/material/list/BUILD.bazel index e6de2cc1d3dc..7d96910de6cd 100644 --- a/src/material/list/BUILD.bazel +++ b/src/material/list/BUILD.bazel @@ -10,73 +10,92 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "list", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [ - ":list_scss", - ":list_option_scss", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_list-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - "//src/material/divider", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "hcm_indicator_scss_lib", - srcs = ["_list-item-hcm-indicator.scss"], +sass_binary( + name = "css", + src = "list.scss", + deps = [ + ":list_inherited_structure", + ":list_item_hcm_indicator", + "//src/material/core/style:layout_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], ) sass_library( - name = "inherited_structure_scss_lib", - srcs = ["_list-inherited-structure.scss"], - deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", - ], + name = "list_item_hcm_indicator", + srcs = ["_list-item-hcm-indicator.scss"], + deps = ["//src/cdk:sass_lib"], ) sass_library( - name = "list_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "list_inherited_structure", + srcs = ["_list-inherited-structure.scss"], deps = [ - ":hcm_indicator_scss_lib", - "//src/material/checkbox:checkbox_scss_lib", - "//src/material/core:core_scss_lib", - "//src/material/radio:radio_scss_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "list_scss", - src = "list.scss", + name = "option_css", + src = "list-option.scss", deps = [ - ":hcm_indicator_scss_lib", - ":inherited_structure_scss_lib", - "//src/material/core:core_scss_lib", + ":list_item_hcm_indicator", + "//src/material/checkbox:checkbox_common", + "//src/material/radio:radio_common", ], ) -sass_binary( - name = "list_option_scss", - src = "list-option.scss", +ng_project( + name = "list", + srcs = [ + "action-list.ts", + "index.ts", + "list.ts", + "list-base.ts", + "list-item-sections.ts", + "list-module.ts", + "list-option.ts", + "list-option-types.ts", + "nav-list.ts", + "public-api.ts", + "selection-list.ts", + "subheader.ts", + "tokens.ts", + ], + assets = [ + "list-item.html", + "list-option.html", + ":css", + ":option_css", + ], deps = [ - ":list_scss_lib", - "//src/cdk:sass_lib", - "//src/material/checkbox:checkbox_scss_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", + "//src/material/divider", ], ) @@ -110,7 +129,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":list_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/menu/BUILD.bazel b/src/material/menu/BUILD.bazel index 6c9e79adf031..2532c265860a 100644 --- a/src/material/menu/BUILD.bazel +++ b/src/material/menu/BUILD.bazel @@ -10,38 +10,61 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "menu", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [":menu_scss"] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - ], -) - sass_library( - name = "menu_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_menu-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "menu_scss", + name = "css", src = "menu.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:button_common", + "//src/material/core/style:menu_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "menu", + srcs = [ + "index.ts", + "menu.ts", + "menu-animations.ts", + "menu-content.ts", + "menu-errors.ts", + "menu-item.ts", + "menu-panel.ts", + "menu-positions.ts", + "menu-trigger.ts", + "module.ts", + "public-api.ts", + ], + assets = [ + "menu-item.html", + "menu.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -75,7 +98,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":menu_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel index 059df1779dc0..f7c6809140a8 100644 --- a/src/material/paginator/BUILD.bazel +++ b/src/material/paginator/BUILD.bazel @@ -10,13 +10,46 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_paginator-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "css", + src = "paginator.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "paginator", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":paginator.css"] + glob(["**/*.html"]), + srcs = [ + "index.ts", + "module.ts", + "paginator.ts", + "paginator-intl.ts", + "public-api.ts", + ], + assets = [ + "paginator.html", + ":css", + ], deps = [ "//:node_modules/@angular/core", "//:node_modules/@angular/forms", @@ -28,23 +61,6 @@ ng_project( ], ) -sass_library( - name = "paginator_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "paginator_scss", - src = "paginator.scss", - deps = [ - "//src/cdk:sass_lib", - "//src/material:sass_lib", - ], -) - ts_project( name = "paginator_tests_lib", testonly = True, @@ -76,7 +92,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":paginator_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/prebuilt-themes/BUILD.bazel b/src/material/prebuilt-themes/BUILD.bazel index b0ffdf2da7bc..cee8f50e28ae 100644 --- a/src/material/prebuilt-themes/BUILD.bazel +++ b/src/material/prebuilt-themes/BUILD.bazel @@ -9,56 +9,56 @@ package(default_visibility = ["//visibility:public"]) genrule( name = "indigo-pink", - srcs = ["//src/material/core:theming/prebuilt/indigo-pink.css"], + srcs = ["//src/material/core/theming/prebuilt:indigo-pink-theme"], outs = ["indigo-pink.css"], cmd = "cp $< $@", ) genrule( name = "deeppurple-amber", - srcs = ["//src/material/core:theming/prebuilt/deeppurple-amber.css"], + srcs = ["//src/material/core/theming/prebuilt:deeppurple-amber-theme"], outs = ["deeppurple-amber.css"], cmd = "cp $< $@", ) genrule( name = "pink-bluegrey", - srcs = ["//src/material/core:theming/prebuilt/pink-bluegrey.css"], + srcs = ["//src/material/core/theming/prebuilt:pink-bluegrey-theme"], outs = ["pink-bluegrey.css"], cmd = "cp $< $@", ) genrule( name = "purple-green", - srcs = ["//src/material/core:theming/prebuilt/purple-green.css"], + srcs = ["//src/material/core/theming/prebuilt:purple-green-theme"], outs = ["purple-green.css"], cmd = "cp $< $@", ) genrule( name = "azure-blue", - srcs = ["//src/material/core:theming/prebuilt/azure-blue.css"], + srcs = ["//src/material/core/theming/prebuilt:azure_blue"], outs = ["azure-blue.css"], cmd = "cp $< $@", ) genrule( name = "rose-red", - srcs = ["//src/material/core:theming/prebuilt/rose-red.css"], + srcs = ["//src/material/core/theming/prebuilt:rose_red"], outs = ["rose-red.css"], cmd = "cp $< $@", ) genrule( name = "cyan-orange", - srcs = ["//src/material/core:theming/prebuilt/cyan-orange.css"], + srcs = ["//src/material/core/theming/prebuilt:cyan_orange"], outs = ["cyan-orange.css"], cmd = "cp $< $@", ) genrule( name = "magenta-violet", - srcs = ["//src/material/core:theming/prebuilt/magenta-violet.css"], + srcs = ["//src/material/core/theming/prebuilt:magenta_violet"], outs = ["magenta-violet.css"], cmd = "cp $< $@", ) diff --git a/src/material/progress-bar/BUILD.bazel b/src/material/progress-bar/BUILD.bazel index c45705944f12..e13a947e3d7a 100644 --- a/src/material/progress-bar/BUILD.bazel +++ b/src/material/progress-bar/BUILD.bazel @@ -10,35 +10,48 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "progress-bar", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [":progress_bar_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_progress-bar-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_library( - name = "progress_bar_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "progress-bar.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "progress_bar_scss", - src = "progress-bar.scss", +ng_project( + name = "progress-bar", + srcs = [ + "index.ts", + "module.ts", + "progress-bar.ts", + "public-api.ts", + ], + assets = [ + "progress-bar.html", + ":css", + ], deps = [ - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//src/material/core", ], ) @@ -70,7 +83,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":progress_bar_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/progress-spinner/BUILD.bazel b/src/material/progress-spinner/BUILD.bazel index 37ccbdb236eb..779b25c40dca 100644 --- a/src/material/progress-spinner/BUILD.bazel +++ b/src/material/progress-spinner/BUILD.bazel @@ -10,37 +10,48 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "progress-spinner", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [":progress_spinner_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_progress-spinner-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_library( - name = "progress_spinner_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "progress-spinner.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "progress_spinner_scss", - src = "progress-spinner.scss", +ng_project( + name = "progress-spinner", + srcs = [ + "index.ts", + "module.ts", + "progress-spinner.ts", + "public-api.ts", + ], + assets = [ + "progress-spinner.html", + ":css", + ], deps = [ - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -73,7 +84,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":progress_spinner_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/radio/BUILD.bazel b/src/material/radio/BUILD.bazel index 0dc6fd46daff..c12b7532dc0a 100644 --- a/src/material/radio/BUILD.bazel +++ b/src/material/radio/BUILD.bazel @@ -10,36 +10,60 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "radio", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":radio_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_radio-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "radio_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "radio_common", + srcs = ["_radio-common.scss"], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "radio_scss", + name = "css", src = "radio.scss", deps = [ - ":radio_scss_lib", - "//src/material/core:core_scss_lib", + ":radio_common", + "//src/material/core/style:layout_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "radio", + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "radio.ts", + ], + assets = [ + "radio.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -50,7 +74,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":radio_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/select/BUILD.bazel b/src/material/select/BUILD.bazel index 59f44bbdec25..e6386b506bfa 100644 --- a/src/material/select/BUILD.bazel +++ b/src/material/select/BUILD.bazel @@ -10,15 +10,48 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_select-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "css", + src = "select.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:variables", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "select", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [":select_scss"] + glob(["**/*.html"]), + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "select.ts", + "select-animations.ts", + "select-errors.ts", + ], + assets = [ + "select.html", + ":css", + ], deps = [ "//:node_modules/@angular/common", "//:node_modules/@angular/core", @@ -31,23 +64,6 @@ ng_project( ], ) -sass_library( - name = "select_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material/core:core_scss_lib", - ], -) - -sass_binary( - name = "select_scss", - src = "select.scss", - deps = [ - "//src/cdk:sass_lib", - "//src/material:sass_lib", - ], -) - ts_project( name = "select_tests_lib", testonly = True, @@ -80,7 +96,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":select_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/sidenav/BUILD.bazel b/src/material/sidenav/BUILD.bazel index 6c2156ddbc60..a08e0bdac4c6 100644 --- a/src/material/sidenav/BUILD.bazel +++ b/src/material/sidenav/BUILD.bazel @@ -10,13 +10,49 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_sidenav-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_binary( + name = "css", + src = "drawer.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/style:layout_common", + "//src/material/core/style:variables", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "sidenav", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":drawer.css"] + glob(["**/*.html"]), + srcs = [ + "drawer.ts", + "drawer-animations.ts", + "index.ts", + "public-api.ts", + "sidenav.ts", + "sidenav-module.ts", + ], + assets = [ + "drawer-container.html", + "drawer.html", + "sidenav-container.html", + ":css", + ], deps = [ "//:node_modules/@angular/common", "//:node_modules/@angular/core", @@ -28,21 +64,6 @@ ng_project( ], ) -sass_library( - name = "sidenav_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_binary( - name = "drawer_scss", - src = "drawer.scss", - deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", - ], -) - ts_project( name = "unit_test_sources", testonly = True, @@ -70,7 +91,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":sidenav_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/slide-toggle/BUILD.bazel b/src/material/slide-toggle/BUILD.bazel index 65d4f6ca76b6..768713c8ef42 100644 --- a/src/material/slide-toggle/BUILD.bazel +++ b/src/material/slide-toggle/BUILD.bazel @@ -10,39 +10,53 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "slide-toggle", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - "harness/**", - ], - ), - assets = [":slide_toggle_scss"] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/animations", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src/material/core", - ], -) - sass_library( - name = "slide_toggle_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_slide-toggle-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "slide_toggle_scss", + name = "css", src = "slide-toggle.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:layout_common", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "slide-toggle", + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "slide-toggle.ts", + "slide-toggle-config.ts", + ], + assets = [ + "slide-toggle.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/animations", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src/material/core", ], ) @@ -75,7 +89,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":slide_toggle_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/slider/BUILD.bazel b/src/material/slider/BUILD.bazel index e6a1dcb117e3..4b5c81caef60 100644 --- a/src/material/slider/BUILD.bazel +++ b/src/material/slider/BUILD.bazel @@ -11,47 +11,64 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "slider", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":slider_scss", - ":slider_thumb_scss", - ] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - ], -) - sass_library( - name = "slider_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_slider-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "slider_scss", + name = "slider-css", src = "slider.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "slider_thumb_scss", + name = "slider-thumb-css", src = "slider-thumb.scss", ) +ng_project( + name = "slider", + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "slider.ts", + "slider-input.ts", + "slider-interface.ts", + "slider-thumb.ts", + ], + assets = [ + "slider.html", + "slider-thumb.html", + ":slider-css", + ":slider-thumb-css", + ], + deps = [ + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", + ], +) + markdown_to_html( name = "overview", srcs = [":slider.md"], @@ -59,7 +76,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":slider_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/snack-bar/BUILD.bazel b/src/material/snack-bar/BUILD.bazel index 95d52f3a31b5..b08271d089ba 100644 --- a/src/material/snack-bar/BUILD.bazel +++ b/src/material/snack-bar/BUILD.bazel @@ -10,46 +10,66 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "snack-bar", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":simple_snack_bar_scss", - ":snack_bar_container_scss", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_snack-bar-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/button", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "snack_bar_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "container_css", + src = "snack-bar-container.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/cdk:sass_lib", + "//src/material/core/style:elevation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "simple_snack_bar_scss", + name = "css", src = "simple-snack-bar.scss", ) -sass_binary( - name = "snack_bar_container_scss", - src = "snack-bar-container.scss", +ng_project( + name = "snack-bar", + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "simple-snack-bar.ts", + "snack-bar.ts", + "snack-bar-animations.ts", + "snack-bar-config.ts", + "snack-bar-container.ts", + "snack-bar-content.ts", + "snack-bar-ref.ts", + ], + assets = [ + "simple-snack-bar.html", + "snack-bar-container.html", + ":container_css", + ":css", + ], deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/button", + "//src/material/core", ], ) @@ -87,7 +107,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":snack_bar_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/sort/BUILD.bazel b/src/material/sort/BUILD.bazel index 76bd4b376a94..8505cc8832f0 100644 --- a/src/material/sort/BUILD.bazel +++ b/src/material/sort/BUILD.bazel @@ -10,36 +10,55 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "sort", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":sort-header.css"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_sort-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "sort_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "sort-header.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/focus-indicators", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "sort_header_scss", - src = "sort-header.scss", +ng_project( + name = "sort", + srcs = [ + "index.ts", + "public-api.ts", + "sort.ts", + "sort-animations.ts", + "sort-direction.ts", + "sort-errors.ts", + "sort-header.ts", + "sort-header-intl.ts", + "sort-module.ts", + ], + assets = [ + "sort-header.html", + ":css", + ], deps = [ - "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -72,7 +91,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":sort_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/stepper/BUILD.bazel b/src/material/stepper/BUILD.bazel index 211df6c6af96..f46e8e12f420 100644 --- a/src/material/stepper/BUILD.bazel +++ b/src/material/stepper/BUILD.bazel @@ -10,53 +10,81 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "stepper", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":stepper.css", - ":step-header.css", - ] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/@angular/forms", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - "//src/material/icon", - ], -) - sass_library( - name = "stepper_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_stepper-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "stepper_scss", + name = "css", src = "stepper.scss", deps = [ - ":stepper_scss_lib", + ":variables", "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "step_header_scss", + name = "header_css", src = "step-header.scss", deps = [ - ":stepper_scss_lib", + ":variables", "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:layout_common", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +sass_library( + name = "variables", + srcs = ["_stepper-variables.scss"], +) + +ng_project( + name = "stepper", + srcs = [ + "index.ts", + "public-api.ts", + "step-content.ts", + "step-header.ts", + "step-label.ts", + "stepper.ts", + "stepper-animations.ts", + "stepper-button.ts", + "stepper-icon.ts", + "stepper-intl.ts", + "stepper-module.ts", + ], + assets = [ + "step.html", + "step-header.html", + "stepper.html", + ":css", + ":header_css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/@angular/forms", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", + "//src/material/icon", ], ) @@ -91,7 +119,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":stepper_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index 5b780f902531..59ab1f789135 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -10,47 +10,62 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "table", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":table_scss"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_table-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - "//src/material/paginator", - "//src/material/sort", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "table_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material/core:core_scss_lib", + name = "flex_sass", + srcs = [ + "_table-flex-styles.scss", ], ) sass_binary( - name = "table_scss", + name = "css", src = "table.scss", deps = [ - ":table_flex_scss_lib", - "//src/material/core:core_scss_lib", + ":flex_sass", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_library( - name = "table_flex_scss_lib", +ng_project( + name = "table", srcs = [ - "_table-flex-styles.scss", + "cell.ts", + "index.ts", + "module.ts", + "public-api.ts", + "row.ts", + "table.ts", + "table-data-source.ts", + "text-column.ts", + ], + assets = [":css"], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", + "//src/material/paginator", + "//src/material/sort", ], - deps = ["//src/material/core:core_scss_lib"], ) ########### @@ -88,7 +103,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":table_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/tabs/BUILD.bazel b/src/material/tabs/BUILD.bazel index 0880e99a3159..28c53dc0bd4d 100644 --- a/src/material/tabs/BUILD.bazel +++ b/src/material/tabs/BUILD.bazel @@ -10,70 +10,115 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "tabs", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [ - ":tab-body.css", - ":tab-header.css", - ":tab-group.css", - ":tab-nav-bar/tab-nav-bar.css", - ":tab-nav-bar/tab-link.css", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_tabs-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_library( - name = "tabs_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "sass", + srcs = [ + "_tabs-common.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:vendor_prefixes", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) sass_binary( - name = "tab_body_scss", - src = "tab-body.scss", + name = "tab_group_css", + src = "tab-group.scss", deps = [ - "//src/material/core:core_scss_lib", + ":sass", + "//src/material/core/style:private", + "//src/material/core/style:variables", ], ) sass_binary( - name = "tab_header_scss", - src = "tab-header.scss", - deps = [":tabs_scss_lib"], + name = "tab_nav_bar_css", + src = "tab-nav-bar/tab-nav-bar.scss", + deps = [ + ":sass", + ], ) sass_binary( - name = "tab_group_scss", - src = "tab-group.scss", + name = "tab_link_css", + src = "tab-nav-bar/tab-link.scss", deps = [ - ":tabs_scss_lib", + ":sass", + "//src/material/core/style:variables", ], ) sass_binary( - name = "tab_nav_bar_scss", - src = "tab-nav-bar/tab-nav-bar.scss", - deps = [":tabs_scss_lib"], + name = "tab_header_css", + src = "tab-header.scss", + deps = [ + ":sass", + "//src/cdk:sass_lib", + ], ) sass_binary( - name = "tab_link_scss", - src = "tab-nav-bar/tab-link.scss", + name = "tab_body_css", + src = "tab-body.scss", + deps = ["//src/material/core/style:layout_common"], +) + +ng_project( + name = "tabs", + srcs = [ + "index.ts", + "ink-bar.ts", + "module.ts", + "paginated-tab-header.ts", + "public-api.ts", + "tab.ts", + "tab-body.ts", + "tab-config.ts", + "tab-content.ts", + "tab-group.ts", + "tab-header.ts", + "tab-label.ts", + "tab-label-wrapper.ts", + "tab-nav-bar/tab-nav-bar.ts", + "tabs-animations.ts", + ], + assets = [ + "tab-body.html", + "tab-group.html", + "tab-header.html", + "tab.html", + "tab-nav-bar/tab-nav-bar.html", + "tab-nav-bar/tab-link.html", + ":tab_group_css", + ":tab-nav-bar/tab-nav-bar.css", + ":tab-nav-bar/tab-link.css", + ":tab_header_css", + ":tab_body_css", + ], deps = [ - ":tabs_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -108,7 +153,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":tabs_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/timepicker/BUILD.bazel b/src/material/timepicker/BUILD.bazel index 0c2139391d8e..93f808ccad35 100644 --- a/src/material/timepicker/BUILD.bazel +++ b/src/material/timepicker/BUILD.bazel @@ -10,13 +10,48 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) +sass_library( + name = "theme", + srcs = [ + "_timepicker-theme.scss", + ], + deps = [ + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", + ], +) + +sass_binary( + name = "timepicker_css", + src = "timepicker.scss", + deps = [ + "//src/cdk:sass_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + ng_project( name = "timepicker", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":timepicker.css"] + glob(["**/*.html"]), + srcs = [ + "index.ts", + "public-api.ts", + "timepicker.ts", + "timepicker-input.ts", + "timepicker-module.ts", + "timepicker-toggle.ts", + "util.ts", + ], + assets = [ + "timepicker.html", + "timepicker-toggle.html", + ":timepicker_css", + ], deps = [ "//:node_modules/@angular/core", "//:node_modules/@angular/forms", @@ -29,18 +64,6 @@ ng_project( ], ) -sass_library( - name = "timepicker_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], -) - -sass_binary( - name = "timepicker_scss", - src = "timepicker.scss", - deps = ["//src/material/core:core_scss_lib"], -) - ts_project( name = "unit_test_sources", testonly = True, @@ -72,7 +95,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":timepicker_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/toolbar/BUILD.bazel b/src/material/toolbar/BUILD.bazel index d65013a3196a..64b1535667bb 100644 --- a/src/material/toolbar/BUILD.bazel +++ b/src/material/toolbar/BUILD.bazel @@ -10,36 +10,51 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "toolbar", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":toolbar.css"] + glob(["**/*.html"]), - deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//src:dev_mode_types", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", - ], -) - sass_library( - name = "toolbar_scss_lib", - srcs = glob(["**/_*.scss"]), + name = "theme", + srcs = [ + "_toolbar-theme.scss", + ], deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) sass_binary( - name = "toolbar_scss", + name = "css", src = "toolbar.scss", deps = [ "//src/cdk:sass_lib", - "//src/material/core:core_scss_lib", + "//src/material/core/style:variables", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + ], +) + +ng_project( + name = "toolbar", + srcs = [ + "index.ts", + "public-api.ts", + "toolbar.ts", + "toolbar-module.ts", + ], + assets = [ + "toolbar.html", + ":css", + ], + deps = [ + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//src:dev_mode_types", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -69,7 +84,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":toolbar_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/tooltip/BUILD.bazel b/src/material/tooltip/BUILD.bazel index 78d36cc9420a..0db2f1b8732c 100644 --- a/src/material/tooltip/BUILD.bazel +++ b/src/material/tooltip/BUILD.bazel @@ -10,39 +10,50 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "tooltip", - srcs = glob( - ["**/*.ts"], - exclude = [ - "**/*.spec.ts", - ], - ), - assets = [ - ":tooltip_scss", - ] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_tooltip-theme.scss", + ], deps = [ - "//:node_modules/@angular/common", - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "tooltip_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "tooltip.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "tooltip_scss", - src = "tooltip.scss", +ng_project( + name = "tooltip", + srcs = [ + "index.ts", + "module.ts", + "public-api.ts", + "tooltip.ts", + "tooltip-animations.ts", + ], + assets = [ + "tooltip.html", + ":css", + ], deps = [ - "//src/material/core:core_scss_lib", + "//:node_modules/@angular/common", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -78,7 +89,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":tooltip_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/src/material/tree/BUILD.bazel b/src/material/tree/BUILD.bazel index 3ce9ecfb4d20..979bec9e9aee 100644 --- a/src/material/tree/BUILD.bazel +++ b/src/material/tree/BUILD.bazel @@ -10,34 +10,53 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project") package(default_visibility = ["//visibility:public"]) -ng_project( - name = "tree", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = [":tree.css"] + glob(["**/*.html"]), +sass_library( + name = "theme", + srcs = [ + "_tree-theme.scss", + ], deps = [ - "//:node_modules/@angular/core", - "//:node_modules/rxjs", - "//src/material:node_modules/@angular/cdk", - "//src/material/core", + "//src/material/core/style:sass_utils", + "//src/material/core/theming", + "//src/material/core/theming:_inspection", + "//src/material/core/theming:_validation", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", + "//src/material/core/typography", ], ) -sass_library( - name = "tree_scss_lib", - srcs = glob(["**/_*.scss"]), +sass_binary( + name = "css", + src = "tree.scss", deps = [ - "//src/material/core:core_scss_lib", + "//src/material/core/tokens:token_utils", + "//src/material/core/tokens/m2/mat", ], ) -sass_binary( - name = "tree_scss", - src = "tree.scss", +ng_project( + name = "tree", + srcs = [ + "data-source/flat-data-source.ts", + "data-source/nested-data-source.ts", + "index.ts", + "node.ts", + "outlet.ts", + "padding.ts", + "public-api.ts", + "toggle.ts", + "tree.ts", + "tree-module.ts", + ], + assets = [ + ":css", + ], deps = [ - ":tree_scss_lib", + "//:node_modules/@angular/core", + "//:node_modules/rxjs", + "//src/material:node_modules/@angular/cdk", + "//src/material/core", ], ) @@ -68,7 +87,7 @@ markdown_to_html( extract_tokens( name = "tokens", - srcs = [":tree_scss_lib"], + srcs = [":theme"], ) filegroup( diff --git a/tools/extract-tokens/extract-tokens.ts b/tools/extract-tokens/extract-tokens.ts index 7611a0851e55..07c33994fc6a 100644 --- a/tools/extract-tokens/extract-tokens.ts +++ b/tools/extract-tokens/extract-tokens.ts @@ -45,6 +45,7 @@ interface ThemeData { // Script that extracts the tokens from a specific Bazel target. if (require.main === module) { const [packagePath, outputPath, ...inputFiles] = process.argv.slice(2); + console.log(packagePath); const themeFiles = inputFiles // Filter out only the files within the package // since the path also includes dependencies.