Skip to content

Commit 74b0c5f

Browse files
mmalerbammalerba
committed
fixup! feat(material/core): move mdc-helpers to material/core
1 parent 3218645 commit 74b0c5f

File tree

3 files changed

+98
-52
lines changed

3 files changed

+98
-52
lines changed

‎src/material/core/focus-indicators/_focus-indicators-theme.scss‎

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,13 @@
1-
@use 'sass:map';
2-
@use 'sass:meta';
3-
@use '../theming/theming';
41
@use './private';
52

6-
$_prefix: 'mat';
7-
83
// stylelint-disable-next-line material/theme-mixin-api
94
@mixin color($config-or-theme-or-color) {
10-
@if meta.type-of($config-or-theme-or-color) == 'color' {
11-
@include private.customize-focus-indicators((
12-
border-color: $config-or-theme-or-color
13-
), 'mat');
14-
@include private.customize-focus-indicators((
15-
border-color: $config-or-theme-or-color
16-
), 'mat-mdc');
17-
}
18-
@else {
19-
$config: theming.get-color-config($config-or-theme-or-color);
20-
$border-color: theming.get-color-from-palette(map.get($config, primary));
21-
@include private.customize-focus-indicators((
22-
border-color: $border-color
23-
), 'mat');
24-
@include private.customize-focus-indicators((
25-
border-color: $border-color
26-
), 'mat-mdc');
27-
}
5+
@include private.strong-focus-indicators-color($config-or-theme-or-color);
6+
@include private.mdc-strong-focus-indicators-color($config-or-theme-or-color);
287
}
298

309
// stylelint-disable-next-line material/theme-mixin-api
3110
@mixin theme($theme-or-color-config-or-color) {
32-
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
33-
@include private.customize-focus-indicators((
34-
border-color: $theme-or-color-config-or-color
35-
), 'mat');
36-
@include private.customize-focus-indicators((
37-
border-color: $theme-or-color-config-or-color
38-
), 'mat-mdc');
39-
}
40-
@else {
41-
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
42-
@include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
43-
$color: theming.get-color-config($theme);
44-
@if $color != null {
45-
@include color($color);
46-
}
47-
}
48-
}
11+
@include private.strong-focus-indicators-theme($theme-or-color-config-or-color);
12+
@include private.mdc-strong-focus-indicators-theme($theme-or-color-config-or-color);
4913
}

‎src/material/core/focus-indicators/_focus-indicators.scss‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
1-
@use 'sass:map';
21
@use './private';
32

43
@mixin strong-focus-indicators($config: ()) {
5-
// Default focus indicator config.
6-
$default-config: (
7-
border-color: black,
8-
display: block,
9-
);
10-
11-
// Merge default config with user config.
12-
$config: map.merge($default-config, $config);
13-
14-
@include private.customize-focus-indicators($config, 'mat');
15-
@include private.customize-focus-indicators($config, 'mat-mdc');
4+
@include private.strong-focus-indicators($config);
5+
@include private.mdc-strong-focus-indicators($config);
166
}

‎src/material/core/focus-indicators/_private.scss‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use 'sass:map';
2+
@use 'sass:meta';
23
@use '@angular/cdk';
34
@use '../style/layout-common';
5+
@use '../theming/theming';
46

57
// Private sass variables that will be used as reference throughout component stylesheets.
68
$default-border-width: 3px;
@@ -84,3 +86,93 @@ $default-border-radius: 4px;
8486
}
8587
}
8688
}
89+
90+
@mixin strong-focus-indicators($config: ()) {
91+
// Default focus indicator config.
92+
$default-config: (
93+
border-color: black,
94+
display: block,
95+
);
96+
97+
// Merge default config with user config.
98+
$config: map.merge($default-config, $config);
99+
100+
@include customize-focus-indicators($config, 'mat');
101+
}
102+
103+
@mixin mdc-strong-focus-indicators($config: ()) {
104+
// Default focus indicator config.
105+
$default-config: (
106+
border-color: black,
107+
display: block,
108+
);
109+
110+
// Merge default config with user config.
111+
$config: map.merge($default-config, $config);
112+
113+
@include customize-focus-indicators($config, 'mat-mdc');
114+
}
115+
116+
@mixin strong-focus-indicators-color($config-or-theme-or-color) {
117+
@if meta.type-of($config-or-theme-or-color) == 'color' {
118+
@include customize-focus-indicators((
119+
border-color: $config-or-theme-or-color
120+
), 'mat');
121+
}
122+
@else {
123+
$config: theming.get-color-config($config-or-theme-or-color);
124+
$border-color: theming.get-color-from-palette(map.get($config, primary));
125+
@include customize-focus-indicators((
126+
border-color: $border-color
127+
), 'mat');
128+
}
129+
}
130+
131+
@mixin strong-focus-indicators-theme($theme-or-color-config-or-color) {
132+
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
133+
@include customize-focus-indicators((
134+
border-color: $theme-or-color-config-or-color
135+
), 'mat');
136+
}
137+
@else {
138+
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
139+
@include theming.private-check-duplicate-theme-styles($theme, 'mat-focus-indicators') {
140+
$color: theming.get-color-config($theme);
141+
@if $color != null {
142+
@include strong-focus-indicators-color($color);
143+
}
144+
}
145+
}
146+
}
147+
148+
@mixin mdc-strong-focus-indicators-color($config-or-theme-or-color) {
149+
@if meta.type-of($config-or-theme-or-color) == 'color' {
150+
@include customize-focus-indicators((
151+
border-color: $config-or-theme-or-color
152+
), 'mat-mdc');
153+
}
154+
@else {
155+
$config: theming.get-color-config($config-or-theme-or-color);
156+
$border-color: theming.get-color-from-palette(map.get($config, primary));
157+
@include customize-focus-indicators((
158+
border-color: $border-color
159+
), 'mat-mdc');
160+
}
161+
}
162+
163+
@mixin mdc-strong-focus-indicators-theme($theme-or-color-config-or-color) {
164+
@if meta.type-of($theme-or-color-config-or-color) == 'color' {
165+
@include customize-focus-indicators((
166+
border-color: $theme-or-color-config-or-color
167+
), 'mat-mdc');
168+
}
169+
@else {
170+
$theme: theming.private-legacy-get-theme($theme-or-color-config-or-color);
171+
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-focus-indicators') {
172+
$color: theming.get-color-config($theme);
173+
@if $color != null {
174+
@include mdc-strong-focus-indicators-color($color);
175+
}
176+
}
177+
}
178+
}

0 commit comments

Comments
 (0)