diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel index ac0a2e2f805b..81f7f61d3656 100644 --- a/src/dev-app/BUILD.bazel +++ b/src/dev-app/BUILD.bazel @@ -108,12 +108,7 @@ sass_binary( ], deps = [ "//src/material:theming_bundle", - "//src/material-experimental/column-resize:column_resize_scss_lib", - "//src/material-experimental/mdc-color:all_color", - "//src/material-experimental/mdc-density:all_density", - "//src/material-experimental/mdc-theming:all_themes", - "//src/material-experimental/mdc-typography:all_typography", - "//src/material-experimental/popover-edit:popover_edit_scss_lib", + "//src/material-experimental:theming_bundle", "//src/material/core:theming_scss_lib", ], ) diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss index a9c6c059ac37..dc8bcff372fe 100644 --- a/src/dev-app/theme.scss +++ b/src/dev-app/theme.scss @@ -1,13 +1,7 @@ @use '../material' as mat; -@use '../material/core/density/private/all-density' as private-all-density; -@use '../material-experimental/column-resize/column-resize'; -@use '../material-experimental/mdc-helpers/focus-indicators-theme' as mdc-focus-indicators-theme; -@use '../material-experimental/mdc-helpers/focus-indicators' as mdc-focus-indicators; -@use '../material-experimental/mdc-color/all-color' as mdc-all-color; -@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme; -@use '../material-experimental/mdc-density/all-density' as mdc-all-density; +@use '../material-experimental' as experimental; @use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme; -@use '../material-experimental/popover-edit/popover-edit'; +@use '../material/core/density/private/all-density' as private-all-density; // Plus imports for other components in your app. @@ -33,20 +27,20 @@ $candy-app-theme: mat.define-light-theme(( // Include the default theme styles. @include mat.all-component-themes($candy-app-theme); -@include mdc-all-theme.all-mdc-component-themes($candy-app-theme); -@include column-resize.theme($candy-app-theme); -@include popover-edit.theme($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); // We add this in manually for now, because it isn't included in `all-mdc-component-themes`. @include mdc-slider-theme.theme($candy-app-theme); .demo-strong-focus { // Include base styles for strong focus indicators. @include mat.strong-focus-indicators(); - @include mdc-focus-indicators.strong-focus-indicators(); + @include experimental.mdc-strong-focus-indicators(); // Include the default theme for focus indicators. @include mat.strong-focus-indicators-theme($candy-app-theme); - @include mdc-focus-indicators-theme.theme($candy-app-theme); + @include experimental.mdc-strong-focus-indicators-theme($candy-app-theme); } // Include the alternative theme styles inside of a block with a CSS class. You can make this @@ -62,16 +56,16 @@ $candy-app-theme: mat.define-light-theme(( // Include the dark theme color styles. @include mat.all-component-colors($dark-colors); - @include mdc-all-color.all-mdc-component-colors($dark-colors); - @include column-resize.color($dark-colors); - @include popover-edit.color($dark-colors); + @include experimental.all-mdc-component-colors($dark-colors); + @include experimental.column-resize-color($dark-colors); + @include experimental.popover-edit-color($dark-colors); // We add this in manually for now, because it isn't included in `all-mdc-component-themes`. @include mdc-slider-theme.color($dark-colors); // Include the dark theme colors for focus indicators. .demo-strong-focus { @include mat.strong-focus-indicators-color($dark-colors); - @include mdc-focus-indicators-theme.color($dark-colors); + @include experimental.mdc-strong-focus-indicators-color($dark-colors); } } @@ -82,6 +76,6 @@ $density-scales: (-1, -2, minimum, maximum); @each $density in $density-scales { .demo-density-#{$density} { @include private-all-density.all-component-densities($density); - @include mdc-all-density.all-mdc-component-densities($density); + @include experimental.all-mdc-component-densities($density); } } diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index 40dc4983d618..44ff804c9d8c 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -80,8 +80,7 @@ sass_binary( ], deps = [ "//src/material:theming_bundle", - "//src/material-experimental/mdc-theming:all_themes", - "//src/material-experimental/mdc-typography:all_typography", + "//src/material-experimental:theming_bundle", "//src/material/core:theming_scss_lib", ], ) diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss index 0ba511b6afd0..23aa924ea564 100644 --- a/src/e2e-app/theme.scss +++ b/src/e2e-app/theme.scss @@ -1,6 +1,5 @@ @use '../material' as mat; -@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme; -@use '../material-experimental/mdc-typography/all-typography' as mdc-all-typography; +@use '../material-experimental' as experimental; // Plus imports for other components in your app. @@ -8,7 +7,7 @@ // 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 mdc-all-typography.all-mdc-component-typographies(); +@include experimental.all-mdc-component-typographies(); // Define the default theme (same as the example above). $candy-app-primary: mat.define-palette(mat.$indigo-palette); @@ -17,4 +16,4 @@ $candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent); // Include the default theme styles. @include mat.all-component-themes($candy-app-theme); -@include mdc-all-theme.all-mdc-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 de089e86d564..338b4b3db70c 100644 --- a/src/material-experimental/BUILD.bazel +++ b/src/material-experimental/BUILD.bazel @@ -4,7 +4,7 @@ load( "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_EXPERIMENTAL_TESTING_TARGETS", ) -load("//tools:defaults.bzl", "ng_package", "ts_library") +load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library") package(default_visibility = ["//visibility:public"]) @@ -20,16 +20,30 @@ ts_library( deps = ["@npm//@angular/core"], ) -ng_package( - name = "npm_package", - srcs = ["package.json"], - data = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [ +sass_library( + name = "theming_scss_lib", + srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [ "//src/material-experimental/mdc-color", "//src/material-experimental/mdc-density", "//src/material-experimental/mdc-helpers", "//src/material-experimental/mdc-theming", "//src/material-experimental/mdc-typography", ], +) + +sass_library( + name = "theming_bundle", + srcs = ["_index.scss"], + deps = [":theming_scss_lib"], +) + +ng_package( + name = "npm_package", + srcs = ["package.json"], + data = [ + ":theming_bundle", + ":theming_scss_lib", + ], entry_point = ":public-api.ts", tags = ["release-package"], deps = MATERIAL_EXPERIMENTAL_TARGETS + MATERIAL_EXPERIMENTAL_TESTING_TARGETS, diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss new file mode 100644 index 000000000000..422a11152394 --- /dev/null +++ b/src/material-experimental/_index.scss @@ -0,0 +1,65 @@ +// Structural +@forward './mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators; + +// Theme bundles +@forward './mdc-theming/all-theme' show all-mdc-component-themes; +@forward './mdc-color/all-color' show all-mdc-component-colors; +@forward './mdc-typography/all-typography' show all-mdc-component-typographies, + define-mdc-typography-config; +@forward './mdc-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; +@forward './mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show + mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme; +@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color, + mdc-option-typography, mdc-option-density, mdc-option-theme; +@forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color, + mdc-optgroup-typography, mdc-optgroup-density, mdc-optgroup-theme; +@forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color, + mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme; +@forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography, + mdc-button-density, mdc-button-theme; +@forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography, + mdc-card-density, mdc-card-theme; +@forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color, + mdc-checkbox-typography, mdc-checkbox-density, mdc-checkbox-theme; +@forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography, + mdc-chips-density, mdc-chips-theme; +@forward './mdc-dialog/dialog-theme' as mdc-dialog-* show mdc-dialog-color, mdc-dialog-typography, + mdc-dialog-density, mdc-dialog-theme; +@forward './mdc-form-field/form-field-theme' as mdc-form-field-* show mdc-form-field-color, + mdc-form-field-typography, mdc-form-field-density, mdc-form-field-theme; +@forward './mdc-input/input-theme' as mdc-input-* show mdc-input-color, mdc-input-typography, + mdc-input-density, mdc-input-theme; +@forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography, + mdc-list-density, mdc-list-theme; +@forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography, + mdc-menu-density, mdc-menu-theme; +@forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color, + mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme; +@forward './mdc-progress-bar/progress-bar-theme' as mdc-progress-bar-* show mdc-progress-bar-color, + mdc-progress-bar-typography, mdc-progress-bar-density, mdc-progress-bar-theme; +@forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show + mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density, + mdc-progress-spinner-theme; +@forward './mdc-radio/radio-theme' as mdc-radio-* show mdc-radio-color, mdc-radio-typography, + mdc-radio-density, mdc-radio-theme; +@forward './mdc-select/select-theme' as mdc-select-* show mdc-select-color, mdc-select-typography, + mdc-select-density, mdc-select-theme; +@forward './mdc-slide-toggle/slide-toggle-theme' as mdc-slide-toggle-* show mdc-slide-toggle-color, + mdc-slide-toggle-typography, mdc-slide-toggle-density, mdc-slide-toggle-theme; +@forward './mdc-snack-bar/snack-bar-theme' as mdc-snack-bar-* show mdc-snack-bar-color, + mdc-snack-bar-typography, mdc-snack-bar-density, mdc-snack-bar-theme; +@forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography, + mdc-table-density, mdc-table-theme; +@forward './mdc-tabs/tabs-theme' as mdc-tabs-* show mdc-tabs-color, mdc-tabs-typography, + mdc-tabs-density, mdc-tabs-theme; +@forward './mdc-tooltip/tooltip-theme' as mdc-tooltip-* show mdc-tooltip-color, + mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme; diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize-theme.scss similarity index 96% rename from src/material-experimental/column-resize/_column-resize.scss rename to src/material-experimental/column-resize/_column-resize-theme.scss index 1039d52b0f95..609842ff9a06 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize-theme.scss @@ -13,6 +13,8 @@ $resizable-hover-divider: theming.get-color-from-palette($primary, 200); $resizable-active-divider: theming.get-color-from-palette($primary, 500); + // TODO: these styles don't really belong in the `color` part of the theme. + // We should figure out a better place for them. // Required for resizing to work properly. .mat-column-resize-table.cdk-column-resize-with-resized-column { table-layout: fixed; diff --git a/src/material-experimental/column-resize/_column-resize.import.scss b/src/material-experimental/column-resize/_column-resize.import.scss index 8d50674fb726..58505a9c8f24 100644 --- a/src/material-experimental/column-resize/_column-resize.import.scss +++ b/src/material-experimental/column-resize/_column-resize.import.scss @@ -1,7 +1,7 @@ @forward '../../material/core/style/variables.import'; @forward '../../material/core/theming/theming.import'; @forward '../../material/core/style/vendor-prefixes.import'; -@forward 'column-resize' as mat-column-resize-*; +@forward 'column-resize-theme' as mat-column-resize-*; @import '../../material/core/style/variables'; @import '../../material/core/style/vendor-prefixes'; diff --git a/src/material-experimental/mdc-core/_core-theme.scss b/src/material-experimental/mdc-core/_core-theme.scss index fd97952723d7..e941b88ef5fb 100644 --- a/src/material-experimental/mdc-core/_core-theme.scss +++ b/src/material-experimental/mdc-core/_core-theme.scss @@ -9,7 +9,7 @@ // 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 theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') { - @include option-theme.option-theme($theme); + @include option-theme.theme($theme); @include optgroup-theme.theme($theme); } } diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index 9c308b88e45c..3d4f4c347661 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -9,7 +9,7 @@ @include mdc-helpers.mat-using-mdc-theme($config) { .mat-mdc-optgroup-label { // Since this will usually be rendered in an overlay, - // we have explicitly set the default color. + // we have to explicitly set the default color. @include mdc-theme.prop(color, text-primary-on-background); @include mdc-list.deprecated-item-disabled-text-color( mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query); diff --git a/src/material-experimental/mdc-core/option/_option-theme.import.scss b/src/material-experimental/mdc-core/option/_option-theme.import.scss index d6e1554d3b37..905d5f914b78 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.import.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.import.scss @@ -1,7 +1,7 @@ @forward '../../../material/core/theming/theming.import'; @forward '../../mdc-helpers/mdc-helpers.import'; @forward '../../mdc-helpers/mdc-helpers'; -@forward 'option-theme' as mat-mdc-*; +@forward 'option-theme' as mat-mdc-option-*; @import '../../mdc-helpers/mdc-helpers'; @import '../../../material/core/theming/theming'; diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 71ad8a20f168..de79bc584ef6 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -8,7 +8,7 @@ @use '../../mdc-helpers/mdc-helpers'; @use '../../../material/core/theming/theming'; -@mixin option-color($config-or-theme) { +@mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); @include mdc-helpers.mat-using-mdc-theme($config) { @@ -53,7 +53,7 @@ } } -@mixin option-typography($config-or-theme) { +@mixin typography($config-or-theme) { $config: theming.get-typography-config($config-or-theme); @include mdc-helpers.mat-using-mdc-typography($config) { @@ -65,11 +65,11 @@ } } -@mixin option-density($config-or-theme) { +@mixin density($config-or-theme) { $density-scale: theming.get-density-config($config-or-theme); } -@mixin option-theme($theme-or-color-config) { +@mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-option') { $color: theming.get-color-config($theme); @@ -77,13 +77,13 @@ $typography: theming.get-typography-config($theme); @if $color != null { - @include option-color($color); + @include color($color); } @if $density != null { - @include option-density($density); + @include density($density); } @if $typography != null { - @include option-typography($typography); + @include typography($typography); } } } diff --git a/src/material-experimental/mdc-helpers/_mdc-helpers.scss b/src/material-experimental/mdc-helpers/_mdc-helpers.scss index abe4c098d64d..2e89863cc7c7 100644 --- a/src/material-experimental/mdc-helpers/_mdc-helpers.scss +++ b/src/material-experimental/mdc-helpers/_mdc-helpers.scss @@ -130,7 +130,7 @@ $mat-typography-2018-level-mappings: ( } // Converts an Angular Material typography config to an MDC one. -@function mat-typography-config-to-mdc($mat-config: typography.define-typography-config()) { +@function mat-typography-config-to-mdc($mat-config: typography.define-mdc-typography-config()) { $mdc-config: (); $mappings: if(typography.private-typography-is-2018-config($mat-config), diff --git a/src/material-experimental/mdc-typography/_all-typography.import.scss b/src/material-experimental/mdc-typography/_all-typography.import.scss index 5e5a6326a69c..cc7ff0a12cc8 100644 --- a/src/material-experimental/mdc-typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-typography/_all-typography.import.scss @@ -92,7 +92,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*; @forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*; @forward '../mdc-theming/all-theme'; -@forward 'all-typography' hide define-typography-config, all-mdc-component-typographies; +@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; diff --git a/src/material-experimental/mdc-typography/_all-typography.scss b/src/material-experimental/mdc-typography/_all-typography.scss index 9dc0a9e77b03..78c7eef81a8c 100644 --- a/src/material-experimental/mdc-typography/_all-typography.scss +++ b/src/material-experimental/mdc-typography/_all-typography.scss @@ -26,7 +26,7 @@ /// @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-typography-config( +@function define-mdc-typography-config( $font-family: mdc-typography.$font-family, $headline-1: mdc-helpers.mat-typography-config-level-from-mdc(headline1), $headline-2: mdc-helpers.mat-typography-config-level-from-mdc(headline2), diff --git a/src/material-experimental/popover-edit/_popover-edit.scss b/src/material-experimental/popover-edit/_popover-edit-theme.scss similarity index 91% rename from src/material-experimental/popover-edit/_popover-edit.scss rename to src/material-experimental/popover-edit/_popover-edit-theme.scss index 7f772113bb43..07995b723358 100644 --- a/src/material-experimental/popover-edit/_popover-edit.scss +++ b/src/material-experimental/popover-edit/_popover-edit-theme.scss @@ -7,7 +7,7 @@ @use '../../material/core/typography/typography'; @use '../../material/core/typography/typography-utils'; -@function mat-edit-hover-content-background($direction, $background-color) { +@function _hover-content-background($direction, $background-color) { @return linear-gradient($direction, rgba($background-color, 0), $background-color 8px); } @@ -18,13 +18,15 @@ $primary: map.get($config, primary); $background-color: theming.get-color-from-palette($background, 'card'); + // TODO: these structural styles don't belong in the `color` part of a theme. + // We should figure out a better place for them. .mat-row-hover-content-host-cell { position: relative; } .mat-row-hover-content { align-items: center; - background: mat-edit-hover-content-background(90deg, $background-color); + background: _hover-content-background(90deg, $background-color); bottom: 0; display: flex; opacity: 0; @@ -36,7 +38,7 @@ } .mat-row-hover-content-rtl { - background: mat-edit-hover-content-background(270deg, $background-color); + background: _hover-content-background(270deg, $background-color); left: 0; right: auto; } @@ -138,10 +140,10 @@ flex-wrap: wrap; justify-content: flex-end; margin: 8px -16px -8px; + } - [mat-edit-fill] + & { - margin-top: 16px; - } + [mat-edit-fill] + [mat-edit-actions] { + margin-top: 16px; } } diff --git a/src/material-experimental/popover-edit/_popover-edit.import.scss b/src/material-experimental/popover-edit/_popover-edit.import.scss index c6854045906f..98211b9d0ca4 100644 --- a/src/material-experimental/popover-edit/_popover-edit.import.scss +++ b/src/material-experimental/popover-edit/_popover-edit.import.scss @@ -2,9 +2,8 @@ @forward '../../material/core/theming/theming.import'; @forward '../../cdk/a11y/a11y.import'; @forward '../../material/core/typography/typography-utils.import'; -@forward 'popover-edit' hide color, density, theme, typography; -@forward 'popover-edit' as mat-popover-edit-* hide -mat-popover-edit-mat-edit-hover-content-background; +@forward 'popover-edit-theme' hide color, density, theme, typography; +@forward 'popover-edit-theme' as mat-popover-edit-*; @import '../../cdk/a11y/a11y'; @import '../../material/core/style/variables'; diff --git a/tools/stylelint/theme-mixin-api.ts b/tools/stylelint/theme-mixin-api.ts index e2310682ee0a..8f9c98cca9af 100644 --- a/tools/stylelint/theme-mixin-api.ts +++ b/tools/stylelint/theme-mixin-api.ts @@ -213,7 +213,7 @@ function getComponentNameFromPath(filePath: string): string|null { let prefix = ''; - if (filePath.includes('material-experimental')) { + if (filePath.includes('material-experimental') && filePath.includes('mdc-')) { prefix = 'mat-mdc-'; } else if (filePath.includes('material')) { prefix = 'mat-';