Skip to content

Commit 965aadf

Browse files
andrewseguinandrewseguin
authored
refactor: move tokens to their component directories (#30765)
* refactor: move token files in their component directories * refactor: correct card prefix
1 parent c060e3f commit 965aadf

File tree

274 files changed

+4586
-4067
lines changed

Some content is hidden

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

274 files changed

+4586
-4067
lines changed

‎src/material/BUILD.bazel

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
load("@npm2//:defs.bzl", "npm_link_all_packages")
12
load(
23
"//src/material:config.bzl",
34
"MATERIAL_ENTRYPOINTS",
@@ -7,7 +8,6 @@ load(
78
load("//tools:defaults.bzl", "ng_package", "sass_library")
89
load("//tools:defaults2.bzl", "ts_project")
910
load("//tools/bazel:legacy_target.bzl", "get_legacy_label")
10-
load("@npm2//:defs.bzl", "npm_link_all_packages")
1111

1212
package(default_visibility = ["//visibility:public"])
1313

@@ -68,7 +68,6 @@ sass_library(
6868
"//src/material/core/theming:_palettes",
6969
"//src/material/core/theming:core_all_theme",
7070
"//src/material/core/tokens:m3_system",
71-
"//src/material/core/tokens/m2",
7271
"//src/material/core/typography",
7372
"//src/material/core/typography:all_typography",
7473
"//src/material/core/typography:utils",
@@ -144,7 +143,6 @@ ng_package(
144143
"//src/material/core/theming:_palettes",
145144
"//src/material/core/theming:core_all_theme",
146145
"//src/material/core/tokens:m3_system",
147-
"//src/material/core/tokens/m2",
148146
"//src/material/core/typography",
149147
"//src/material/core/typography:all_typography",
150148
"//src/material/core/typography:utils",

‎src/material/_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;

‎src/material/autocomplete/BUILD.bazel

+26-2
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project")
1010

1111
package(default_visibility = ["//visibility:public"])
1212

13+
sass_library(
14+
name = "m3",
15+
srcs = [
16+
"_m3-autocomplete.scss",
17+
],
18+
deps = [
19+
"//src/material/core/style:sass_utils",
20+
"//src/material/core/tokens:m3_utils",
21+
],
22+
)
23+
24+
sass_library(
25+
name = "m2",
26+
srcs = [
27+
"_m2-autocomplete.scss",
28+
],
29+
deps = [
30+
"//src/material/core/style:elevation",
31+
"//src/material/core/style:sass_utils",
32+
"//src/material/core/theming:_inspection",
33+
"//src/material/core/tokens:m2_utils",
34+
],
35+
)
36+
1337
sass_library(
1438
name = "theme",
1539
srcs = [
1640
"_autocomplete-theme.scss",
1741
],
1842
deps = [
43+
":m2",
1944
"//src/material/core/style:sass_utils",
2045
"//src/material/core/theming",
2146
"//src/material/core/theming:_inspection",
2247
"//src/material/core/theming:_validation",
2348
"//src/material/core/tokens:token_utils",
24-
"//src/material/core/tokens/m2/mat",
2549
"//src/material/core/typography",
2650
],
2751
)
@@ -30,9 +54,9 @@ sass_binary(
3054
name = "css",
3155
src = "autocomplete.scss",
3256
deps = [
57+
":m2",
3358
"//src/cdk:sass_lib",
3459
"//src/material/core/tokens:token_utils",
35-
"//src/material/core/tokens/m2/mat",
3660
],
3761
)
3862

‎src/material/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
}

‎src/material/core/tokens/m2/mat/_autocomplete.scss renamed to ‎src/material/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
}

‎src/material/core/tokens/m3/mat/_autocomplete.scss renamed to ‎src/material/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
}

‎src/material/autocomplete/autocomplete-trigger.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -625,12 +625,13 @@ export class MatAutocompleteTrigger
625625
{injector: this._environmentInjector},
626626
);
627627
});
628-
const optionChanges = this.autocomplete.options?.changes.pipe(
629-
tap(() => this._positionStrategy.reapplyLastPosition()),
630-
// Defer emitting to the stream until the next tick, because changing
631-
// bindings in here will cause "changed after checked" errors.
632-
delay(0),
633-
) ?? observableOf();
628+
const optionChanges =
629+
this.autocomplete.options?.changes.pipe(
630+
tap(() => this._positionStrategy.reapplyLastPosition()),
631+
// Defer emitting to the stream until the next tick, because changing
632+
// bindings in here will cause "changed after checked" errors.
633+
delay(0),
634+
) ?? observableOf();
634635

