Skip to content

Commit 96a2a86

Browse files
andrewseguinandrewseguin
committed
main - 965aadf refactor: move tokens to their component directories (#30765)
1 parent aae47e4 commit 96a2a86

File tree

181 files changed

+1994
-2145
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

181 files changed

+1994
-2145
lines changed

‎_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
@forward './core/theming/theming' as private-* show private-clamp-density;
1818
@forward './core/typography/typography' show typography-hierarchy;
1919
@forward './core/typography/typography-utils' show font-shorthand;
20-
@forward './core/tokens/m2' show m2-tokens-from-theme;
20+
@forward 'core/tokens/m2-tokens' show m2-tokens-from-theme;
2121
@forward './core/tokens/m3-system' show system-level-colors,
2222
system-level-typography, system-level-elevation, system-level-shape,
2323
system-level-motion, system-level-state, theme, theme-overrides;

‎autocomplete/_autocomplete-theme.scss

+13-13
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
@use '../core/typography/typography';
66
@use '../core/style/sass-utils';
77
@use '../core/tokens/token-utils';
8-
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
8+
@use 'm2-autocomplete';
99

1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1313
} @else {
1414
@include sass-utils.current-selector-or-root() {
1515
@include token-utils.create-token-values-mixed(
16-
tokens-mat-autocomplete.$prefix,
17-
tokens-mat-autocomplete.get-unthemable-tokens()
16+
m2-autocomplete.$prefix,
17+
m2-autocomplete.get-unthemable-tokens()
1818
);
1919
}
2020
}
@@ -26,8 +26,8 @@
2626
} @else {
2727
@include sass-utils.current-selector-or-root() {
2828
@include token-utils.create-token-values-mixed(
29-
tokens-mat-autocomplete.$prefix,
30-
tokens-mat-autocomplete.get-color-tokens($theme)
29+
m2-autocomplete.$prefix,
30+
m2-autocomplete.get-color-tokens($theme)
3131
);
3232
}
3333
}
@@ -39,8 +39,8 @@
3939
} @else {
4040
@include sass-utils.current-selector-or-root() {
4141
@include token-utils.create-token-values-mixed(
42-
tokens-mat-autocomplete.$prefix,
43-
tokens-mat-autocomplete.get-typography-tokens($theme)
42+
m2-autocomplete.$prefix,
43+
m2-autocomplete.get-typography-tokens($theme)
4444
);
4545
}
4646
}
@@ -52,8 +52,8 @@
5252
} @else {
5353
@include sass-utils.current-selector-or-root() {
5454
@include token-utils.create-token-values-mixed(
55-
tokens-mat-autocomplete.$prefix,
56-
tokens-mat-autocomplete.get-density-tokens($theme)
55+
m2-autocomplete.$prefix,
56+
m2-autocomplete.get-density-tokens($theme)
5757
);
5858
}
5959
}
@@ -63,8 +63,8 @@
6363
@function _define-overrides() {
6464
@return (
6565
(
66-
namespace: tokens-mat-autocomplete.$prefix,
67-
tokens: tokens-mat-autocomplete.get-token-slots(),
66+
namespace: m2-autocomplete.$prefix,
67+
tokens: m2-autocomplete.get-token-slots(),
6868
),
6969
);
7070
}
@@ -98,8 +98,8 @@
9898
);
9999
@if ($tokens != ()) {
100100
@include token-utils.create-token-values(
101-
tokens-mat-autocomplete.$prefix,
102-
map.get($tokens, tokens-mat-autocomplete.$prefix)
101+
m2-autocomplete.$prefix,
102+
map.get($tokens, m2-autocomplete.$prefix)
103103
);
104104
}
105105
}

‎core/tokens/m2/mat/_autocomplete.scss renamed to ‎autocomplete/_m2-autocomplete.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use '../../token-definition';
2-
@use '../../../theming/inspection';
3-
@use '../../../style/elevation';
4-
@use '../../../style/sass-utils';
1+
@use '../core/tokens/m2-utils';
2+
@use '../core/theming/inspection';
3+
@use '../core/style/elevation';
4+
@use '../core/style/sass-utils';
55

