Skip to content

Commit e829c22

Browse files
crisbetocrisbeto
authored
refactor(material-experimental/mdc-core): expose new @use-based Sass API (#22338)
Implements an `_index.scss` file in `material-experimental` similar to the one in `material`. Also fixes a couple of theme files that weren't named correctly and some mixins whose prefixes weren't removed by the migration script.
1 parent a2c4b76 commit e829c22

18 files changed

+128
-59
lines changed

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,7 @@ sass_binary(
108108
],
109109
deps = [
110110
"//src/material:theming_bundle",
111-
"//src/material-experimental/column-resize:column_resize_scss_lib",
112-
"//src/material-experimental/mdc-color:all_color",
113-
"//src/material-experimental/mdc-density:all_density",
114-
"//src/material-experimental/mdc-theming:all_themes",
115-
"//src/material-experimental/mdc-typography:all_typography",
116-
"//src/material-experimental/popover-edit:popover_edit_scss_lib",
111+
"//src/material-experimental:theming_bundle",
117112
"//src/material/core:theming_scss_lib",
118113
],
119114
)

‎src/dev-app/theme.scss

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
@use '../material' as mat;
2-
@use '../material/core/density/private/all-density' as private-all-density;
3-
@use '../material-experimental/column-resize/column-resize';
4-
@use '../material-experimental/mdc-helpers/focus-indicators-theme' as mdc-focus-indicators-theme;
5-
@use '../material-experimental/mdc-helpers/focus-indicators' as mdc-focus-indicators;
6-
@use '../material-experimental/mdc-color/all-color' as mdc-all-color;
7-
@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme;
8-
@use '../material-experimental/mdc-density/all-density' as mdc-all-density;
2+
@use '../material-experimental' as experimental;
93
@use '../material-experimental/mdc-slider/slider-theme' as mdc-slider-theme;
10-
@use '../material-experimental/popover-edit/popover-edit';
4+
@use '../material/core/density/private/all-density' as private-all-density;
115

126
// Plus imports for other components in your app.
137

@@ -33,20 +27,20 @@ $candy-app-theme: mat.define-light-theme((
3327

3428
// Include the default theme styles.
3529
@include mat.all-component-themes($candy-app-theme);
36-
@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);
37-
@include column-resize.theme($candy-app-theme);
38-
@include popover-edit.theme($candy-app-theme);
30+
@include experimental.all-mdc-component-themes($candy-app-theme);
31+
@include experimental.column-resize-theme($candy-app-theme);
32+
@include experimental.popover-edit-theme($candy-app-theme);
3933
// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
4034
@include mdc-slider-theme.theme($candy-app-theme);
4135

4236
.demo-strong-focus {
4337
// Include base styles for strong focus indicators.
4438
@include mat.strong-focus-indicators();
45-
@include mdc-focus-indicators.strong-focus-indicators();
39+
@include experimental.mdc-strong-focus-indicators();
4640

4741
// Include the default theme for focus indicators.
4842
@include mat.strong-focus-indicators-theme($candy-app-theme);
49-
@include mdc-focus-indicators-theme.theme($candy-app-theme);
43+
@include experimental.mdc-strong-focus-indicators-theme($candy-app-theme);
5044
}
5145

5246
// 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((
6256

6357
// Include the dark theme color styles.
6458
@include mat.all-component-colors($dark-colors);
65-
@include mdc-all-color.all-mdc-component-colors($dark-colors);
66-
@include column-resize.color($dark-colors);
67-
@include popover-edit.color($dark-colors);
59+
@include experimental.all-mdc-component-colors($dark-colors);
60+
@include experimental.column-resize-color($dark-colors);
61+
@include experimental.popover-edit-color($dark-colors);
6862
// We add this in manually for now, because it isn't included in `all-mdc-component-themes`.
6963
@include mdc-slider-theme.color($dark-colors);
7064

7165
// Include the dark theme colors for focus indicators.
7266
.demo-strong-focus {
7367
@include mat.strong-focus-indicators-color($dark-colors);
74-
@include mdc-focus-indicators-theme.color($dark-colors);
68+
@include experimental.mdc-strong-focus-indicators-color($dark-colors);
7569
}
7670
}
7771

