diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 379ab849d461..f3e737490efd 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -116,7 +116,6 @@ /src/material/card/** @mmalerba /src/material/checkbox/** @mmalerba /src/material/chips/** @mmalerba @crisbeto -/src/material-experimental/mdc-core/** @crisbeto /src/material/dialog/** @devversion /src/material/form-field/** @devversion @mmalerba /src/material/list/** @mmalerba @devversion diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts index fc7dd9fcd54c..1e82ea3e64ac 100644 --- a/.ng-dev/commit-message.mts +++ b/.ng-dev/commit-message.mts @@ -43,7 +43,6 @@ export const commitMessage: CommitMessageConfig = { 'material/button', 'material/card', 'material/checkbox', - 'material-experimental/mdc-core', 'material/dialog', 'material/form-field', 'material/input', diff --git a/integration/yarn-pnp-compat/src/styles.scss b/integration/yarn-pnp-compat/src/styles.scss index 143a03b8eb9a..a0d758b41022 100644 --- a/integration/yarn-pnp-compat/src/styles.scss +++ b/integration/yarn-pnp-compat/src/styles.scss @@ -1,14 +1,17 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as experimental; $primary: mat.define-palette(mat.$blue-palette); $accent: mat.define-palette(mat.$grey-palette); -$theme: mat.define-light-theme($primary, $accent); +$theme: mat.define-light-theme(( + color: (primary: $primary, accent: $accent), + typography: mat.define-typography-config(), + density: 0 +)); @include mat.core($theme); +@include mat.all-legacy-component-themes($theme); @include mat.all-component-themes($theme); -@include experimental.all-mdc-component-themes($theme); html, body { diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index 1fd479434994..1848ad50a59f 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -28,7 +28,6 @@ $candy-app-theme: mat.define-light-theme(( // Include the default theme styles. @include mat.all-component-themes($candy-app-theme); @include mat.all-legacy-component-themes($candy-app-theme); -@include experimental.all-mdc-component-themes($candy-app-theme); @include experimental.column-resize-theme($candy-app-theme); @include experimental.popover-edit-theme($candy-app-theme); @@ -53,7 +52,6 @@ $candy-app-theme: mat.define-light-theme(( // Include the dark theme color styles. @include mat.all-component-colors($dark-colors); @include mat.all-legacy-component-colors($dark-colors); - @include experimental.all-mdc-component-colors($dark-colors); @include experimental.column-resize-color($dark-colors); @include experimental.popover-edit-color($dark-colors); @@ -71,6 +69,5 @@ $density-scales: (-1, -2, minimum, maximum); .demo-density-#{$density} { @include mat.private-all-component-densities($density); @include mat.private-all-legacy-component-densities($density); - @include experimental.all-mdc-component-densities($density); } } diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index 9d32678ffb22..c5ded514904f 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -1,5 +1,4 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as experimental; // Plus imports for other components in your app. @@ -7,14 +6,16 @@ // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** @include mat.core(); -@include experimental.all-mdc-component-typographies(); // Define the default theme (same as the example above). $candy-app-primary: mat.define-palette(mat.$indigo-palette); $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); -$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent); +$candy-app-theme: mat.define-light-theme(( + color: (primary: $candy-app-primary, accent: $candy-app-accent), + typography: mat.define-typography-config(), + density: 0 +)); // Include the default theme styles. @include mat.all-component-themes($candy-app-theme); @include mat.all-legacy-component-themes($candy-app-theme); -@include experimental.all-mdc-component-themes($candy-app-theme); diff --git a/src/material-experimental/BUILD.bazel b/src/material-experimental/BUILD.bazel index dc437ab0a21c..6dbd1275218b 100644 --- a/src/material-experimental/BUILD.bazel +++ b/src/material-experimental/BUILD.bazel @@ -19,13 +19,7 @@ ts_library( sass_library( name = "theming_scss_lib", - srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [ - "//src/material-experimental/mdc-core/color", - "//src/material-experimental/mdc-core/density", - "//src/material/core:core_scss_lib", - "//src/material-experimental/mdc-core/theming", - "//src/material-experimental/mdc-core/typography", - ], + srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS, ) sass_library( diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index 95d1b46d6440..b862e70da073 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -1,18 +1,7 @@ -// Theme bundles -@forward './mdc-core/theming/all-theme' show all-mdc-component-themes; -@forward './mdc-core/color/all-color' show all-mdc-component-colors; -@forward './mdc-core/typography/all-typography' show all-mdc-component-typographies, - define-mdc-typography-config; -@forward './mdc-core/density/all-density' show all-mdc-component-densities; - // Component themes @forward './column-resize/column-resize-theme' as column-resize-* show column-resize-color, column-resize-typography, column-resize-density, column-resize-theme; @forward './popover-edit/popover-edit-theme' as popover-edit-* show popover-edit-color, popover-edit-typography, popover-edit-density, popover-edit-theme; -// MDC-related themes -@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color, - mdc-core-density, mdc-core-typography; - // Additional public APIs for individual components diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl index 8e7b36985192..11de87db77d5 100644 --- a/src/material-experimental/config.bzl +++ b/src/material-experimental/config.bzl @@ -1,6 +1,5 @@ entryPoints = [ "column-resize", - "mdc-core", "menubar", "popover-edit", "selection", diff --git a/src/material-experimental/mdc-core/BUILD.bazel b/src/material-experimental/mdc-core/BUILD.bazel deleted file mode 100644 index a712d5eba3ef..000000000000 --- a/src/material-experimental/mdc-core/BUILD.bazel +++ /dev/null @@ -1,31 +0,0 @@ -load( - "//tools:defaults.bzl", - "ng_module", - "sass_library", -) - -package(default_visibility = ["//visibility:public"]) - -ng_module( - name = "mdc-core", - srcs = glob( - ["**/*.ts"], - exclude = ["**/*.spec.ts"], - ), - assets = glob(["**/*.html"]), - deps = [ - "//src/material/core", - "@npm//@angular/common", - "@npm//@angular/core", - "@npm//rxjs", - ], -) - -sass_library( - name = "mdc_core_scss_lib", - srcs = glob(["**/_*.scss"]), - deps = [ - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], -) diff --git a/src/material-experimental/mdc-core/_core-theme.import.scss b/src/material-experimental/mdc-core/_core-theme.import.scss deleted file mode 100644 index bddde1671cd4..000000000000 --- a/src/material-experimental/mdc-core/_core-theme.import.scss +++ /dev/null @@ -1,8 +0,0 @@ -@forward '../../material/core/theming/theming.import'; -@forward 'option/option-theme' as mat-mdc-*; -@forward 'option/optgroup-theme' as mat-mdc-optgroup-*; -@forward 'core-theme' as mat-mdc-core-*; - -@import '../../material/core/theming/theming'; -@import './option/option-theme'; -@import './option/optgroup-theme'; diff --git a/src/material-experimental/mdc-core/_core-theme.scss b/src/material-experimental/mdc-core/_core-theme.scss deleted file mode 100644 index b6628c53e122..000000000000 --- a/src/material-experimental/mdc-core/_core-theme.scss +++ /dev/null @@ -1,73 +0,0 @@ -@use 'sass:map'; -@use '@angular/material' as mat; - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - - @include mat.option-color($config); - @include mat.optgroup-color($config); - - @if $config != null { - // Provides external CSS classes for each elevation value. Each CSS class is formatted as - // `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the - // element is elevated. - @for $zValue from 0 through 24 { - $selector: 'mat-mdc-elevation-z' + $zValue; - // We need the `mat-mdc-elevation-specific`, because some MDC mixins - // come with elevation baked in and we don't have a way of removing it. - .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { - @include mat.private-theme-elevation($zValue, $config); - } - } - - // Wrapper element that provides the theme background when the user's content isn't - // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand - // selector in case the mixin is included at the top level. - .mat-mdc-app-background#{if(&, ', &.mat-mdc-app-background', '')} { - $background: map.get($config, background); - $foreground: map.get($config, foreground); - - background-color: mat.get-color-from-palette($background, background); - color: mat.get-color-from-palette($foreground, text); - } - } -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - - @include mat.option-typography($config-or-theme); - @include mat.optgroup-typography($config-or-theme); -} - -@mixin density($config-or-theme) { - $density-scale: mat.get-density-config($config-or-theme); - - @include mat.private-option-density($density-scale); - @include mat.private-optgroup-density($density-scale); -} - -// Mixin that renders all of the core styles that depend on the theme. -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - - // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that - // there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then - // the imported themes (such as `mat-ripple-theme`) should not report again. - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-core/color/BUILD.bazel b/src/material-experimental/mdc-core/color/BUILD.bazel deleted file mode 100644 index ed94e2d28ee0..000000000000 --- a/src/material-experimental/mdc-core/color/BUILD.bazel +++ /dev/null @@ -1,17 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -filegroup( - name = "color", - srcs = [":all_color"], -) - -sass_library( - name = "all_color", - srcs = ["_all-color.scss"], - deps = [ - "//src/material:sass_lib", - "//src/material-experimental/mdc-core/theming:all_themes", - ], -) diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss deleted file mode 100644 index 6362b68e0257..000000000000 --- a/src/material-experimental/mdc-core/color/_all-color.import.scss +++ /dev/null @@ -1,7 +0,0 @@ -@forward '../../../material/core/theming/theming.import'; -@forward '../../../material/core/core.import'; -@forward '../core-theme.import'; -@forward '../theming/all-theme'; -@forward 'all-color' hide all-mdc-component-colors; - -@import '../theming/all-theme'; diff --git a/src/material-experimental/mdc-core/color/_all-color.scss b/src/material-experimental/mdc-core/color/_all-color.scss deleted file mode 100644 index ea8c3a4f853e..000000000000 --- a/src/material-experimental/mdc-core/color/_all-color.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@angular/material' as mat; - -@use '../theming/all-theme'; - -@mixin all-mdc-component-colors($config-or-theme) { - // In case a theme object has been passed instead of a configuration for - // the color system, extract the color config from the theme object. - $config: if(mat.private-is-theme-object($config-or-theme), - mat.get-color-config($config-or-theme), $config-or-theme); - - @if $config == null { - @error 'No color configuration specified.'; - } - - @include all-theme.all-mdc-component-themes(( - color: $config, - typography: null, - density: null, - )); -} - -// @deprecated Use `all-mdc-component-colors`. -@mixin angular-material-mdc-color($config-or-theme) { - @include all-mdc-component-colors($config-or-theme); -} diff --git a/src/material-experimental/mdc-core/density/BUILD.bazel b/src/material-experimental/mdc-core/density/BUILD.bazel deleted file mode 100644 index e99bfa37a7e4..000000000000 --- a/src/material-experimental/mdc-core/density/BUILD.bazel +++ /dev/null @@ -1,17 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -filegroup( - name = "density", - srcs = [":all_density"], -) - -sass_library( - name = "all_density", - srcs = ["_all-density.scss"], - deps = [ - "//src/material:sass_lib", - "//src/material-experimental/mdc-core/theming:all_themes", - ], -) diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss deleted file mode 100644 index 8dc39d71599d..000000000000 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ /dev/null @@ -1,7 +0,0 @@ -@forward '../../../material/core/theming/theming.import'; -@forward '../../../material/core/core.import'; -@forward '../core-theme.import'; -@forward '../theming/all-theme'; -@forward 'all-density' show all-mdc-component-densities; - -@import '../theming/all-theme'; diff --git a/src/material-experimental/mdc-core/density/_all-density.scss b/src/material-experimental/mdc-core/density/_all-density.scss deleted file mode 100644 index b9d7f7997ef0..000000000000 --- a/src/material-experimental/mdc-core/density/_all-density.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use '@angular/material' as mat; - -@use '../theming/all-theme'; - -@mixin all-mdc-component-densities($config-or-theme) { - // In case a theme object has been passed instead of a configuration for - // the density system, extract the density config from the theme object. - $config: if(mat.private-is-theme-object($config-or-theme), - mat.get-density-config($config-or-theme), $config-or-theme); - - @if $config == null { - @error 'No density configuration specified.'; - } - - @include all-theme.all-mdc-component-themes(( - color: null, - typography: null, - density: $config, - )); -} - -// @deprecated Use `all-mdc-component-densities`. -@mixin angular-material-mdc-density($config-or-theme) { - @include all-mdc-component-densities($config-or-theme); -} diff --git a/src/material-experimental/mdc-core/index.ts b/src/material-experimental/mdc-core/index.ts deleted file mode 100644 index 676ca90f1ffa..000000000000 --- a/src/material-experimental/mdc-core/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -export * from './public-api'; diff --git a/src/material-experimental/mdc-core/public-api.ts b/src/material-experimental/mdc-core/public-api.ts deleted file mode 100644 index 2e872650b4c2..000000000000 --- a/src/material-experimental/mdc-core/public-api.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -export { - AnimationCurves, - AnimationDurations, - CanColor, - CanDisable, - CanDisableRipple, - CanUpdateErrorState, - DateAdapter, - defaultRippleAnimationConfig, - ErrorStateMatcher, - GranularSanityChecks, - HasInitialized, - HasTabIndex, - MAT_DATE_FORMATS, - MAT_DATE_LOCALE, - MAT_DATE_LOCALE_FACTORY, - MAT_NATIVE_DATE_FORMATS, - MAT_OPTGROUP, - MAT_RIPPLE_GLOBAL_OPTIONS, - MatCommonModule, - MatDateFormats, - MATERIAL_SANITY_CHECKS, - MatNativeDateModule, - MatPseudoCheckbox, - MatPseudoCheckboxModule, - MatPseudoCheckboxState, - MatRipple, - MatRippleModule, - mixinColor, - mixinDisabled, - mixinDisableRipple, - mixinErrorState, - mixinInitialized, - mixinTabIndex, - NativeDateAdapter, - NativeDateModule, - RippleAnimationConfig, - RippleConfig, - RippleGlobalOptions, - RippleRef, - RippleRenderer, - RippleState, - RippleTarget, - SanityChecks, - setLines, - ShowOnDirtyErrorStateMatcher, - ThemePalette, - VERSION, - MatOptionModule, - MatOptionSelectionChange, - MatOption, - MatOptgroup, - MatOptionParentComponent, - MAT_OPTION_PARENT_COMPONENT, - // Note: These need to be exposed privately for cross-package type inference. e.g. if the - // experimental package uses a mixin, TS will try to write an explicit type reference that - // is equivalent to e.g. `CanColorCtor`. For this it needs these two helpers as otherwise it - // would generate a deep cross-package import that breaks in the NPM package output. - _AbstractConstructor, - _Constructor, -} from '@angular/material/core'; diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel deleted file mode 100644 index b2b30debc647..000000000000 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ /dev/null @@ -1,77 +0,0 @@ -load("//tools:defaults.bzl", "sass_binary", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -filegroup( - name = "theming", - srcs = [ - ":all_themes", - ":deeppurple_amber_prebuilt", - ":indigo_pink_prebuilt", - ":pink_bluegrey_prebuilt", - ":purple_green_prebuilt", - ], -) - -sass_library( - name = "all_themes", - srcs = [ - "_all-theme.scss", - ], - deps = [ - "//src/material:sass_lib", - "//src/material-experimental/mdc-core:mdc_core_scss_lib", - "//src/material/autocomplete:autocomplete_scss_lib", - "//src/material/button:button_scss_lib", - "//src/material/card:card_scss_lib", - "//src/material/checkbox:checkbox_scss_lib", - "//src/material/chips:chips_scss_lib", - "//src/material/dialog:dialog_scss_lib", - "//src/material/form-field:form_field_scss_lib", - "//src/material/input:input_scss_lib", - "//src/material/progress-bar:progress_bar_scss_lib", - "//src/material/progress-spinner:progress_spinner_scss_lib", - "//src/material/slide-toggle:slide_toggle_scss_lib", - "//src/material/slider:slider_scss_lib", - "//src/material/snack-bar:snack_bar_scss_lib", - "//src/material/table:table_scss_lib", - "//src/material/tabs:tabs_scss_lib", - "//src/material/tooltip:tooltip_scss_lib", - ], -) - -sass_binary( - name = "indigo_pink_prebuilt", - src = "prebuilt/indigo-pink.scss", - deps = [ - ":all_themes", - "//src/material:sass_lib", - ], -) - -sass_binary( - name = "deeppurple_amber_prebuilt", - src = "prebuilt/deeppurple-amber.scss", - deps = [ - ":all_themes", - "//src/material:sass_lib", - ], -) - -sass_binary( - name = "pink_bluegrey_prebuilt", - src = "prebuilt/pink-bluegrey.scss", - deps = [ - ":all_themes", - "//src/material:sass_lib", - ], -) - -sass_binary( - name = "purple_green_prebuilt", - src = "prebuilt/purple-green.scss", - deps = [ - ":all_themes", - "//src/material:sass_lib", - ], -) diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss deleted file mode 100644 index be0a826fba76..000000000000 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ /dev/null @@ -1,9 +0,0 @@ -@forward '../../../material/core/theming/theming.import'; -@forward '../../../material/core/core.import'; -@forward '../core-theme.import'; -@forward 'all-theme' hide all-mdc-component-themes;; - -@import '../core-theme'; -@import '../../../material/core/core'; -@import '../../../material/core/core-theme'; -@import '../../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss deleted file mode 100644 index d3403520588c..000000000000 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '@angular/material' as mat; - -@use '../core-theme'; - -@mixin all-mdc-component-themes($theme-or-color-config) { - $dedupe-key: 'angular-material-mdc-theme'; - @include mat.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { - @include core-theme.theme($theme-or-color-config); - @include mat.autocomplete-theme($theme-or-color-config); - @include mat.button-theme($theme-or-color-config); - @include mat.dialog-theme($theme-or-color-config); - @include mat.fab-theme($theme-or-color-config); - @include mat.icon-button-theme($theme-or-color-config); - @include mat.card-theme($theme-or-color-config); - @include mat.checkbox-theme($theme-or-color-config); - @include mat.chips-theme($theme-or-color-config); - @include mat.list-theme($theme-or-color-config); - @include mat.menu-theme($theme-or-color-config); - @include mat.paginator-theme($theme-or-color-config); - @include mat.progress-bar-theme($theme-or-color-config); - @include mat.progress-spinner-theme($theme-or-color-config); - @include mat.radio-theme($theme-or-color-config); - @include mat.select-theme($theme-or-color-config); - @include mat.slide-toggle-theme($theme-or-color-config); - @include mat.slider-theme($theme-or-color-config); - @include mat.snack-bar-theme($theme-or-color-config); - @include mat.table-theme($theme-or-color-config); - @include mat.form-field-theme($theme-or-color-config); - @include mat.input-theme($theme-or-color-config); - @include mat.tabs-theme($theme-or-color-config); - @include mat.tooltip-theme($theme-or-color-config); - } -} - -// @deprecated Use `all-mdc-component-themes`. -@mixin angular-material-mdc-theme($theme-or-color-config) { - @include all-mdc-component-themes($theme-or-color-config); -} diff --git a/src/material-experimental/mdc-core/theming/prebuilt/deeppurple-amber.scss b/src/material-experimental/mdc-core/theming/prebuilt/deeppurple-amber.scss deleted file mode 100644 index 8163e7d81ee7..000000000000 --- a/src/material-experimental/mdc-core/theming/prebuilt/deeppurple-amber.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@angular/material' as mat; -@use '../all-theme'; - -// Define a theme. -$primary: mat.define-palette(mat.$deep-purple-palette); -$accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); - -$theme: ( - color: mat.define-light-theme($primary, $accent), - // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle - // 2018 configs. - typography: mat.define-typography-config() -); - -// Include non-theme styles for core. -@include mat.core($theme); - -// Include all theme styles for the components. -@include mat.core-theme($theme); -@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-core/theming/prebuilt/indigo-pink.scss b/src/material-experimental/mdc-core/theming/prebuilt/indigo-pink.scss deleted file mode 100644 index 2a31676b8a93..000000000000 --- a/src/material-experimental/mdc-core/theming/prebuilt/indigo-pink.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@angular/material' as mat; -@use '../all-theme'; - -// Define a theme. -$primary: mat.define-palette(mat.$indigo-palette); -$accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); - -$theme: ( - color: mat.define-light-theme($primary, $accent), - // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle - // 2018 configs. - typography: mat.define-typography-config() -); - -// Include non-theme styles for core. -@include mat.core($theme); - -// Include all theme styles for the components. -@include mat.core-theme($theme); -@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-core/theming/prebuilt/pink-bluegrey.scss b/src/material-experimental/mdc-core/theming/prebuilt/pink-bluegrey.scss deleted file mode 100644 index 0418c3780dc0..000000000000 --- a/src/material-experimental/mdc-core/theming/prebuilt/pink-bluegrey.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@angular/material' as mat; -@use '../all-theme'; - -// Define a theme. -$primary: mat.define-palette(mat.$pink-palette, 700, 500, 900); -$accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400); - -$theme: ( - color: mat.define-dark-theme($primary, $accent), - // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle - // 2018 configs. - typography: mat.define-typography-config() -); - -// Include non-theme styles for core. -@include mat.core($theme); - -// Include all theme styles for the components. -@include mat.core-theme($theme); -@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-core/theming/prebuilt/purple-green.scss b/src/material-experimental/mdc-core/theming/prebuilt/purple-green.scss deleted file mode 100644 index 1c9a0fcd69f9..000000000000 --- a/src/material-experimental/mdc-core/theming/prebuilt/purple-green.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@angular/material' as mat; -@use '../all-theme'; - -// Define a theme. -$primary: mat.define-palette(mat.$purple-palette, 700, 500, 800); -$accent: mat.define-palette(mat.$green-palette, A200, A100, A400); - -$theme: ( - color: mat.define-dark-theme($primary, $accent), - // TODO(mmalerba): Update to `mat-mdc-typography-config()` once non-MDC components can handle - // 2018 configs. - typography: mat.define-typography-config() -); - -// Include non-theme styles for core. -@include mat.core($theme); - -// Include all theme styles for the components. -@include mat.core-theme($theme); -@include all-theme.all-mdc-component-themes($theme); diff --git a/src/material-experimental/mdc-core/theming/tests/BUILD.bazel b/src/material-experimental/mdc-core/theming/tests/BUILD.bazel deleted file mode 100644 index 5bc5c3dd4722..000000000000 --- a/src/material-experimental/mdc-core/theming/tests/BUILD.bazel +++ /dev/null @@ -1,17 +0,0 @@ -load("@bazel_skylib//rules:build_test.bzl", "build_test") -load("//tools:defaults.bzl", "sass_binary") - -# Sass binary used to ensure that the theming entry-point works as expected. -sass_binary( - name = "test-theming", - testonly = True, - src = "test-theming.scss", - deps = ["//src/material-experimental:sass_lib"], -) - -build_test( - name = "test", - targets = [ - ":test-theming", - ], -) diff --git a/src/material-experimental/mdc-core/theming/tests/test-theming.scss b/src/material-experimental/mdc-core/theming/tests/test-theming.scss deleted file mode 100644 index 90f3a0125519..000000000000 --- a/src/material-experimental/mdc-core/theming/tests/test-theming.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Imports the theming entry-point. Needs to be an absolute bin-dir import path as on Windows, -// runfiles are not symlinked, so the Sass compilation happens in the workspace directory -// with the include paths being set to the `bazel-bin` directory. -@use 'src/material' as mat; -@use 'src/material-experimental' as experimental; - -// Disable theme style duplication warnings. This test intentionally generates -// the same themes multiple times. -mat.$theme-ignore-duplication-warnings: true; - -@include mat.core(); - -$theme: mat.define-light-theme(( - color: ( - primary: mat.define-palette(mat.$red-palette), - accent: mat.define-palette(mat.$blue-palette), - ), - density: null, -)); - -// If one of these mixins is not available, the compilation will fail and the -// test will be reported as failing. -@include experimental.all-mdc-component-themes($theme); -@include experimental.all-mdc-component-typographies($theme); -@include experimental.all-mdc-component-colors($theme); - -@include experimental.all-mdc-component-densities((density: 0)); -@include experimental.all-mdc-component-densities((density: -1)); -@include experimental.all-mdc-component-densities((density: minimum)); - - -@include mat.strong-focus-indicators(); -@include mat.strong-focus-indicators-theme($theme); diff --git a/src/material-experimental/mdc-core/typography/BUILD.bazel b/src/material-experimental/mdc-core/typography/BUILD.bazel deleted file mode 100644 index 70ef3a9e19bd..000000000000 --- a/src/material-experimental/mdc-core/typography/BUILD.bazel +++ /dev/null @@ -1,17 +0,0 @@ -load("//tools:defaults.bzl", "sass_library") - -package(default_visibility = ["//visibility:public"]) - -filegroup( - name = "typography", - srcs = [":all_typography"], -) - -sass_library( - name = "all_typography", - srcs = ["_all-typography.scss"], - deps = [ - "//src/material:sass_lib", - "//src/material-experimental/mdc-core/theming:all_themes", - ], -) diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss deleted file mode 100644 index 102efd66bf77..000000000000 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ /dev/null @@ -1,10 +0,0 @@ -@forward '../../../material/core/theming/theming.import'; -@forward '../../../material/core/core.import'; -@forward '../core-theme.import'; -@forward '../theming/all-theme'; -@forward 'all-typography' hide define-mdc-typography-config, all-mdc-component-typographies; -@forward 'all-typography' as mat-mdc-typography-* hide -mat-mdc-typography-all-mdc-component-typographies, mat-mdc-typography-define-mdc-typography-config, -mat-mdc-typography-mat-mdc-typography-config; - -@import '../theming/all-theme'; diff --git a/src/material-experimental/mdc-core/typography/_all-typography.scss b/src/material-experimental/mdc-core/typography/_all-typography.scss deleted file mode 100644 index 50fa0d3341c6..000000000000 --- a/src/material-experimental/mdc-core/typography/_all-typography.scss +++ /dev/null @@ -1,98 +0,0 @@ -@use '@angular/material' as mat; -@use '@material/typography' as mdc-typography; -@use 'sass:map'; - -@use '../theming/all-theme'; - -/// Generates an Angular Material typography config based on values from the official Material -/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override -/// the default values. The `mat-typography-level` function can be used to generate a custom -/// typography level map which can be passed to this function to override one of the default levels. -/// -/// @param {String} $font-family The font family to use for levels where it is not explicitly -/// specified. -/// @param {Map} $headline-1 The font settings for the headline-1 font level. -/// @param {Map} $headline-2 The font settings for the headline-2 font level. -/// @param {Map} $headline-3 The font settings for the headline-3 font level. -/// @param {Map} $headline-4 The font settings for the headline-4 font level. -/// @param {Map} $headline-5 The font settings for the headline-5 font level. -/// @param {Map} $headline-6 The font settings for the headline-6 font level. -/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level. -/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level. -/// @param {Map} $body-1 The font settings for the body-1 font level. -/// @param {Map} $body-2 The font settings for the body-2 font level. -/// @param {Map} $caption The font settings for the caption font level. -/// @param {Map} $button The font settings for the button font level. -/// @param {Map} $overline The font settings for the overline font level. -/// @return {Map} A map containing font settings for each of the levels in the Material Design spec. -@function define-mdc-typography-config( - $font-family: mdc-typography.$font-family, - $headline-1: mat.private-typography-config-level-from-mdc(headline1), - $headline-2: mat.private-typography-config-level-from-mdc(headline2), - $headline-3: mat.private-typography-config-level-from-mdc(headline3), - $headline-4: mat.private-typography-config-level-from-mdc(headline4), - $headline-5: mat.private-typography-config-level-from-mdc(headline5), - $headline-6: mat.private-typography-config-level-from-mdc(headline6), - $subtitle-1: mat.private-typography-config-level-from-mdc(subtitle1), - $subtitle-2: mat.private-typography-config-level-from-mdc(subtitle2), - $body-1: mat.private-typography-config-level-from-mdc(body1), - $body-2: mat.private-typography-config-level-from-mdc(body2), - $caption: mat.private-typography-config-level-from-mdc(caption), - $button: mat.private-typography-config-level-from-mdc(button), - $overline: mat.private-typography-config-level-from-mdc(overline), -) { - // Declare an initial map with all of the levels. - $config: ( - headline-1: $headline-1, - headline-2: $headline-2, - headline-3: $headline-3, - headline-4: $headline-4, - headline-5: $headline-5, - headline-6: $headline-6, - subtitle-1: $subtitle-1, - subtitle-2: $subtitle-2, - body-1: $body-1, - body-2: $body-2, - caption: $caption, - button: $button, - overline: $overline, - ); - - // Loop through the levels and set the `font-family` of the ones that don't have one to the base. - // Note that Sass can't modify maps in place, which means that we need to merge and re-assign. - @each $key, $level in $config { - @if map.get($level, font-family) == null { - $new-level: map.merge($level, (font-family: $font-family)); - $config: map.merge($config, ($key: $new-level)); - } - } - - // Add the base font family to the config. - @return map.merge($config, (font-family: $font-family)); -} - -@mixin all-mdc-component-typographies($config-or-theme: null) { - $config: if(mat.private-is-theme-object($config-or-theme), - mat.get-typography-config($config-or-theme), $config-or-theme); - - // If no actual color configuration has been specified, create a default one. - @if $config == null { - $config: mat.define-typography-config(); - } - - @include all-theme.all-mdc-component-themes(( - color: null, - density: null, - typography: $config, - )); -} - -// @deprecated Use `all-mdc-component-typographies`. -@mixin angular-material-mdc-typography($config-or-theme: null) { - @include all-mdc-component-typographies($config-or-theme); -} - -// @deprecated Use `define-mdc-typography-config`. -@function mat-mdc-typography-config($args...) { - @return define-mdc-typography-config($args...); -} diff --git a/src/material-experimental/package-base.json b/src/material-experimental/package-base.json index 0e6e2f0d7eaa..7c65bb269028 100644 --- a/src/material-experimental/package-base.json +++ b/src/material-experimental/package-base.json @@ -14,21 +14,6 @@ "exports": { ".": { "sass": "./_index.scss" - }, - "./mdc-core/theming/prebuilt/indigo-pink.css": { - "style": "./mdc-core/theming/prebuilt/indigo-pink.css" - }, - "./mdc-core/theming/prebuilt/deeppurple-amber.css": { - "style": "./mdc-core/theming/prebuilt/deeppurple-amber.css" - }, - "./mdc-core/theming/prebuilt/pink-bluegrey.css": { - "style": "./mdc-core/theming/prebuilt/pink-bluegrey.css" - }, - "./mdc-core/theming/prebuilt/purple-green.css": { - "style": "./mdc-core/theming/prebuilt/purple-green.css" - }, - "./mdc-core/theming/prebuilt/*": { - "style": "./mdc-core/theming/prebuilt/*.css" } }, "peerDependencies": { diff --git a/src/material/_index.scss b/src/material/_index.scss index 8888efd0638f..522669cb2bc1 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -38,9 +38,6 @@ @forward './core/style/button-common' as private-button-common-*; // The form field density mixin needs to be exposed, because the paginator depends on it. @forward './form-field/form-field-theme' as private-form-field-* show private-form-field-density; -// These mixins are exposed privately, because `mdc-core` uses them. -@forward './core/option/option-theme' as private-option-* show private-option-density; -@forward './core/option/optgroup-theme' as private-optgroup-* show private-optgroup-density; // Structural @forward './core/core' show core; @@ -53,13 +50,14 @@ // Theme bundles @forward './core/theming/all-theme' show all-component-themes; @forward './core/color/all-color' show all-component-colors; -@forward './core/typography/all-typography' show all-component-typographies; +@forward './core/typography/all-typography' show all-component-typographies, + define-mdc-typography-config; @forward './legacy-core/theming/all-theme' show all-legacy-component-themes; @forward './legacy-core/color/all-color' show all-legacy-component-colors; @forward './legacy-core/typography/all-typography' show all-legacy-component-typographies; // Component themes -@forward './core/core-theme' as core-* show core-color, core-theme; +@forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density; @forward './legacy-core/core-theme' as legacy-core-* show legacy-core-color, legacy-core-theme; @forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme; @forward './legacy-core/option/option-theme' as legacy-option-* show legacy-option-color, diff --git a/src/material/core/_core-legacy-index.scss b/src/material/core/_core-legacy-index.scss index 613acc339be8..26adf86d4a5e 100644 --- a/src/material/core/_core-legacy-index.scss +++ b/src/material/core/_core-legacy-index.scss @@ -1,8 +1,8 @@ @forward 'core' hide core; @forward 'core-theme' hide color, theme; -@forward 'core' as mat-* hide mat-mdc-core; +@forward 'core' as mat-*; @forward 'core-theme' as mat-* hide mat-color, mat-theme; -@forward 'core' as mat-core-* hide mat-core-mdc-core; +@forward 'core' as mat-core-*; @forward 'core-theme' as mat-core-*; @forward './color/color-legacy-index'; diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index f57b3022ea29..86d235b6dd27 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -6,10 +6,16 @@ @use './option/optgroup-theme'; @use './selection/pseudo-checkbox/pseudo-checkbox-theme'; @use './style/elevation'; +@use './typography/typography'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); + @include ripple-theme.color($config); + @include option-theme.color($config); + @include optgroup-theme.color($config); + @include pseudo-checkbox-theme.color($config); + // Wrapper element that provides the theme background when the user's content isn't // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand // selector in case the mixin is included at the top level. @@ -41,6 +47,27 @@ } } +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2018-config( + theming.get-typography-config($config-or-theme)); + + @include option-theme.typography($config); + @include optgroup-theme.typography($config); + @include pseudo-checkbox-theme.typography($config); + // TODO(mmalerba): add typography mixin for this. + // @include ripple-theme.typography($config); +} + +@mixin density($config-or-theme) { + $density-scale: theming.get-density-config($config-or-theme); + + @include option-theme.density($density-scale); + @include optgroup-theme.density($density-scale); + // TODO(mmalerba): add density mixins for these. + // @include ripple-theme.density($density-scale); + // @include pseudo-checkbox-theme.density($density-scale); +} + // Mixin that renders all of the core styles that depend on the theme. @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -48,15 +75,18 @@ // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then // the imported themes (such as `mat-ripple-theme`) should not report again. @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { - @include ripple-theme.theme($theme); - @include option-theme.theme($theme); - @include optgroup-theme.theme($theme); - @include pseudo-checkbox-theme.theme($theme); - $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); @if $color != null { @include color($color); } + @if $density != null { + @include density($density); + } + @if $typography != null { + @include typography($typography); + } } } diff --git a/src/material/core/_core.import.scss b/src/material/core/_core.import.scss index b0b533121baf..348a48da8075 100644 --- a/src/material/core/_core.import.scss +++ b/src/material/core/_core.import.scss @@ -43,9 +43,9 @@ @forward 'typography/all-typography'; @forward 'core' hide core; @forward 'core-theme' hide color, theme; -@forward 'core' as mat-* hide mat-mdc-core; +@forward 'core' as mat-*; @forward 'core-theme' as mat-* hide mat-color, mat-theme; -@forward 'core' as mat-core-* hide mat-core-mdc-core; +@forward 'core' as mat-core-*; @forward 'core-theme' as mat-core-*; @import '../../cdk/overlay'; diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index 355847a67854..94dbfb39e648 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -16,8 +16,7 @@ @use '../../../input/input-theme'; @use '../../../autocomplete/autocomplete-theme'; @use '../../../checkbox/checkbox-theme'; -@use '../../../core/option/option-theme'; -@use '../../../core/option/optgroup-theme'; +@use '../../../core/core-theme'; @use '../../../select/select-theme'; @use '../../../dialog/dialog-theme'; @use '../../../chips/chips-theme'; @@ -60,8 +59,7 @@ @include progress-spinner-theme.density($config); @include tooltip-theme.density($config); @include input-theme.density($config); - @include option-theme.density($config); - @include optgroup-theme.density($config); + @include core-theme.density($config); @include select-theme.density($config); @include checkbox-theme.density($config); @include autocomplete-theme.density($config); diff --git a/src/material/core/theming/_all-theme.scss b/src/material/core/theming/_all-theme.scss index 0b966dadde0e..e882b282974b 100644 --- a/src/material/core/theming/_all-theme.scss +++ b/src/material/core/theming/_all-theme.scss @@ -1,7 +1,5 @@ // Import all the theming functionality. @use '../core-theme'; -@use '../option/optgroup-theme'; -@use '../option/option-theme'; @use '../../autocomplete/autocomplete-theme'; @use '../../badge/badge-theme'; @use '../../bottom-sheet/bottom-sheet-theme'; @@ -78,8 +76,6 @@ @include list-theme.theme($theme-or-color-config); @include paginator-theme.theme($theme-or-color-config); @include tabs-theme.theme($theme-or-color-config); - @include optgroup-theme.theme($theme-or-color-config); - @include option-theme.theme($theme-or-color-config); @include checkbox-theme.theme($theme-or-color-config); @include button-theme.theme($theme-or-color-config); @include icon-button-theme.theme($theme-or-color-config); diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss index fa928aeb14d0..851d71aa4bed 100644 --- a/src/material/core/theming/_theming.scss +++ b/src/material/core/theming/_theming.scss @@ -304,7 +304,7 @@ $_emitted-density: () !default; // // The mixin keeps track of all configurations in a list that is scoped to the specified // id. This is necessary because a given theme can be passed to multiple disjoint theme mixins -// (e.g. `all-component-themes` and `all-mdc-component-themes`) without causing any +// (e.g. `all-component-themes` and `all-legacy-component-themes`) without causing any // style duplication. @mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) { $theme: private-legacy-get-theme($theme-or-color-config); diff --git a/src/material/core/typography/_all-typography.scss b/src/material/core/typography/_all-typography.scss index 4ea5ecf58ff7..773ee2e17be8 100644 --- a/src/material/core/typography/_all-typography.scss +++ b/src/material/core/typography/_all-typography.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; +@use '@material/typography' as mdc-typography; @use './typography'; @use '../../autocomplete/autocomplete-theme'; @use '../../badge/badge-theme'; @@ -33,11 +35,84 @@ @use '../../toolbar/toolbar-theme'; @use '../../tooltip/tooltip-theme'; @use '../../snack-bar/snack-bar-theme'; -@use '../option/option-theme'; -@use '../option/optgroup-theme'; @use '../../form-field/form-field-theme'; @use '../../tree/tree-theme'; @use '../theming/theming'; +@use '../core-theme'; +@use '../mdc-helpers/mdc-helpers'; + +// TODO(mmalerba): define-mdc-typography-config is defined here rather than in _typography.scss +// (where define-typography-config is defined) because putting it there would cause a circular +// dependency with mdc-helpers. We should refactor so these can live in the same place. + +/// Generates an Angular Material typography config based on values from the official Material +/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override +/// the default values. The `mat-typography-level` function can be used to generate a custom +/// typography level map which can be passed to this function to override one of the default levels. +/// +/// @param {String} $font-family The font family to use for levels where it is not explicitly +/// specified. +/// @param {Map} $headline-1 The font settings for the headline-1 font level. +/// @param {Map} $headline-2 The font settings for the headline-2 font level. +/// @param {Map} $headline-3 The font settings for the headline-3 font level. +/// @param {Map} $headline-4 The font settings for the headline-4 font level. +/// @param {Map} $headline-5 The font settings for the headline-5 font level. +/// @param {Map} $headline-6 The font settings for the headline-6 font level. +/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level. +/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level. +/// @param {Map} $body-1 The font settings for the body-1 font level. +/// @param {Map} $body-2 The font settings for the body-2 font level. +/// @param {Map} $caption The font settings for the caption font level. +/// @param {Map} $button The font settings for the button font level. +/// @param {Map} $overline The font settings for the overline font level. +/// @return {Map} A map containing font settings for each of the levels in the Material Design spec. +@function define-mdc-typography-config( + // TODO(mmalerba): rename this function to define-typography-config, + // and create a predefined px based config for people that need it. + $font-family: mdc-typography.$font-family, + $headline-1: mdc-helpers.typography-config-level-from-mdc(headline1), + $headline-2: mdc-helpers.typography-config-level-from-mdc(headline2), + $headline-3: mdc-helpers.typography-config-level-from-mdc(headline3), + $headline-4: mdc-helpers.typography-config-level-from-mdc(headline4), + $headline-5: mdc-helpers.typography-config-level-from-mdc(headline5), + $headline-6: mdc-helpers.typography-config-level-from-mdc(headline6), + $subtitle-1: mdc-helpers.typography-config-level-from-mdc(subtitle1), + $subtitle-2: mdc-helpers.typography-config-level-from-mdc(subtitle2), + $body-1: mdc-helpers.typography-config-level-from-mdc(body1), + $body-2: mdc-helpers.typography-config-level-from-mdc(body2), + $caption: mdc-helpers.typography-config-level-from-mdc(caption), + $button: mdc-helpers.typography-config-level-from-mdc(button), + $overline: mdc-helpers.typography-config-level-from-mdc(overline), +) { + // Declare an initial map with all of the levels. + $config: ( + headline-1: $headline-1, + headline-2: $headline-2, + headline-3: $headline-3, + headline-4: $headline-4, + headline-5: $headline-5, + headline-6: $headline-6, + subtitle-1: $subtitle-1, + subtitle-2: $subtitle-2, + body-1: $body-1, + body-2: $body-2, + caption: $caption, + button: $button, + overline: $overline, + ); + + // Loop through the levels and set the `font-family` of the ones that don't have one to the base. + // Note that Sass can't modify maps in place, which means that we need to merge and re-assign. + @each $key, $level in $config { + @if map.get($level, font-family) == null { + $new-level: map.merge($level, (font-family: $font-family)); + $config: map.merge($config, ($key: $new-level)); + } + } + + // Add the base font family to the config. + @return map.merge($config, (font-family: $font-family)); +} @mixin private-all-unmigrated-component-typographies($config) { @include badge-theme.typography($config); @@ -57,7 +132,6 @@ @include tree-theme.typography($config); } - // Includes all of the typographic styles. @mixin all-component-typographies($config-or-theme: null) { $config: if(theming.private-is-theme-object($config-or-theme), @@ -74,10 +148,9 @@ // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which // would then load `all-theme` again. This ultimately results a circular dependency. @include private-all-unmigrated-component-typographies($config); + @include core-theme.typography($config); @include card-theme.typography($config); @include progress-bar-theme.typography($config); - @include option-theme.typography($config); - @include optgroup-theme.typography($config); @include tooltip-theme.typography($config); @include form-field-theme.typography($config); @include input-theme.typography($config); diff --git a/src/material/legacy-core/_core-theme.scss b/src/material/legacy-core/_core-theme.scss index b062e43a1e31..82ee55025cc2 100644 --- a/src/material/legacy-core/_core-theme.scss +++ b/src/material/legacy-core/_core-theme.scss @@ -1,13 +1,41 @@ +@use 'sass:map'; @use '../core/theming/theming'; -@use '../core/core-theme'; @use '../core/ripple/ripple-theme'; @use '../core/selection/pseudo-checkbox/pseudo-checkbox-theme'; @use './option/option-theme'; @use './option/optgroup-theme'; +@use '../core/style/elevation'; +@use '../core/style/private'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - @include core-theme.color($config-or-theme); + + // Wrapper element that provides the theme background when the user's content isn't + // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand + // selector in case the mixin is included at the top level. + .mat-app-background#{if(&, ', &.mat-app-background', '')} { + $background: map.get($config, background); + $foreground: map.get($config, foreground); + + background-color: theming.get-color-from-palette($background, background); + color: theming.get-color-from-palette($foreground, text); + } + + // Provides external CSS classes for each elevation value. Each CSS class is formatted as + // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is + // elevated. + @for $zValue from 0 through 24 { + .#{elevation.$prefix}#{$zValue} { + @include private.private-theme-elevation($zValue, $config); + } + } + + // Marker that is used to determine whether the user has added a theme to their page. + @at-root { + .mat-theme-loaded-marker { + display: none; + } + } } // Mixin that renders all of the core styles that depend on the theme. diff --git a/src/material/legacy-core/_core.import.scss b/src/material/legacy-core/_core.import.scss index 2ad178018296..66ab74cf43d8 100644 --- a/src/material/legacy-core/_core.import.scss +++ b/src/material/legacy-core/_core.import.scss @@ -1,5 +1,5 @@ @forward 'core' hide core; -@forward 'core' as mat-legacy-* hide mat-legacy-mdc-core; -@forward 'core' as mat-legacy-core-legacy-* hide mat-legacy-core-mdc-core; +@forward 'core' as mat-legacy-*; +@forward 'core' as mat-legacy-core-legacy-*; @import './typography/all-typography'; diff --git a/src/universal-app/theme.scss b/src/universal-app/theme.scss index 9d32678ffb22..c5ded514904f 100644 --- a/src/universal-app/theme.scss +++ b/src/universal-app/theme.scss @@ -1,5 +1,4 @@ @use '@angular/material' as mat; -@use '@angular/material-experimental' as experimental; // Plus imports for other components in your app. @@ -7,14 +6,16 @@ // have to load a single css file for Angular Material in your app. // **Be sure that you only ever include this mixin once!** @include mat.core(); -@include experimental.all-mdc-component-typographies(); // Define the default theme (same as the example above). $candy-app-primary: mat.define-palette(mat.$indigo-palette); $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); -$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent); +$candy-app-theme: mat.define-light-theme(( + color: (primary: $candy-app-primary, accent: $candy-app-accent), + typography: mat.define-typography-config(), + density: 0 +)); // Include the default theme styles. @include mat.all-component-themes($candy-app-theme); @include mat.all-legacy-component-themes($candy-app-theme); -@include experimental.all-mdc-component-themes($candy-app-theme);