Skip to content

Commit c522351

Browse files
devversiondevversion
committed
refactor: make strong-focus indicators compatible with theming API changes
Makes the strong-focus indicators logic compatible with the new theming API changes. Additionally, for better structuring, the MDC strong-focus indicator code has been moved out from `mdc-helpers` into a separate Sass file.
1 parent ff21b9e commit c522351

File tree

4 files changed

+113
-85
lines changed

4 files changed

+113
-85
lines changed

‎src/dev-app/theme.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import '../material/core/focus-indicator/focus-indicator';
33
@import '../material-experimental/column-resize/column-resize';
44
@import '../material-experimental/mdc-helpers/mdc-helpers';
5+
@import '../material-experimental/mdc-helpers/focus-indicator';
56
@import '../material-experimental/mdc-theming/all-theme';
67
@import '../material-experimental/mdc-typography/all-typography';
78
@import '../material-experimental/mdc-density/all-density';
@@ -19,7 +20,7 @@
1920
// Include base styles for strong focus indicators.
2021
.demo-strong-focus {
2122
@include mat-strong-focus-indicators();
22-
@include mat-mdc-strong-focus-indicators();
23+
@include mat-strong-focus-indicators-mdc();
2324
}
2425

2526
// Define the default theme (same as the example above).
@@ -53,7 +54,7 @@ $dark-theme: mat-dark-theme((
5354
// Include the default theme for focus indicators.
5455
.demo-strong-focus {
5556
@include mat-strong-focus-indicators-theme($candy-app-theme);
56-
@include mat-mdc-strong-focus-indicators-theme($candy-app-theme);
57+
@include mat-strong-focus-indicators-theme-mdc($candy-app-theme);
5758
}
5859

5960
// Include the alternative theme styles inside of a block with a CSS class. You can make this
@@ -70,7 +71,7 @@ $dark-theme: mat-dark-theme((
7071
// Include the dark theme for focus indicators.
7172
.demo-unicorn-dark-theme.demo-strong-focus {
7273
@include mat-strong-focus-indicators-theme($dark-theme);
73-
@include mat-mdc-strong-focus-indicators-theme($dark-theme);
74+
@include mat-strong-focus-indicators-theme-mdc($dark-theme);
7475
}
7576

7677
// Create classes for all density scales which are supported by all MDC-based components.

‎src/material-experimental/mdc-helpers/_focus-indicator.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import '../../material/core/theming/theming';
2+
@import '../../material/core/style/layout-common';
3+
@import '../../material/core/focus-indicator/focus-indicator';
4+
5+
/// Mixin that turns on strong focus indicators.
6+
///
7+
/// @example
8+
/// .my-app {
9+
/// @include mat-strong-focus-indicators-mdc();
10+
/// }
11+
@mixin mat-strong-focus-indicators-mdc() {
12+
// Base styles for the focus indicators.
13+
.mat-mdc-focus-indicator::before {
14+
@include mat-fill();
15+
16+
border-radius: $mat-focus-indicator-border-radius;
17+
border: $mat-focus-indicator-border-width $mat-focus-indicator-border-style transparent;
18+
box-sizing: border-box;
19+
pointer-events: none;
20+
}
21+
22+
// By default, all focus indicators are flush with the bounding box of their
23+
// host element. For particular elements (listed below), default inset/offset
24+
// values are necessary to ensure that the focus indicator is sufficiently
25+
// contrastive and renders appropriately.
26+
27+
.mat-mdc-focus-indicator.mdc-button::before,
28+
.mat-mdc-focus-indicator.mdc-chip::before,
29+
.mat-mdc-focus-indicator.mdc-fab::before,
30+
.mat-mdc-focus-indicator.mdc-icon-button::before {
31+
margin: $mat-focus-indicator-border-width * -2;
32+
}
33+
34+
.mat-mdc-focus-indicator.mat-mdc-chip-remove::before,
35+
.mat-mdc-focus-indicator.mat-chip-row-focusable-text-content::before {
36+
margin: $mat-focus-indicator-border-width * -1;
37+
}
38+
39+
.mat-mdc-focus-indicator.mat-mdc-tab::before,
40+
.mat-mdc-focus-indicator.mat-mdc-tab-link::before {
41+
margin: $mat-focus-indicator-border-width * 2;
42+
}
43+
44+
// Render the focus indicator on focus. Defining a pseudo element's
45+
// content will cause it to render.
46+
47+
// For checkboxes and slide toggles, render the focus indicator when we know the hidden input
48+
// is focused (slightly different for each control).
49+
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
50+
.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
51+
52+
// For all other components, render the focus indicator on focus.
53+
.mat-mdc-focus-indicator:focus::before {
54+
content: '';
55+
}
56+
}
57+
58+
// Mixin that applies the border color for the focus indicators.
59+
@mixin _mat-strong-focus-indicators-border-color-mdc($color) {
60+
.mat-mdc-focus-indicator::before {
61+
border-color: $color;
62+
}
63+
}
64+
65+
@mixin mat-strong-focus-indicators-color-mdc($config) {
66+
@include _mat-strong-focus-indicators-border-color-mdc(mat-color(map_get($config, primary)));
67+
}
68+
69+
/// Mixin that sets the color of the focus indicators.
70+
///
71+
/// @param {color|map} $themeOrMap
72+
/// If theme, focus indicators are set to the primary color of the theme. If
73+
/// color, focus indicators are set to that color.
74+
///
75+
/// @example
76+
/// .demo-dark-theme {
77+
/// @include mat-strong-focus-indicators-theme-mdc($darkThemeMap);
78+
/// }
79+
///
80+
/// @example
81+
/// .demo-red-theme {
82+
/// @include mat-strong-focus-indicators-theme-mdc(#F00);
83+
/// }
84+
@mixin mat-strong-focus-indicators-theme-mdc($themeOrColor) {
85+
@if type-of($themeOrColor) != 'map' {
86+
@include _mat-strong-focus-indicators-border-color-mdc($themeOrColor);
87+
}
88+
$color: mat-get-color-config($themeOrColor);
89+
@if $color != null {
90+
@include mat-strong-focus-indicators-color-mdc($color);
91+
}
92+
}

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

Lines changed: 0 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -212,80 +212,3 @@ $mat-typography-level-mappings: (
212212
// Reset the original values.
213213
$mdc-typography-styles: $orig-mdc-typography-styles !global;
214214
}
215-
216-
/// Mixin that turns on strong focus indicators.
217-
///
218-
/// @example
219-
/// .my-app {
220-
/// @include mat-mdc-strong-focus-indicators();
221-
/// }
222-
@mixin mat-mdc-strong-focus-indicators() {
223-
// Base styles for the focus indicators.
224-
.mat-mdc-focus-indicator::before {
225-
@include mat-fill();
226-
227-
border-radius: $mat-focus-indicator-border-radius;
228-
border: $mat-focus-indicator-border-width $mat-focus-indicator-border-style transparent;
229-
box-sizing: border-box;
230-
pointer-events: none;
231-
}
232-
233-
// By default, all focus indicators are flush with the bounding box of their
234-
// host element. For particular elements (listed below), default inset/offset
235-
// values are necessary to ensure that the focus indicator is sufficiently
236-
// contrastive and renders appropriately.
237-
238-
.mat-mdc-focus-indicator.mdc-button::before,
239-
.mat-mdc-focus-indicator.mdc-chip::before,
240-
.mat-mdc-focus-indicator.mdc-fab::before,
241-
.mat-mdc-focus-indicator.mdc-icon-button::before {
242-
margin: $mat-focus-indicator-border-width * -2;
243-
}
244-
245-
.mat-mdc-focus-indicator.mat-mdc-chip-remove::before,
246-
.mat-mdc-focus-indicator.mat-chip-row-focusable-text-content::before {
247-
margin: $mat-focus-indicator-border-width * -1;
248-
}
249-
250-
.mat-mdc-focus-indicator.mat-mdc-tab::before,
251-
.mat-mdc-focus-indicator.mat-mdc-tab-link::before {
252-
margin: $mat-focus-indicator-border-width * 2;
253-
}
254-
255-
// Render the focus indicator on focus. Defining a pseudo element's
256-
// content will cause it to render.
257-
258-
// For checkboxes and slide toggles, render the focus indicator when we know the hidden input
259-
// is focused (slightly different for each control).
260-
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
261-
.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
262-
263-
// For all other components, render the focus indicator on focus.
264-
.mat-mdc-focus-indicator:focus::before {
265-
content: '';
266-
}
267-
}
268-
269-
/// Mixin that sets the color of the focus indicators.
270-
///
271-
/// @param {color|map} $themeOrMap
272-
/// If theme, focus indicators are set to the primary color of the theme. If
273-
/// color, focus indicators are set to that color.
274-
///
275-
/// @example
276-
/// .demo-dark-theme {
277-
/// @include mat-mdc-strong-focus-indicators-theme($darkThemeMap);
278-
/// }
279-
///
280-
/// @example
281-
/// .demo-red-theme {
282-
/// @include mat-mdc-strong-focus-indicators-theme(#F00);
283-
/// }
284-
@mixin mat-mdc-strong-focus-indicators-theme($themeOrColor) {
285-
.mat-mdc-focus-indicator::before {
286-
border-color: if(
287-
type-of($themeOrColor) == 'map',
288-
mat-color(map_get($themeOrColor, primary)),
289-
$themeOrColor);
290-
}
291-
}

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,17 @@ $mat-focus-indicator-border-style: solid;
6464
}
6565
}
6666

67+
// Mixin that applies the border color for the focus indicators.
68+
@mixin _mat-strong-focus-indicators-border-color($color) {
69+
.mat-focus-indicator::before {
70+
border-color: $color;
71+
}
72+
}
73+
74+
@mixin mat-strong-focus-indicators-color($config) {
75+
@include _mat-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
76+
}
77+
6778
/// Mixin that sets the color of the focus indicators.
6879
///
6980
/// @param {color|map} $themeOrMap
@@ -80,10 +91,11 @@ $mat-focus-indicator-border-style: solid;
8091
/// @include mat-strong-focus-indicators-theme(#F00);
8192
/// }
8293
@mixin mat-strong-focus-indicators-theme($themeOrColor) {
83-
.mat-focus-indicator::before {
84-
border-color: if(
85-
type-of($themeOrColor) == 'map',
86-
mat-color(map_get($themeOrColor, primary)),
87-
$themeOrColor);
94+
@if type-of($themeOrColor) != 'map' {
95+
@include _mat-strong-focus-indicators-border-color($themeOrColor);
96+
}
97+
$color: mat-get-color-config($themeOrColor);
98+
@if $color != null {
99+
@include mat-strong-focus-indicators-color($color);
88100
}
89101
}

0 commit comments

Comments
 (0)