Skip to content

Commit c4c01f1

Browse files
devversiondevversion
committed
refactor: all-theme file should transitively provide mat-core mixin.
Partially reverts commit 9c97cf3 so that we don't need to perform a large migration in g3 to land the density API changes.
1 parent 1a0d562 commit c4c01f1

File tree

12 files changed

+137
-72
lines changed

12 files changed

+137
-72
lines changed

‎src/dev-app/theme.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@import '../material/core/core';
21
@import '../material/core/color/all-color';
3-
@import '../material/core/theming/all-theme';
42
@import '../material/core/density/all-density';
53
@import '../material/core/focus-indicators/focus-indicators';
64
@import '../material/core/theming/all-theme';

‎src/e2e-app/theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../material/core/core';
21
@import '../material/core/theming/all-theme';
32
@import '../material-experimental/mdc-theming/all-theme';
43
@import '../material-experimental/mdc-typography/all-typography';

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

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/material/core/_core.scss

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
@import '../../cdk/a11y/a11y';
21
@import '../../cdk/overlay/overlay';
2+
@import '../../cdk/a11y/a11y';
33
@import '../../cdk/text-field/text-field';
4+
5+
// Core styles that can be used to apply material design treatments to any element.
6+
@import './style/elevation';
47
@import './ripple/ripple';
8+
@import './option/option-theme';
9+
@import './option/optgroup-theme';
10+
@import './selection/pseudo-checkbox/pseudo-checkbox-theme';
511
@import './typography/all-typography';
612

713
// Mixin that renders all of the core styles that are not theme-dependent.
@@ -12,3 +18,52 @@
1218
@include cdk-overlay();
1319
@include cdk-text-field();
1420
}
21+
22+
@mixin mat-core-color($config-or-theme) {
23+
$config: mat-get-color-config($config-or-theme);
24+
// Wrapper element that provides the theme background when the user's content isn't
25+
// inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
26+
// selector in case the mixin is included at the top level.
27+
.mat-app-background#{if(&, ', &.mat-app-background', '')} {
28+
$background: map-get($config, background);
29+
$foreground: map-get($config, foreground);
30+
31+
background-color: mat-color($background, background);
32+
color: mat-color($foreground, text);
33+
}
34+
35+
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
36+
// `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
37+
// elevated.
38+
@for $zValue from 0 through 24 {
39+
.#{$_mat-elevation-prefix}#{$zValue} {
40+
@include _mat-theme-elevation($zValue, $config);
41+
}
42+
}
43+
44+
// Marker that is used to determine whether the user has added a theme to their page.
45+
@at-root {
46+
.mat-theme-loaded-marker {
47+
display: none;
48+
}
49+
}
50+
}
51+
52+
// Mixin that renders all of the core styles that depend on the theme.
53+
@mixin mat-core-theme($theme-or-color-config) {
54+
$theme: _mat-legacy-get-theme($theme-or-color-config);
55+
// Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
56+
// there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
57+
// the imported themes (such as `mat-ripple-theme`) should not report again.
58+
@include _mat-check-duplicate-theme-styles($theme, 'mat-core') {
59+
@include mat-ripple-theme($theme);
60+
@include mat-option-theme($theme);
61+
@include mat-optgroup-theme($theme);
62+
@include mat-pseudo-checkbox-theme($theme);
63+
64+
$color: mat-get-color-config($theme);
65+
@if $color != null {
66+
@include mat-core-color($color);
67+
}
68+
}
69+
}

‎src/material/core/theming/_all-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Import all the theming functionality.
2-
@import '../core-theme';
2+
@import '../core';
33
@import '../../autocomplete/autocomplete-theme';
44
@import '../../badge/badge-theme';
55
@import '../../bottom-sheet/bottom-sheet-theme';

‎src/material/core/theming/prebuilt/deeppurple-amber.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../core';
21
@import '../all-theme';
32

43

‎src/material/core/theming/prebuilt/indigo-pink.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../core';
21
@import '../all-theme';
32

43

‎src/material/core/theming/prebuilt/pink-bluegrey.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../core';
21
@import '../all-theme';
32

43

‎src/material/core/theming/prebuilt/purple-green.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../core';
21
@import '../all-theme';
32

43

‎src/material/core/typography/_all-typography.scss

