Skip to content

Commit 247169c

Browse files
devversionandrewseguin
devversion
authored and
andrewseguin
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 e288558 commit 247169c

File tree

4 files changed

+134
-105
lines changed

4 files changed

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

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

Lines changed: 0 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -212,100 +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($config);
221-
/// }
222-
@mixin mat-mdc-strong-focus-indicators($config: ()) {
223-
// Default focus indicator config.
224-
$default-config: (
225-
border-style: solid,
226-
border-width: 3px,
227-
border-radius: 4px,
228-
);
229-
230-
// Merge default config with user config.
231-
$config: map-merge($default-config, $config);
232-
$border-style: map-get($config, border-style);
233-
$border-width: map-get($config, border-width);
234-
$border-radius: map-get($config, border-radius);
235-
236-
// Base styles for focus indicators.
237-
.mat-mdc-focus-indicator::before {
238-
@include mat-fill();
239-
box-sizing: border-box;
240-
pointer-events: none;
241-
border: $border-width $border-style transparent;
242-
border-radius: $border-radius;
243-
}
244-
245-
// By default, all focus indicators are flush with the bounding box of their
246-
// host element. For particular elements (listed below), default inset/offset
247-
// values are necessary to ensure that the focus indicator is sufficiently
248-
// contrastive and renders appropriately.
249-
250-
.mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
251-
.mat-mdc-raised-button .mat-mdc-focus-indicator::before,
252-
.mdc-fab .mat-mdc-focus-indicator::before,
253-
.mat-mdc-focus-indicator.mdc-chip::before {
254-
margin: -($border-width + 2px);
255-
}
256-
257-
.mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
258-
margin: -($border-width + 3px);
259-
}
260-
261-
.mat-mdc-focus-indicator.mat-mdc-chip-remove::before,
262-
.mat-mdc-focus-indicator.mat-chip-row-focusable-text-content::before {
263-
margin: -$border-width;
264-
}
265-
266-
.mat-mdc-focus-indicator.mat-mdc-tab::before,
267-
.mat-mdc-focus-indicator.mat-mdc-tab-link::before {
268-
margin: 5px;
269-
}
270-
271-
// Render the focus indicator on focus. Defining a pseudo element's
272-
// content will cause it to render.
273-
274-
// For checkboxes, radios and slide toggles, render the focus indicator when we know
275-
// the hidden input is focused (slightly different for each control).
276-
.mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
277-
.mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
278-
.mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
279-
280-
// For buttons, render the focus indicator when the parent button is focused.
281-
.mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
282-
283-
// For all other components, render the focus indicator on focus.
284-
.mat-mdc-focus-indicator:focus::before {
285-
content: '';
286-
}
287-
}
288-
289-
/// Mixin that sets the color of the focus indicators.
290-
///
291-
/// @param {color|map} $theme-or-color
292-
/// If theme, focus indicators are set to the primary color of the theme. If
293-
/// color, focus indicators are set to that color.
294-
///
295-
/// @example
296-
/// .demo-dark-theme {
297-
/// @include mat-mdc-strong-focus-indicators-theme($dark-theme-map);
298-
/// }
299-
///
300-
/// @example
301-
/// .demo-red-theme {
302-
/// @include mat-mdc-strong-focus-indicators-theme(#f00);
303-
/// }
304-
@mixin mat-mdc-strong-focus-indicators-theme($theme-or-color) {
305-
.mat-mdc-focus-indicator::before {
306-
border-color: if(
307-
type-of($theme-or-color) == 'map',
308-
mat-color(map_get($theme-or-color, primary)),
309-
$theme-or-color);
310-
}
311-
}

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,17 @@
7979
}
8080
}
8181

82+
// Mixin that applies the border color for the focus indicators.
83+
@mixin _mat-strong-focus-indicators-border-color($color) {
84+
.mat-focus-indicator::before {
85+
border-color: $color;
86+
}
87+
}
88+
89+
@mixin mat-strong-focus-indicators-color($config) {
90+
@include _mat-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
91+
}
92+
8293
/// Mixin that sets the color of the focus indicators.
8394
///
8495
/// @param {color|map} $theme-or-color
@@ -95,10 +106,11 @@
95106
/// @include mat-strong-focus-indicators-theme(#f00);
96107
/// }
97108
@mixin mat-strong-focus-indicators-theme($theme-or-color) {
98-
.mat-focus-indicator::before {
99-
border-color: if(
100-
type-of($theme-or-color) == 'map',
101-
mat-color(map_get($theme-or-color, primary)),
102-
$theme-or-color);
109+
@if type-of($theme-or-color) != 'map' {
110+
@include _mat-strong-focus-indicators-border-color($theme-or-color);
111+
}
112+
$color: mat-get-color-config($theme-or-color);
113+
@if $color != null {
114+
@include mat-strong-focus-indicators-color($color);
103115
}
104116
}

0 commit comments

Comments
 (0)