66
// The prefix used to generate the fully qualified name for tokens in this file.
77
$prefix: (mat, autocomplete);
@@ -37,8 +37,8 @@ $prefix: (mat, autocomplete);
3737
@function get-token-slots() {
3838
@return sass-utils.deep-merge-all(
3939
get-unthemable-tokens(),
40-
get-color-tokens(token-definition.$placeholder-color-config),
41-
get-typography-tokens(token-definition.$placeholder-typography-config),
42-
get-density-tokens(token-definition.$placeholder-density-config)
40+
get-color-tokens(m2-utils.$placeholder-color-config),
41+
get-typography-tokens(m2-utils.$placeholder-typography-config),
42+
get-density-tokens(m2-utils.$placeholder-density-config)
4343
);
4444
}

‎core/tokens/m3/mat/_autocomplete.scss renamed to ‎autocomplete/_m3-autocomplete.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use 'sass:map';
2-
@use '../../../style/elevation';
3-
@use '../../token-definition';
2+
@use '../core/style/elevation';
3+
@use '../core/tokens/m3-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
66
$prefix: (mat, autocomplete);
@@ -15,7 +15,7 @@ $prefix: (mat, autocomplete);
1515
background-color: map.get($systems, md-sys-color, surface-container),
1616
container-shape: map.get($systems, md-sys-shape, corner-extra-small),
1717
container-elevation-shadow:
18-
token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
18+
m3-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
1919
);
20-
@return token-definition.namespace-tokens($prefix, $tokens, $token-slots);
20+
@return m3-utils.namespace($prefix, $tokens, $token-slots);
2121
}

‎badge/_badge-theme.scss

+15-15
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@use '../core/theming/inspection';
44
@use '../core/theming/validation';
55
@use '../core/typography/typography';
6-
@use '../core/tokens/m2/mat/badge' as tokens-mat-badge;
6+
@use './m2-badge';
77
@use '../core/tokens/token-utils';
88
@use '../core/style/sass-utils';
99

@@ -16,8 +16,8 @@
1616
} @else {
1717
@include sass-utils.current-selector-or-root() {
1818
@include token-utils.create-token-values-mixed(
19-
tokens-mat-badge.$prefix,
20-
tokens-mat-badge.get-unthemable-tokens()
19+
m2-badge.$prefix,
20+
m2-badge.get-unthemable-tokens()
2121
);
2222
}
2323
}
@@ -34,22 +34,22 @@
3434
} @else {
3535
@include sass-utils.current-selector-or-root() {
3636
@include token-utils.create-token-values-mixed(
37-
tokens-mat-badge.$prefix,
38-
tokens-mat-badge.get-color-tokens($theme)
37+
m2-badge.$prefix,
38+
m2-badge.get-color-tokens($theme)
3939
);
4040
}
4141

4242
.mat-badge-accent {
4343
@include token-utils.create-token-values-mixed(
44-
tokens-mat-badge.$prefix,
45-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
44+
m2-badge.$prefix,
45+
m2-badge.private-get-color-palette-color-tokens($theme, accent)
4646
);
4747
}
4848

4949
.mat-badge-warn {
5050
@include token-utils.create-token-values-mixed(
51-
tokens-mat-badge.$prefix,
52-
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
51+
m2-badge.$prefix,
52+
m2-badge.private-get-color-palette-color-tokens($theme, warn)
5353
);
5454
}
5555
}
@@ -63,8 +63,8 @@
6363
} @else {
6464
@include sass-utils.current-selector-or-root() {
6565
@include token-utils.create-token-values-mixed(
66-
tokens-mat-badge.$prefix,
67-
tokens-mat-badge.get-typography-tokens($theme)
66+
m2-badge.$prefix,
67+
m2-badge.get-typography-tokens($theme)
6868
);
6969
}
7070
}
@@ -83,8 +83,8 @@
8383
@function _define-overrides() {
8484
@return (
8585
(
86-
namespace: tokens-mat-badge.$prefix,
87-
tokens: tokens-mat-badge.get-token-slots(),
86+
namespace: m2-badge.$prefix,
87+
tokens: m2-badge.get-token-slots(),
8888
),
8989
);
9090
}
@@ -123,6 +123,6 @@
123123
@include validation.selector-defined(
124124
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
125125
);
126-
$mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
127-
@include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
126+
$mat-badge-tokens: token-utils.get-tokens-for($tokens, m2-badge.$prefix, $options...);
127+
@include token-utils.create-token-values(m2-badge.$prefix, $mat-badge-tokens);
128128
}