Lines changed: 80 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,41 @@
1-
@import '../theming/all-theme';
21
@import './typography';
2+
@import '../../autocomplete/autocomplete-theme';
3+
@import '../../badge/badge-theme';
4+
@import '../../bottom-sheet/bottom-sheet-theme';
5+
@import '../../button/button-theme';
6+
@import '../../button-toggle/button-toggle-theme';
7+
@import '../../card/card-theme';
8+
@import '../../checkbox/checkbox-theme';
9+
@import '../../chips/chips-theme';
10+
@import '../../divider/divider-theme';
11+
@import '../../table/table-theme';
12+
@import '../../datepicker/datepicker-theme';
13+
@import '../../dialog/dialog-theme';
14+
@import '../../expansion/expansion-theme';
15+
@import '../../grid-list/grid-list-theme';
16+
@import '../../icon/icon-theme';
17+
@import '../../input/input-theme';
18+
@import '../../list/list-theme';
19+
@import '../../menu/menu-theme';
20+
@import '../../paginator/paginator-theme';
21+
@import '../../progress-bar/progress-bar-theme';
22+
@import '../../progress-spinner/progress-spinner-theme';
23+
@import '../../radio/radio-theme';
24+
@import '../../select/select-theme';
25+
@import '../../sidenav/sidenav-theme';
26+
@import '../../slide-toggle/slide-toggle-theme';
27+
@import '../../slider/slider-theme';
28+
@import '../../stepper/stepper-theme';
29+
@import '../../sort/sort-theme';
30+
@import '../../tabs/tabs-theme';
31+
@import '../../toolbar/toolbar-theme';
32+
@import '../../tooltip/tooltip-theme';
33+
@import '../../snack-bar/snack-bar-theme';
34+
@import '../option/option-theme';
35+
@import '../option/optgroup-theme';
36+
@import '../../form-field/form-field-theme';
37+
@import '../../tree/tree-theme';
38+
339

440
// Includes all of the typographic styles.
541
@mixin angular-material-typography($config-or-theme: null) {
@@ -11,9 +47,47 @@
1147
$config: mat-typography-config();
1248
}
1349

14-
@include angular-material-theme((
15-
color: null,
16-
density: null,
17-
typography: $config,
18-
));
50+
// TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
51+
// specify a `typography` config while setting `color` and `density` to `null`. This is currently
52+
// not possible as it would introduce a circular dependency for typography because the `mat-core`
53+
// mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
54+
// would then load `all-theme` again. This ultimately results a circular dependency.
55+
56+
@include mat-badge-typography($config);
57+
@include mat-base-typography($config);
58+
@include mat-autocomplete-typography($config);
59+
@include mat-bottom-sheet-typography($config);
60+
@include mat-button-typography($config);
61+
@include mat-button-toggle-typography($config);
62+
@include mat-card-typography($config);
63+
@include mat-checkbox-typography($config);
64+
@include mat-chips-typography($config);
65+
@include mat-divider-typography($config);
66+
@include mat-table-typography($config);
67+
@include mat-datepicker-typography($config);
68+
@include mat-dialog-typography($config);
69+
@include mat-expansion-panel-typography($config);
70+
@include mat-form-field-typography($config);
71+
@include mat-grid-list-typography($config);
72+
@include mat-icon-typography($config);
73+
@include mat-input-typography($config);
74+
@include mat-menu-typography($config);
75+
@include mat-paginator-typography($config);
76+
@include mat-progress-bar-typography($config);
77+
@include mat-progress-spinner-typography($config);
78+
@include mat-radio-typography($config);
79+
@include mat-select-typography($config);
80+
@include mat-sidenav-typography($config);
81+
@include mat-slide-toggle-typography($config);
82+
@include mat-slider-typography($config);
83+
@include mat-stepper-typography($config);
84+
@include mat-sort-typography($config);
85+
@include mat-tabs-typography($config);
86+
@include mat-toolbar-typography($config);
87+
@include mat-tooltip-typography($config);
88+
@include mat-list-typography($config);
89+
@include mat-option-typography($config);
90+
@include mat-optgroup-typography($config);
91+
@include mat-snack-bar-typography($config);
92+
@include mat-tree-typography($config);
1993
}

‎src/material/theming-bundle.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// File for which all imports are resolved and bundled. This is the entry-point for
22
// the `@angular/material` theming Sass bundle. See `//src/material:theming_bundle`.
33

4-
@import './core/core';
54
@import './core/color/all-color';
65
@import './core/density/all-density';
76
@import './core/theming/all-theme';

‎src/universal-app/theme.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../material/core/core';
21
@import '../material/core/theming/all-theme';
32
@import '../material-experimental/mdc-theming/all-theme';
43
@import '../material-experimental/mdc-typography/all-typography';

0 commit comments

Comments
 (0)