Skip to content

Commit 5918ed5

Browse files
committed
feat(material-excperimental/mdc-core): add missing color, density, typography mixins
1 parent a52da04 commit 5918ed5

File tree

2 files changed

+42
-15
lines changed

2 files changed

+42
-15
lines changed

src/material-experimental/_index.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
popover-edit-typography, popover-edit-density, popover-edit-theme;
1717

1818
// MDC-related themes
19-
@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme;
19+
@forward './mdc-core/core-theme' as mdc-core-* show mdc-core-theme, mdc-core-color,
20+
mdc-core-density, mdc-core-typography;
2021
@forward './mdc-helpers/focus-indicators-theme' as mdc-strong-focus-indicators-* show
2122
mdc-strong-focus-indicators-color, mdc-strong-focus-indicators-theme;
2223
@forward './mdc-core/option/option-theme' as mdc-option-* show mdc-option-color,

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

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,37 @@
33
@use './option/optgroup-theme';
44
@use './elevation';
55

6+
@mixin color($config-or-theme) {
7+
$config: theming.get-color-config($config-or-theme);
8+
9+
@include option-theme.color($config-or-theme);
10+
@include optgroup-theme.color($config-or-theme);
11+
12+
@if $config != null {
13+
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
14+
// `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the
15+
// element is elevated.
16+
@for $zValue from 0 through 24 {
17+
$selector: elevation.$prefix + $zValue;
18+
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
19+
// come with elevation baked in and we don't have a way of removing it.
20+
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
21+
@include elevation.private-theme-elevation($zValue, $config);
22+
}
23+
}
24+
}
25+
}
26+
27+
@mixin typography($config-or-theme) {
28+
@include option-theme.typography($config-or-theme);
29+
@include optgroup-theme.typography($config-or-theme);
30+
}
31+
32+
@mixin density($config-or-theme) {
33+
@include option-theme.density($config-or-theme);
34+
@include optgroup-theme.density($config-or-theme);
35+
}
36+
637
// Mixin that renders all of the core styles that depend on the theme.
738
@mixin theme($theme-or-color-config) {
839
$theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -12,22 +43,17 @@
1243
// the imported themes (such as `mat-ripple-theme`) should not report again.
1344
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-core') {
1445
$color: theming.get-color-config($theme);
15-
16-
@include option-theme.theme($theme);
17-
@include optgroup-theme.theme($theme);
46+
$density: theming.get-density-config($theme);
47+
$typography: theming.get-typography-config($theme);
1848

1949
@if $color != null {
20-
// Provides external CSS classes for each elevation value. Each CSS class is formatted as
21-
// `mat-mdc-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the
22-
// element is elevated.
23-
@for $zValue from 0 through 24 {
24-
$selector: elevation.$prefix + $zValue;
25-
// We need the `mat-mdc-elevation-specific`, because some MDC mixins
26-
// come with elevation baked in and we don't have a way of removing it.
27-
.#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
28-
@include elevation.private-theme-elevation($zValue, $color);
29-
}
30-
}
50+
@include color($color);
51+
}
52+
@if $density != null {
53+
@include density($density);
54+
}
55+
@if $typography != null {
56+
@include typography($typography);
3157
}
3258
}
3359
}

0 commit comments

Comments
 (0)