‎core/tokens/m2/mat/_badge.scss renamed to ‎badge/_m2-badge.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
@use 'sass:map';
33
@use 'sass:math';
44
@use 'sass:color';
5-
@use '../../token-definition';
6-
@use '../../../theming/inspection';
7-
@use '../../../style/sass-utils';
5+
@use '../core/tokens/m2-utils';
6+
@use '../core/theming/inspection';
7+
@use '../core/style/sass-utils';
88

99
$_default-size: 22px;
1010
$_small-size: $_default-size - 6px;
@@ -103,8 +103,8 @@ $prefix: (mat, badge);
103103
@function get-token-slots() {
104104
@return sass-utils.deep-merge-all(
105105
get-unthemable-tokens(),
106-
get-color-tokens(token-definition.$placeholder-color-config),
107-
get-typography-tokens(token-definition.$placeholder-typography-config),
108-
get-density-tokens(token-definition.$placeholder-density-config)
106+
get-color-tokens(m2-utils.$placeholder-color-config),
107+
get-typography-tokens(m2-utils.$placeholder-typography-config),
108+
get-density-tokens(m2-utils.$placeholder-density-config)
109109
);
110110
}

‎core/tokens/m3/mat/_badge.scss renamed to ‎badge/_m3-badge.scss

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use 'sass:map';
2-
@use '../../../style/sass-utils';
3-
@use '../../token-definition';
2+
@use '../core/style/sass-utils';
3+
@use '../core/tokens/m3-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
66
$prefix: (mat, badge);
@@ -21,29 +21,29 @@ $prefix: (mat, badge);
2121
text-font: map.get($systems, md-sys-typescale, label-small-font),
2222
text-size: map.get($systems, md-sys-typescale, label-small-size),
2323
text-weight: map.get($systems, md-sys-typescale, label-small-weight),
24-
small-size-text-size: token-definition.hardcode(0, $exclude-hardcoded),
24+
small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
2525
container-shape: map.get($systems, md-sys-shape, corner-full),
26-
container-size: token-definition.hardcode(16px, $exclude-hardcoded),
27-
line-height: token-definition.hardcode(16px, $exclude-hardcoded),
28-
legacy-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
29-
legacy-small-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
30-
small-size-container-size: token-definition.hardcode(6px, $exclude-hardcoded),
31-
small-size-line-height: token-definition.hardcode(6px, $exclude-hardcoded),
32-
container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
33-
small-size-container-padding: token-definition.hardcode(0, $exclude-hardcoded),
34-
container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
35-
small-size-container-offset: token-definition.hardcode(-6px 0, $exclude-hardcoded),
36-
container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
37-
small-size-container-overlap-offset: token-definition.hardcode(-6px, $exclude-hardcoded),
26+
container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
27+
line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
28+
legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
29+
legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
30+
small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
31+
small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
32+
container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
33+
small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
34+
container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
35+
small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
36+
container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
37+
small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
3838

3939
// This size isn't in the M3 spec so we emit the same values as for `medium`.
40-
large-size-container-size: token-definition.hardcode(16px, $exclude-hardcoded),
41-
large-size-line-height: token-definition.hardcode(16px, $exclude-hardcoded),
42-
large-size-container-offset: token-definition.hardcode(-12px 0, $exclude-hardcoded),
43-
large-size-container-overlap-offset: token-definition.hardcode(-12px, $exclude-hardcoded),
40+
large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
41+
large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
42+
large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
43+
large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
4444
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
45-
large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded),
46-
legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded),
45+
large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
46+
legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
4747
);
4848

