Skip to content

Commit cb29697

Browse files
crisbetocrisbeto
authored
refactor(material/tabs): switch to tokens API (#26881)
Switches the tabs to use the new tokens API.
1 parent b578e2f commit cb29697

File tree

10 files changed

+460
-113
lines changed

10 files changed

+460
-113
lines changed

‎src/material/core/tokens/m2/mat/_tab-header-with-background.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../theming/theming';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mat, tab-header-with-background);
7+
8+
// Tokens that can't be configured through Angular Material's current theming API,
9+
// but may be in a future version of the theming API.
10+
@function get-unthemable-tokens() {
11+
@return ();
12+
}
13+
14+
// Tokens that can be configured through Angular Material's color theming API.
15+
@function get-color-tokens($config) {
16+
$primary: map.get($config, primary);
17+
18+
@return (
19+
background-color: theming.get-color-from-palette($primary, default),
20+
foreground-color: theming.get-color-from-palette($primary, default-contrast),
21+
);
22+
}
23+
24+
// Tokens that can be configured through Angular Material's typography theming API.
25+
@function get-typography-tokens($config) {
26+
@return ();
27+
}
28+
29+
// Tokens that can be configured through Angular Material's density theming API.
30+
@function get-density-tokens($config) {
31+
@return ();
32+
}
33+
34+
// Combines the tokens generated by the above functions into a single map with placeholder values.
35+
// This is used to create token slots.
36+
@function get-token-slots() {
37+
@return token-utils.merge-all(
38+
get-unthemable-tokens(),
39+
get-color-tokens(token-utils.$placeholder-color-config),
40+
get-typography-tokens(token-utils.$placeholder-typography-config),
41+
get-density-tokens(token-utils.$placeholder-density-config)
42+
);
43+
}

‎src/material/core/tokens/m2/mat/_tab-header.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@use 'sass:map';
2+
@use '../../token-utils';
3+
@use '../../../theming/theming';
4+
@use '../../../typography/typography-utils';
5+
6+
// The prefix used to generate the fully qualified name for tokens in this file.
7+
$prefix: (mat, tab-header);
8+
9+
// Tokens that can't be configured through Angular Material's current theming API,
10+
// but may be in a future version of the theming API.
11+
@function get-unthemable-tokens() {
12+
@return ();
13+
}
14+
15+
// Tokens that can be configured through Angular Material's color theming API.
16+
@function get-color-tokens($config) {
17+
$is-dark: map.get($config, is-dark);
18+
$foreground: map.get($config, foreground);
19+
$primary: map.get($config, primary);
20+
21+
@return (
22+
ripple-color: theming.get-color-from-palette($primary, default),
23+
disabled-ripple-color: theming.get-color-from-palette($foreground, disabled),
24+
pagination-icon-color: if($is-dark, #fff, #000),
25+
26+
// Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
27+
inactive-label-text-color: rgba(if($is-dark, #fff, #000), 0.6),
28+
active-label-text-color: theming.get-color-from-palette($primary, default),
29+
);
30+
}
31+
32+
// Tokens that can be configured through Angular Material's typography theming API.
33+
@function get-typography-tokens($config) {
34+
@return (
35+
// Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
36+
label-text-font:
37+
typography-utils.font-family($config, button) or typography-utils.font-family($config),
38+
label-text-size: typography-utils.font-size($config, button),
39+
label-text-letter-spacing: typography-utils.letter-spacing($config, button),
40+
label-text-line-height: typography-utils.line-height($config, button),
41+
label-text-weight: typography-utils.font-weight($config, button),
42+
);
43+
}
44+
45+
// Tokens that can be configured through Angular Material's density theming API.
46+
@function get-density-tokens($config) {
47+
@return ();
48+
}
49+
50+
// Combines the tokens generated by the above functions into a single map with placeholder values.
51+
// This is used to create token slots.
52+
@function get-token-slots() {
53+
@return token-utils.merge-all(
54+
get-unthemable-tokens(),
55+
get-color-tokens(token-utils.$placeholder-color-config),
56+
get-typography-tokens(token-utils.$placeholder-typography-config),
57+
get-density-tokens(token-utils.$placeholder-density-config)
58+
);
59+
}

‎src/material/core/tokens/m2/mdc/_tab-indicator.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@use 'sass:map';
2+
@use '../../../theming/theming';
3+
@use '../../token-utils';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mdc, tab-indicator);
7+
8+
// Tokens that can't be configured through Angular Material's current theming API,
9+
// but may be in a future version of the theming API.
10+
//
11+
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
12+
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
13+
// our CSS.
14+
@function get-unthemable-tokens() {
15+
@return (
16+
active-indicator-height: 2px,
17+
18+
// =============================================================================================
19+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
20+
// =============================================================================================
21+
active-indicator-shape: null,
22+
);
23+
}
24+
25+
// Tokens that can be configured through Angular Material's color theming API.
26+
@function get-color-tokens($config) {
27+
$primary: map.get($config, primary);
28+
29+
@return (
30+
active-indicator-color: theming.get-color-from-palette($primary, default),
31+
);
32+
}
33+
34+
// Tokens that can be configured through Angular Material's typography theming API.
35+
@function get-typography-tokens($config) {
36+
@return ();
37+
}
38+
39+
// Tokens that can be configured through Angular Material's density theming API.
40+
@function get-density-tokens($config) {
41+
@return ();
42+
}
43+
44+
// Combines the tokens generated by the above functions into a single map with placeholder values.
45+
// This is used to create token slots.
46+
@function get-token-slots() {
47+
@return token-utils.merge-all(
48+
get-unthemable-tokens(),
49+
get-color-tokens(token-utils.$placeholder-color-config),
50+
get-typography-tokens(token-utils.$placeholder-typography-config),
51+
get-density-tokens(token-utils.$placeholder-density-config)
52+
);
53+
}

‎src/material/core/tokens/m2/mdc/_tab.scss

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@use 'sass:map';
2+
@use '../../../theming/theming';
3+
@use '../../token-utils';
4+
5+
// The prefix used to generate the fully qualified name for tokens in this file.
6+
$prefix: (mdc, tab);
7+
8+
// Tokens that can't be configured through Angular Material's current theming API,
9+
// but may be in a future version of the theming API.
10+
//
11+
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
12+
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
13+
// our CSS.
14+
@function get-unthemable-tokens() {
15+
@return (
16+
// This is specified both here and in the density tokens, because it determines the size of the
17+
// tab itself and there are internal tests who don't configure the theme correctly.
18+
container-height: 48px,
19+
20+
// =============================================================================================
21+
// = TOKENS NOT USED IN ANGULAR MATERIAL =
22+
// =============================================================================================
23+
inactive-label-text-color: null,
24+
active-label-text-color: null,
25+
container-color: null,
26+
container-elevation: null,
27+
container-shadow-color: null,
28+
container-shape: null,
29+
focus-label-text-color: null,
30+
focus-state-layer-color: null,
31+
focus-state-layer-opacity: null,
32+
hover-label-text-color: null,
33+
hover-state-layer-color: null,
34+
hover-state-layer-opacity: null,
35+
pressed-label-text-color: null,
36+
pressed-state-layer-color: null,
37+
pressed-state-layer-opacity: null,
38+
with-icon-active-icon-color: null,
39+
with-icon-focus-icon-color: null,
40+
with-icon-hover-icon-color: null,
41+
with-icon-inactive-icon-color: null,
42+
with-icon-pressed-icon-color: null,
43+
with-icon-icon-size: null,
44+
label-text-font: null,
45+
label-text-size: null,
46+
label-text-letter-spacing: null,
47+
label-text-line-height: null,
48+
label-text-weight: null,
49+
);
50+
}
51+
52+
// Tokens that can be configured through Angular Material's color theming API.
53+
@function get-color-tokens($config) {
54+
@return ();
55+
}
56+
57+
// Tokens that can be configured through Angular Material's typography theming API.
58+
@function get-typography-tokens($config) {
59+
@return ();
60+
}
61+
62+
// Tokens that can be configured through Angular Material's density theming API.
63+
@function get-density-tokens($config) {
64+
$scale: theming.clamp-density($config, -4);
65+
66+
@return (
67+
container-height: map.get((
68+
0: 48px,
69+
-1: 44px,
70+
-2: 40px,
71+
-3: 36px,
72+
-4: 32px,
73+
), $scale),
74+
);
75+
}
76+
77+
// Combines the tokens generated by the above functions into a single map with placeholder values.
78+
// This is used to create token slots.
79+
@function get-token-slots() {
80+
@return token-utils.merge-all(
81+
get-unthemable-tokens(),
82+
get-color-tokens(token-utils.$placeholder-color-config),
83+
get-typography-tokens(token-utils.$placeholder-typography-config),
84+
get-density-tokens(token-utils.$placeholder-density-config)
85+
);
86+
}

‎src/material/core/tokens/tests/test-validate-tokens.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
@use '@material/linear-progress/linear-progress-theme' as mdc-linear-progress-theme;
1010
@use '@material/list/list-theme' as mdc-list-theme;
1111
@use '@material/radio/radio-theme' as mdc-radio-theme;
12+
@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
13+
@use '@material/tab/tab-theme' as mdc-tab-theme;
1214
@use '@material/theme/validate' as mdc-validate;
1315

1416
@use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
@@ -19,6 +21,8 @@
1921
@use '../m2/mdc/list' as tokens-mdc-list;
2022
@use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
2123
@use '../m2/mdc/radio' as tokens-mdc-radio;
24+
@use '../m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
25+
@use '../m2/mdc/tab' as tokens-mdc-tab;
2226

2327
@mixin validate-slots($component, $slots, $reference) {
2428
@debug 'Validating #{$component}...';
@@ -72,3 +76,13 @@
7276
$slots: tokens-mdc-radio.get-token-slots(),
7377
$reference: mdc-radio-theme.$light-theme
7478
);
79+
@include validate-slots(
80+
$component: 'm2.mdc.tab-indicator',
81+
$slots: tokens-mdc-tab-indicator.get-token-slots(),
82+
$reference: mdc-tab-indicator-theme.$light-theme
83+
);
84+
@include validate-slots(
85+
$component: 'm2.mdc.tab',
86+
$slots: tokens-mdc-tab.get-token-slots(),
87+
$reference: mdc-tab-theme.$secondary-light-theme
88+
);

0 commit comments

Comments
 (0)