@@ -82,6 +76,6 @@ $density-scales: (-1, -2, minimum, maximum);
8276
@each $density in $density-scales {
8377
.demo-density-#{$density} {
8478
@include private-all-density.all-component-densities($density);
85-
@include mdc-all-density.all-mdc-component-densities($density);
79+
@include experimental.all-mdc-component-densities($density);
8680
}
8781
}

‎src/e2e-app/BUILD.bazel

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,7 @@ sass_binary(
8080
],
8181
deps = [
8282
"//src/material:theming_bundle",
83-
"//src/material-experimental/mdc-theming:all_themes",
84-
"//src/material-experimental/mdc-typography:all_typography",
83+
"//src/material-experimental:theming_bundle",
8584
"//src/material/core:theming_scss_lib",
8685
],
8786
)

‎src/e2e-app/theme.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
@use '../material' as mat;
2-
@use '../material-experimental/mdc-theming/all-theme' as mdc-all-theme;
3-
@use '../material-experimental/mdc-typography/all-typography' as mdc-all-typography;
2+
@use '../material-experimental' as experimental;
43

54
// Plus imports for other components in your app.
65

76
// Include the common styles for Angular Material. We include this here so that you only
87
// have to load a single css file for Angular Material in your app.
98
// **Be sure that you only ever include this mixin once!**
109
@include mat.core();
11-
@include mdc-all-typography.all-mdc-component-typographies();
10+
@include experimental.all-mdc-component-typographies();
1211

1312
// Define the default theme (same as the example above).
1413
$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);
1716

1817
// Include the default theme styles.
1918
@include mat.all-component-themes($candy-app-theme);
20-
@include mdc-all-theme.all-mdc-component-themes($candy-app-theme);
19+
@include experimental.all-mdc-component-themes($candy-app-theme);

‎src/material-experimental/BUILD.bazel

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ load(
44
"MATERIAL_EXPERIMENTAL_TARGETS",
55
"MATERIAL_EXPERIMENTAL_TESTING_TARGETS",
66
)
7-
load("//tools:defaults.bzl", "ng_package", "ts_library")
7+
load("//tools:defaults.bzl", "ng_package", "sass_library", "ts_library")
88

99
package(default_visibility = ["//visibility:public"])
1010

@@ -20,16 +20,30 @@ ts_library(
2020
deps = ["@npm//@angular/core"],
2121
)
2222