4949
$variant-tokens: (
@@ -77,5 +77,5 @@ $prefix: (mat, badge);
7777
error: () // Default, no overrides needed
7878
);
7979

80-
@return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
80+
@return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
8181
}

‎bottom-sheet/_bottom-sheet-theme.scss

+11-11
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
@use '../core/theming/validation';
66
@use '../core/style/sass-utils';
77
@use '../core/tokens/token-utils';
8-
@use '../core/tokens/m2/mat/bottom-sheet' as tokens-mat-bottom-sheet;
8+
@use './m2-bottom-sheet';
99

1010
@mixin base($theme) {
1111
@if inspection.get-theme-version($theme) == 1 {
1212
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1313
} @else {
1414
@include sass-utils.current-selector-or-root() {
1515
@include token-utils.create-token-values-mixed(
16-
tokens-mat-bottom-sheet.$prefix,
17-
tokens-mat-bottom-sheet.get-unthemable-tokens()
16+
m2-bottom-sheet.$prefix,
17+
m2-bottom-sheet.get-unthemable-tokens()
1818
);
1919
}
2020
}
@@ -26,8 +26,8 @@
2626
} @else {
2727
@include sass-utils.current-selector-or-root() {
2828
@include token-utils.create-token-values-mixed(
29-
tokens-mat-bottom-sheet.$prefix,
30-
tokens-mat-bottom-sheet.get-color-tokens($theme)
29+
m2-bottom-sheet.$prefix,
30+
m2-bottom-sheet.get-color-tokens($theme)
3131
);
3232
}
3333
}
@@ -39,8 +39,8 @@
3939
} @else {
4040
@include sass-utils.current-selector-or-root() {
4141
@include token-utils.create-token-values-mixed(
42-
tokens-mat-bottom-sheet.$prefix,
43-
tokens-mat-bottom-sheet.get-typography-tokens($theme)
42+
m2-bottom-sheet.$prefix,
43+
m2-bottom-sheet.get-typography-tokens($theme)
4444
);
4545
}
4646
}
@@ -57,8 +57,8 @@
5757
@function _define-overrides() {
5858
@return (
5959
(
60-
namespace: tokens-mat-bottom-sheet.$prefix,
61-
tokens: tokens-mat-bottom-sheet.get-token-slots(),
60+
namespace: m2-bottom-sheet.$prefix,
61+
tokens: m2-bottom-sheet.get-token-slots(),
6262
),
6363
);
6464
}
@@ -92,8 +92,8 @@
9292
);
9393
@if ($tokens != ()) {
9494
@include token-utils.create-token-values(
95-
tokens-mat-bottom-sheet.$prefix,
96-
map.get($tokens, tokens-mat-bottom-sheet.$prefix)
95+
m2-bottom-sheet.$prefix,
96+
map.get($tokens, m2-bottom-sheet.$prefix)
9797
);
9898
}
9999
}

‎core/tokens/m2/mat/_bottom-sheet.scss renamed to ‎bottom-sheet/_m2-bottom-sheet.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use '../../token-definition';
2-
@use '../../../theming/inspection';
3-
@use '../../../style/sass-utils';
1+
@use '../core/tokens/m2-utils';
2+
@use '../core/theming/inspection';
3+
@use '../core/style/sass-utils';
44

55
// The prefix used to generate the fully qualified name for tokens in this file.
66
$prefix: (mat, bottom-sheet);
@@ -43,8 +43,8 @@ $prefix: (mat, bottom-sheet);
4343
@function get-token-slots() {
4444
@return sass-utils.deep-merge-all(
4545
get-unthemable-tokens(),
46-
get-color-tokens(token-definition.$placeholder-color-config),
47-
get-typography-tokens(token-definition.$placeholder-typography-config),
48-
get-density-tokens(token-definition.$placeholder-density-config)
46+
get-color-tokens(m2-utils.$placeholder-color-config),
47+
get-typography-tokens(m2-utils.$placeholder-typography-config),
48+
get-density-tokens(m2-utils.$placeholder-density-config)
4949
);
5050
}

0 commit comments

Comments
 (0)