Skip to content

Commit e37d50f

Browse files
crisbetocrisbeto
committed
refactor(material/toolbar): switch to tokens API (#27479)
Reworks the toolbar to use the new tokens theming API. (cherry picked from commit ffb2464)
1 parent 3110fff commit e37d50f

File tree

5 files changed

+164
-71
lines changed

5 files changed

+164
-71
lines changed

‎src/material/core/tokens/_token-utils.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ $placeholder-typography-config: (
4040
button: $_placeholder-typography-level-config,
4141
overline: $_placeholder-typography-level-config,
4242
subheading-1: $_placeholder-typography-level-config,
43+
title: $_placeholder-typography-level-config,
4344
);
4445

4546
// Placeholder density config that can be passed to token getter functions when generating token

‎src/material/core/tokens/m2/mat/_toolbar.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../typography/typography-utils';
4+
@use '../../../theming/theming';
5+
@use '../../../style/sass-utils';
6+
7+
// The prefix used to generate the fully qualified name for tokens in this file.
8+
$prefix: (mat, toolbar);
9+
10+
// Tokens that can't be configured through Angular Material's current theming API,
11+
// but may be in a future version of the theming API.
12+
@function get-unthemable-tokens() {
13+
@return ();
14+
}
15+
16+
// Tokens that can be configured through Angular Material's color theming API.
17+
@function get-color-tokens($config) {
18+
$foreground: map.get($config, foreground);
19+
$background: map.get($config, background);
20+
21+
@return private-get-color-palette-color-tokens(
22+
$background-color: theming.get-color-from-palette($background, app-bar),
23+
$text-color: theming.get-color-from-palette($foreground, text),
24+
);
25+
}
26+
27+
// Tokens that can be configured through Angular Material's typography theming API.
28+
@function get-typography-tokens($config) {
29+
@return (
30+
title-text-font: typography-utils.font-family($config, title) or
31+
typography-utils.font-family($config),
32+
title-text-line-height: typography-utils.line-height($config, title),
33+
title-text-size: typography-utils.font-size($config, title),
34+
title-text-tracking: typography-utils.letter-spacing($config, title),
35+
title-text-weight: typography-utils.font-weight($config, title),
36+
);
37+
}
38+
39+
// Tokens that can be configured through Angular Material's density theming API.
40+
@function get-density-tokens($config) {
41+
$density-scale: theming.clamp-density($config, -3);
42+
$standard-scale: (
43+
0: 64px,
44+
-1: 60px,
45+
-2: 56px,
46+
-3: 52px,
47+
);
48+
49+
$mobile-scale: (
50+
0: 56px,
51+
-1: 52px,
52+
-2: 48px,
53+
-3: 44px,
54+
);
55+
56+
@return (
57+
standard-height: map.get($standard-scale, $density-scale),
58+
mobile-height: map.get($mobile-scale, $density-scale),
59+
);
60+
}
61+
62+
// Generates the tokens used to theme the toolbar based on a palette.
63+
@function private-get-color-palette-color-tokens($background-color, $text-color) {
64+
@return (
65+
container-background-color: $background-color,
66+
container-text-color: $text-color,
67+
);
68+
}
69+
70+
// Combines the tokens generated by the above functions into a single map with placeholder values.
71+
// This is used to create token slots.
72+
@function get-token-slots() {
73+
@return sass-utils.deep-merge-all(
74+
get-unthemable-tokens(),
75+
get-color-tokens(token-utils.$placeholder-color-config),
76+
get-typography-tokens(token-utils.$placeholder-typography-config),
77+
get-density-tokens(token-utils.$placeholder-density-config)
78+
);
79+
}

‎src/material/toolbar/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ sass_binary(
3939
src = "toolbar.scss",
4040
deps = [
4141
"//src/cdk:sass_lib",
42+
"//src/material/core:core_scss_lib",
4243
],
4344
)
4445

‎src/material/toolbar/_toolbar-theme.scss‎

Lines changed: 25 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,59 @@
11
@use 'sass:map';
2-
@use '../core/density/private/compatibility';
3-
@use '../core/style/variables';
42
@use '../core/theming/theming';
53
@use '../core/typography/typography';
6-
@use '../core/typography/typography-utils';
7-
@use './toolbar-variables';
8-
9-
@mixin _height($height) {
10-
.mat-toolbar-multiple-rows {
11-
min-height: $height;
12-
}
13-
.mat-toolbar-row, .mat-toolbar-single-row {
14-
height: $height;
15-
}
16-
}
4+
@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
5+
@use '../core/tokens/token-utils';
6+
@use '../core/style/sass-utils';
177

188
@mixin _palette-styles($palette) {
19-
background: theming.get-color-from-palette($palette);
20-
color: theming.get-color-from-palette($palette, default-contrast);
21-
}
22-
23-
@mixin _form-field-overrides {
24-
.mat-form-field-underline,
25-
.mat-form-field-ripple,
26-
.mat-focused .mat-form-field-ripple {
27-
background-color: currentColor;
28-
}
29-
30-
.mat-form-field-label,
31-
.mat-focused .mat-form-field-label,
32-
.mat-select-value,
33-
.mat-select-arrow,
34-
.mat-form-field.mat-focused .mat-select-arrow {
35-
color: inherit;
36-
}
37-
38-
.mat-input-element {
39-
caret-color: currentColor;
40-
}
9+
@include token-utils.create-token-values(
10+
tokens-mat-toolbar.$prefix,
11+
tokens-mat-toolbar.private-get-color-palette-color-tokens(
12+
$background-color: theming.get-color-from-palette($palette),
13+
$text-color: theming.get-color-from-palette($palette, default-contrast)
14+
)
15+
);
4116
}
4217

4318
@mixin color($config-or-theme) {
4419
$config: theming.get-color-config($config-or-theme);
45-
$primary: map.get($config, primary);
46-
$accent: map.get($config, accent);
47-
$warn: map.get($config, warn);
48-
$background: map.get($config, background);
49-
$foreground: map.get($config, foreground);
5020

51-
.mat-toolbar {
52-
background: theming.get-color-from-palette($background, app-bar);
53-
color: theming.get-color-from-palette($foreground, text);
21+
@include sass-utils.current-selector-or-root() {
22+
@include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
23+
tokens-mat-toolbar.get-color-tokens($config));
24+
}
5425

26+
.mat-toolbar {
5527
&.mat-primary {
56-
@include _palette-styles($primary);
28+
@include _palette-styles(map.get($config, primary));
5729
}
5830

5931
&.mat-accent {
60-
@include _palette-styles($accent);
32+
@include _palette-styles(map.get($config, accent));
6133
}
6234

6335
&.mat-warn {
64-
@include _palette-styles($warn);
36+
@include _palette-styles(map.get($config, warn));
6537
}
66-
67-
@include _form-field-overrides;
6838
}
6939
}
7040

7141
@mixin typography($config-or-theme) {
7242
$config: typography.private-typography-to-2014-config(
7343
theming.get-typography-config($config-or-theme));
74-
.mat-toolbar,
75-
.mat-toolbar h1,
76-
.mat-toolbar h2,
77-
.mat-toolbar h3,
78-
.mat-toolbar h4,
79-
.mat-toolbar h5,
80-
.mat-toolbar h6 {
81-
@include typography-utils.typography-level($config, title);
82-
margin: 0;
44+
45+
@include sass-utils.current-selector-or-root() {
46+
@include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
47+
tokens-mat-toolbar.get-typography-tokens($config));
8348
}
8449
}
8550

8651
@mixin density($config-or-theme) {
8752
$density-scale: theming.get-density-config($config-or-theme);
88-
$height-desktop: compatibility.private-density-prop-value(
89-
toolbar-variables.$desktop-density-config, $density-scale, height);
90-
$height-mobile: compatibility.private-density-prop-value(
91-
toolbar-variables.$mobile-density-config, $density-scale, height);
9253

93-
@include compatibility.private-density-legacy-compatibility() {
94-
// Set the default height for the toolbar.
95-
@include _height($height-desktop);
96-
97-
// As per specs, toolbars should have a different height in mobile devices. This has been
98-
// specified in the old guidelines and is still observable in the new specifications by
99-
// looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
100-
@media (variables.$xsmall) {
101-
@include _height($height-mobile);
102-
}
54+
@include sass-utils.current-selector-or-root() {
55+
@include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
56+
tokens-mat-toolbar.get-density-tokens($density-scale));
10357
}
10458
}
10559

‎src/material/toolbar/toolbar.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@use '@angular/cdk';
2+
@use '../core/tokens/token-utils';
3+
@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
4+
@use '../core/style/variables';
25

36
$row-padding: 16px !default;
47

@@ -7,10 +10,44 @@ $row-padding: 16px !default;
710
$height-mobile-portrait: 56px !default;
811

912
.mat-toolbar {
13+
@include token-utils.use-tokens(
14+
tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
15+
@include token-utils.create-token-slot(background, container-background-color);
16+
@include token-utils.create-token-slot(color, container-text-color);
17+
18+
&, h1, h2, h3, h4, h5, h6 {
19+
@include token-utils.create-token-slot(font-family, title-text-font);
20+
@include token-utils.create-token-slot(font-size, title-text-size);
21+
@include token-utils.create-token-slot(line-height, title-text-line-height);
22+
@include token-utils.create-token-slot(font-weight, title-text-weight);
23+
@include token-utils.create-token-slot(letter-spacing, title-text-tracking);
24+
margin: 0;
25+
}
26+
}
27+
1028
@include cdk.high-contrast(active, off) {
1129
outline: solid 1px;
1230
}
1331

32+
// Overrides so that components projected into the toolbar are visible.
33+
.mat-form-field-underline,
34+
.mat-form-field-ripple,
35+
.mat-focused .mat-form-field-ripple {
36+
background-color: currentColor;
37+
}
38+
39+
.mat-form-field-label,
40+
.mat-focused .mat-form-field-label,
41+
.mat-select-value,
42+
.mat-select-arrow,
43+
.mat-form-field.mat-focused .mat-select-arrow {
44+
color: inherit;
45+
}
46+
47+
.mat-input-element {
48+
caret-color: currentColor;
49+
}
50+
1451
.mat-mdc-button-base.mat-unthemed {
1552
--mdc-text-button-label-text-color: inherit;
1653
--mdc-outlined-button-label-text-color: inherit;
@@ -31,11 +68,32 @@ $height-mobile-portrait: 56px !default;
3168
// Per Material specs a toolbar cannot have multiple lines inside of a single row.
3269
// Disable text wrapping inside of the toolbar. Developers are still able to overwrite it.
3370
white-space: nowrap;
71+
72+
@include token-utils.use-tokens(
73+
tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
74+
@include token-utils.create-token-slot(height, standard-height);
75+
76+
@media (variables.$xsmall) {
77+
@include token-utils.create-token-slot(height, mobile-height);
78+
}
79+
}
3480
}
3581

3682
.mat-toolbar-multiple-rows {
3783
display: flex;
3884
box-sizing: border-box;
3985
flex-direction: column;
4086
width: 100%;
87+
88+
@include token-utils.use-tokens(
89+
tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
90+
@include token-utils.create-token-slot(min-height, standard-height);
91+
92+
// As per specs, toolbars should have a different height in mobile devices. This has been
93+
// specified in the old guidelines and is still observable in the new specifications by
94+
// looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
95+
@media (variables.$xsmall) {
96+
@include token-utils.create-token-slot(min-height, mobile-height);
97+
}
98+
}
4199
}

0 commit comments

Comments
 (0)