635636
// When the options are initially rendered, and when the option list changes...
636637
return (

‎src/material/autocomplete/autocomplete.scss

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@use '@angular/cdk';
2+
@use './m2-autocomplete';
23
@use '../core/tokens/token-utils';
3-
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;
4+
5+
$token-prefix: m2-autocomplete.$prefix;
6+
$token-slots: m2-autocomplete.get-token-slots();
47

58
// Even though we don't use the MDC styles, we need to keep the classes in the
69
// DOM for the Gmat versions to work. We need to bump up the specificity here
@@ -17,11 +20,10 @@ div.mat-mdc-autocomplete-panel {
1720
// Workaround in case other MDC menu surface styles bleed in.
1821
position: static;
1922

20-
@include token-utils.use-tokens(
21-
tokens-mat-autocomplete.$prefix, tokens-mat-autocomplete.get-token-slots()) {
22-
@include token-utils.create-token-slot(border-radius, container-shape);
23-
@include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
24-
@include token-utils.create-token-slot(background-color, background-color);
23+
@include token-utils.use-tokens($token-prefix, $token-slots) {
24+
border-radius: token-utils.slot(container-shape);
25+
box-shadow: token-utils.slot(container-elevation-shadow);
26+
background-color: token-utils.slot(background-color);
2527
}
2628

2729
@include cdk.high-contrast {

‎src/material/badge/BUILD.bazel

+26-2
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,42 @@ load("//tools:defaults2.bzl", "ng_project", "ts_project")
1010

1111
package(default_visibility = ["//visibility:public"])
1212

13+
sass_library(
14+
name = "m3",
15+
srcs = [
16+
"_m3-badge.scss",
17+
],
18+
deps = [
19+
"//src/material/core/style:sass_utils",
20+
"//src/material/core/tokens:m3_utils",
21+
],
22+
)
23+
24+
sass_library(
25+
name = "m2",
26+
srcs = [
27+
"_m2-badge.scss",
28+
],
29+
deps = [
30+
"//src/material/core/style:elevation",
31+
"//src/material/core/style:sass_utils",
32+
"//src/material/core/theming:_inspection",
33+
"//src/material/core/tokens:m2_utils",
34+
],
35+
)
36+
1337
sass_library(
1438
name = "theme",
1539
srcs = [
1640
"_badge-theme.scss",
1741
],
1842
deps = [
43+
":m2",
1944
"//src/material/core/style:sass_utils",
2045
"//src/material/core/theming",
2146
"//src/material/core/theming:_inspection",
2247
"//src/material/core/theming:_validation",
2348
"//src/material/core/tokens:token_utils",
24-
"//src/material/core/tokens/m2/mat",
2549
"//src/material/core/typography",
2650
],
2751
)
@@ -30,9 +54,9 @@ sass_binary(
3054
name = "badge_css",
3155
src = "badge.scss",
3256
deps = [
57+
":m2",
3358
"//src/cdk:sass_lib",
3459
"//src/material/core/tokens:token_utils",
35-
"//src/material/core/tokens/m2/mat",
3660
],
3761
)
3862

‎src/material/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
}

0 commit comments

Comments
 (0)