23-
ng_package(
24-
name = "npm_package",
25-
srcs = ["package.json"],
26-
data = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
23+
sass_library(
24+
name = "theming_scss_lib",
25+
srcs = MATERIAL_EXPERIMENTAL_SCSS_LIBS + [
2726
"//src/material-experimental/mdc-color",
2827
"//src/material-experimental/mdc-density",
2928
"//src/material-experimental/mdc-helpers",
3029
"//src/material-experimental/mdc-theming",
3130
"//src/material-experimental/mdc-typography",
3231
],
32+
)
33+
34+
sass_library(
35+
name = "theming_bundle",
36+
srcs = ["_index.scss"],
37+
deps = [":theming_scss_lib"],
38+
)
39+
40+
ng_package(
41+
name = "npm_package",
42+
srcs = ["package.json"],
43+
data = [
44+
":theming_bundle",
45+
":theming_scss_lib",
46+
],
3347
entry_point = ":public-api.ts",
3448
tags = ["release-package"],
3549
deps = MATERIAL_EXPERIMENTAL_TARGETS + MATERIAL_EXPERIMENTAL_TESTING_TARGETS,

‎src/material-experimental/_index.scss

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Structural
2+
@forward './mdc-helpers/focus-indicators' as mdc-* show mdc-strong-focus-indicators;
3+
4+
// Theme bundles
5+
@forward './mdc-theming/all-theme' show all-mdc-component-themes;
6+
@forward './mdc-color/all-color' show all-mdc-component-colors;
7+
@forward './mdc-typography/all-typography' show all-mdc-component-typographies,
8+
define-mdc-typography-config;
9+
@forward './mdc-density/all-density' show all-mdc-component-densities;
10+
11+
// Component themes
12+
@forward './column-resize/column-resize-theme' as column-resize-* show column-resize-color,
13+
column-resize-typography, column-resize-density, column-resize-theme;
14+
@forward './popover-edit/popover-edit-theme' as popover-edit-* show popover-edit-color,
15+
popover-edit-typography, popover-edit-density, popover-edit-theme;
16+
17+
// MDC-related themes
18+
@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme;
19+
@forward './mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
20+
mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
21+
@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,
22+
mdc-option-typography, mdc-option-density, mdc-option-theme;
23+
@forward './mdc-core/option/optgroup-theme' as mdc-optgroup-* show mdc-optgroup-color,
24+
mdc-optgroup-typography, mdc-optgroup-density, mdc-optgroup-theme;
25+
@forward './mdc-autocomplete/autocomplete-theme' as mdc-autocomplete-* show mdc-autocomplete-color,
26+
mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
27+
@forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,
28+
mdc-button-density, mdc-button-theme;
29+
@forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography,
30+
mdc-card-density, mdc-card-theme;
31+
@forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color,
32+
mdc-checkbox-typography, mdc-checkbox-density, mdc-checkbox-theme;
33+
@forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography,
34+
mdc-chips-density, mdc-chips-theme;
35+
@forward './mdc-dialog/dialog-theme' as mdc-dialog-* show mdc-dialog-color, mdc-dialog-typography,
36+
mdc-dialog-density, mdc-dialog-theme;
37+
@forward './mdc-form-field/form-field-theme' as mdc-form-field-* show mdc-form-field-color,
38+
mdc-form-field-typography, mdc-form-field-density, mdc-form-field-theme;
39+
@forward './mdc-input/input-theme' as mdc-input-* show mdc-input-color, mdc-input-typography,
40+
mdc-input-density, mdc-input-theme;
41+
@forward './mdc-list/list-theme' as mdc-list-* show mdc-list-color, mdc-list-typography,
42+
mdc-list-density, mdc-list-theme;
43+
@forward './mdc-menu/menu-theme' as mdc-menu-* show mdc-menu-color, mdc-menu-typography,
44+
mdc-menu-density, mdc-menu-theme;
45+
@forward './mdc-paginator/paginator-theme' as mdc-paginator-* show mdc-paginator-color,
46+
mdc-paginator-typography, mdc-paginator-density, mdc-paginator-theme;
47+
@forward './mdc-progress-bar/progress-bar-theme' as mdc-progress-bar-* show mdc-progress-bar-color,
48+
mdc-progress-bar-typography, mdc-progress-bar-density, mdc-progress-bar-theme;
49+
@forward './mdc-progress-spinner/progress-spinner-theme' as mdc-progress-spinner-* show
50+
mdc-progress-spinner-color, mdc-progress-spinner-typography, mdc-progress-spinner-density,
51+
mdc-progress-spinner-theme;
52+
@forward './mdc-radio/radio-theme' as mdc-radio-* show mdc-radio-color, mdc-radio-typography,
53+
mdc-radio-density, mdc-radio-theme;
54+
@forward './mdc-select/select-theme' as mdc-select-* show mdc-select-color, mdc-select-typography,
55+
mdc-select-density, mdc-select-theme;
56+
@forward './mdc-slide-toggle/slide-toggle-theme' as mdc-slide-toggle-* show mdc-slide-toggle-color,
57+
mdc-slide-toggle-typography, mdc-slide-toggle-density, mdc-slide-toggle-theme;
58+
@forward './mdc-snack-bar/snack-bar-theme' as mdc-snack-bar-* show mdc-snack-bar-color,
59+
mdc-snack-bar-typography, mdc-snack-bar-density, mdc-snack-bar-theme;
60+
@forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography,
61+
mdc-table-density, mdc-table-theme;
62+
@forward './mdc-tabs/tabs-theme' as mdc-tabs-* show mdc-tabs-color, mdc-tabs-typography,
63+
mdc-tabs-density, mdc-tabs-theme;
64+
@forward './mdc-tooltip/tooltip-theme' as mdc-tooltip-* show mdc-tooltip-color,
65+
mdc-tooltip-typography, mdc-tooltip-density, mdc-tooltip-theme;

‎src/material-experimental/column-resize/_column-resize.scss renamed to ‎src/material-experimental/column-resize/_column-resize-theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
$resizable-hover-divider: theming.get-color-from-palette($primary, 200);
1414
$resizable-active-divider: theming.get-color-from-palette($primary, 500);
1515

16+
// TODO: these styles don't really belong in the `color` part of the theme.
17+
// We should figure out a better place for them.
1618
// Required for resizing to work properly.
1719
.mat-column-resize-table.cdk-column-resize-with-resized-column {
1820
table-layout: fixed;

‎src/material-experimental/column-resize/_column-resize.import.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@forward '../../material/core/style/variables.import';
22
@forward '../../material/core/theming/theming.import';
33
@forward '../../material/core/style/vendor-prefixes.import';
4-
@forward 'column-resize' as mat-column-resize-*;
4+
@forward 'column-resize-theme' as mat-column-resize-*;
55

66
@import '../../material/core/style/variables';
77
@import '../../material/core/style/vendor-prefixes';

‎src/material-experimental/mdc-core/_core-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
// there won't be multiple warnings. e.g. if `mat-mdc-core-theme` reports a warning, then
1010
// the imported themes (such as `mat-ripple-theme`) should not report again.
1111
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
12-
@include option-theme.option-theme($theme);
12+
@include option-theme.theme($theme);
1313
@include optgroup-theme.theme($theme);
1414
}
1515
}

‎src/material-experimental/mdc-core/option/_optgroup-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
@include mdc-helpers.mat-using-mdc-theme($config) {
1010
.mat-mdc-optgroup-label {
1111
// Since this will usually be rendered in an overlay,
12-
// we have explicitly set the default color.
12+
// we have to explicitly set the default color.
1313
@include mdc-theme.prop(color, text-primary-on-background);
1414
@include mdc-list.deprecated-item-disabled-text-color(
1515
mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);

‎src/material-experimental/mdc-core/option/_option-theme.import.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@forward '../../../material/core/theming/theming.import';
22
@forward '../../mdc-helpers/mdc-helpers.import';
33
@forward '../../mdc-helpers/mdc-helpers';
4-
@forward 'option-theme' as mat-mdc-*;
4+
@forward 'option-theme' as mat-mdc-option-*;
55

66
@import '../../mdc-helpers/mdc-helpers';
77
@import '../../../material/core/theming/theming';

‎src/material-experimental/mdc-core/option/_option-theme.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@use '../../mdc-helpers/mdc-helpers';
99
@use '../../../material/core/theming/theming';
1010

11-
@mixin option-color($config-or-theme) {
11+
@mixin color($config-or-theme) {
1212
$config: theming.get-color-config($config-or-theme);
1313

1414
@include mdc-helpers.mat-using-mdc-theme($config) {
@@ -53,7 +53,7 @@
5353
}
5454
}
5555

56-
@mixin option-typography($config-or-theme) {
56+
@mixin typography($config-or-theme) {
5757
$config: theming.get-typography-config($config-or-theme);
5858

5959
@include mdc-helpers.mat-using-mdc-typography($config) {
@@ -65,25 +65,25 @@
6565
}
6666
}
6767

68-
@mixin option-density($config-or-theme) {
68+
@mixin density($config-or-theme) {
6969
$density-scale: theming.get-density-config($config-or-theme);
7070
}
7171

72-
@mixin option-theme($theme-or-color-config) {
72+
@mixin theme($theme-or-color-config) {
7373
$theme: theming.private-legacy-get-theme($theme-or-color-config);
7474
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-option') {
7575
$color: theming.get-color-config($theme);
7676
$density: theming.get-density-config($theme);
7777
$typography: theming.get-typography-config($theme);
7878

7979
@if $color != null {
80-
@include option-color($color);
80+
@include color($color);
8181
}
8282
@if $density != null {
83-
@include option-density($density);
83+
@include density($density);
8484
}
8585
@if $typography != null {
86-
@include option-typography($typography);
86+
@include typography($typography);
8787
}
8888
}
8989
}

‎src/material-experimental/mdc-helpers/_mdc-helpers.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ $mat-typography-2018-level-mappings: (
130130
}
131131

132132
// Converts an Angular Material typography config to an MDC one.
133-
@function mat-typography-config-to-mdc($mat-config: typography.define-typography-config()) {
133+
@function mat-typography-config-to-mdc($mat-config: typography.define-mdc-typography-config()) {
134134
$mdc-config: ();
135135

136136
$mappings: if(typography.private-typography-is-2018-config($mat-config),

‎src/material-experimental/mdc-typography/_all-typography.import.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
9292
@forward '../mdc-form-field/form-field-focus-overlay' as mat-mdc-*;
9393
@forward '../mdc-form-field/form-field-theme' as mat-mdc-form-field-*;
9494
@forward '../mdc-theming/all-theme';
95-
@forward 'all-typography' hide define-typography-config, all-mdc-component-typographies;
95+
@forward 'all-typography' hide define-mdc-typography-config, all-mdc-component-typographies;
9696
@forward 'all-typography' as mat-mdc-typography-* hide
9797
mat-mdc-typography-all-mdc-component-typographies;
9898

‎src/material-experimental/mdc-typography/_all-typography.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
/// @param {Map} $button The font settings for the button font level.
2727
/// @param {Map} $overline The font settings for the overline font level.
2828
/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
29-
@function define-typography-config(
29+
@function define-mdc-typography-config(
3030
$font-family: mdc-typography.$font-family,
3131
$headline-1: mdc-helpers.mat-typography-config-level-from-mdc(headline1),
3232
$headline-2: mdc-helpers.mat-typography-config-level-from-mdc(headline2),

‎src/material-experimental/popover-edit/_popover-edit.scss renamed to ‎src/material-experimental/popover-edit/_popover-edit-theme.scss

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@use '../../material/core/typography/typography';
88
@use '../../material/core/typography/typography-utils';
99

10-
@function mat-edit-hover-content-background($direction, $background-color) {
10+
@function _hover-content-background($direction, $background-color) {
1111
@return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
1212
}
1313

@@ -18,13 +18,15 @@
1818
$primary: map.get($config, primary);
1919
$background-color: theming.get-color-from-palette($background, 'card');
2020

21+
// TODO: these structural styles don't belong in the `color` part of a theme.
22+
// We should figure out a better place for them.
2123
.mat-row-hover-content-host-cell {
2224
position: relative;
2325
}
2426

2527
.mat-row-hover-content {
2628
align-items: center;
27-
background: mat-edit-hover-content-background(90deg, $background-color);
29+
background: _hover-content-background(90deg, $background-color);
2830
bottom: 0;
2931
display: flex;
3032
opacity: 0;
@@ -36,7 +38,7 @@
3638
}
3739

3840
.mat-row-hover-content-rtl {
39-
background: mat-edit-hover-content-background(270deg, $background-color);
41+
background: _hover-content-background(270deg, $background-color);
4042
left: 0;
4143
right: auto;
4244
}
@@ -138,10 +140,10 @@
138140
flex-wrap: wrap;
139141
justify-content: flex-end;
140142
margin: 8px -16px -8px;
143+
}
141144

142-
[mat-edit-fill] + & {
143-
margin-top: 16px;
144-
}
145+
[mat-edit-fill] + [mat-edit-actions] {
146+
margin-top: 16px;
145147
}
146148
}
147149

0 commit comments

Comments
 (0)