Skip to content

Commit 115abee

Browse files
andrewseguinandrewseguin
authored
refactor: create an m2 system directory (#31322)
* refactor: create an m2 system directory * refactor: remove unused typography var
1 parent d8cd74f commit 115abee

File tree

10 files changed

+369
-37
lines changed

10 files changed

+369
-37
lines changed

‎src/material/core/m2/BUILD.bazel

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,32 @@ sass_library(
66
name = "m2_sass",
77
srcs = [
88
"_index.scss",
9+
],
10+
deps = [
11+
":palette",
12+
":theming",
13+
],
14+
)
15+
16+
sass_library(
17+
name = "theming",
18+
srcs = [
19+
"_theming.scss",
20+
"_typography.scss",
21+
"_typography-utils.scss",
22+
],
23+
deps = [
24+
"//src/material/core/theming",
25+
"//src/material/core/tokens/m2",
26+
],
27+
)
28+
29+
sass_library(
30+
name = "palette",
31+
srcs = [
932
"_palette.scss",
1033
"_theming.scss",
1134
"_typography.scss",
1235
"_typography-utils.scss",
1336
],
14-
deps = ["//src/material/core/theming"],
1537
)

‎src/material/core/m2/_theming.scss

Lines changed: 12 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@use 'sass:meta';
44
@use 'sass:color';
55
@use '../theming/theming';
6+
@use '../tokens/m2';
67
@use './palette';
78

89
/// Extracts a color from a palette or throws an error if it doesn't exist.
@@ -114,44 +115,19 @@
114115
}
115116

116117
@function _define-system($primary, $accent, $warn, $is-dark) {
117-
$system: (
118-
primary: map.get($primary, default),
119-
on-primary: map.get($primary, default-contrast),
120-
secondary: map.get($accent, default),
121-
on-secondary: map.get($accent, default-contrast),
122-
error: map.get($warn, default),
123-
on-error: map.get($warn, default-contrast),
124-
shadow: black,
125-
hover-state-layer-opacity: 0.04,
126-
focus-state-layer-opacity: 0.12,
127-
pressed-state-layer-opacity: 0.12,
118+
$palettes: (
119+
primary: $primary,
120+
accent: $accent,
121+
warn: $warn,
128122
);
129123

130-
@if $is-dark {
131-
@return map.merge($system, (
132-
surface: map.get(palette.$grey-palette, 800),
133-
surface-variant: #4a4a4a,
134-
on-surface: white,
135-
on-surface-variant: rgba(white, 0.7),
136-
background: #303030,
137-
inverse-surface: white,
138-
inverse-on-surface: rgba(black, 0.87),
139-
outline: rgba(white, 0.12),
140-
outline-variant: rgba(white, 0.38),
141-
));
142-
} @else {
143-
@return map.merge($system, (
144-
surface: white,
145-
surface-variant: #f6f6f6,
146-
on-surface: rgba(black, 0.87),
147-
on-surface-variant: rgba(black, 0.54),
148-
background: map.get(palette.$grey-palette, 50),
149-
inverse-surface: map.get(palette.$grey-palette, 800),
150-
inverse-on-surface: white,
151-
outline: rgba(black, 0.12),
152-
outline-variant: rgba(black, 0.38),
153-
));
154-
}
124+
$color: if(
125+
$is-dark,
126+
m2.md-sys-color-values-dark($palettes),
127+
m2.md-sys-color-values-light($palettes));
128+
$state: m2.md-sys-state-values();
129+
130+
@return map.merge($color, $state);
155131
}
156132

157133
// Creates a color configuration from the specified

‎src/material/core/tokens/m2/BUILD.bazel

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
load("//tools:defaults.bzl", "sass_library")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
sass_library(
6+
name = "m2",
7+
srcs = [
8+
"_index.scss",
9+
"_md-sys-color.scss",
10+
"_md-sys-elevation.scss",
11+
"_md-sys-motion.scss",
12+
"_md-sys-shape.scss",
13+
"_md-sys-state.scss",
14+
"_md-sys-typescale.scss",
15+
],
16+
deps = [
17+
"//src/material/core/m2:palette",
18+
],
19+
)

‎src/material/core/tokens/m2/_index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@forward './md-sys-color';
2+
@forward './md-sys-elevation';
3+
@forward './md-sys-motion';
4+
@forward './md-sys-shape';
5+
@forward './md-sys-state';
6+
@forward './md-sys-typescale';

‎src/material/core/tokens/m2/_md-sys-color.scss

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
//
2+
// Design system display name: Material 3
3+
// Design system version: v0.161
4+
//
5+
6+
@use 'sass:map';
7+
@use '../../m2/palette';
8+
9+
@function md-sys-color-values-dark($palettes) {
10+
@return (
11+
primary: map.get($palettes, primary, default),
12+
on-primary: map.get($palettes, primary, default-contrast),
13+
secondary: map.get($palettes, accent, default),
14+
on-secondary: map.get($palettes, accent, default-contrast),
15+
error: map.get($palettes, warn, default),
16+
on-error: map.get($palettes, warn, default-contrast),
17+
shadow: black,
18+
surface: map.get(palette.$grey-palette, 800),
19+
on-surface: white,
20+
surface-variant: #4a4a4a,
21+
on-surface-variant: rgba(white, 0.7),
22+
background: #303030,
23+
inverse-surface: white,
24+
inverse-on-surface: rgba(black, 0.87),
25+
outline: rgba(white, 0.12),
26+
outline-variant: rgba(white, 0.38),
27+
28+
// TBD
29+
error-container: null,
30+
inverse-primary: null,
31+
on-background: null,
32+
on-error-container: null,
33+
on-primary-container: null,
34+
on-primary-fixed: null,
35+
on-primary-fixed-variant: null,
36+
on-secondary-container: null,
37+
on-secondary-fixed: null,
38+
on-secondary-fixed-variant: null,
39+
on-tertiary: null,
40+
on-tertiary-container: null,
41+
on-tertiary-fixed: null,
42+
on-tertiary-fixed-variant: null,
43+
primary-container: null,
44+
primary-fixed: null,
45+
primary-fixed-dim: null,
46+
scrim: null,
47+
secondary-container: null,
48+
secondary-fixed: null,
49+
secondary-fixed-dim: null,
50+
surface-bright: null,
51+
surface-container: null,
52+
surface-container-high: null,
53+
surface-container-highest: null,
54+
surface-container-low: null,
55+
surface-container-lowest: null,
56+
surface-dim: null,
57+
surface-tint: null,
58+
tertiary: null,
59+
tertiary-container: null,
60+
tertiary-fixed: null,
61+
tertiary-fixed-dim: null,
62+
);
63+
}
64+
65+
@function md-sys-color-values-light($palettes) {
66+
@return (
67+
primary: map.get($palettes, primary, default),
68+
on-primary: map.get($palettes, primary, default-contrast),
69+
secondary: map.get($palettes, accent, default),
70+
on-secondary: map.get($palettes, accent, default-contrast),
71+
error: map.get($palettes, warn, default),
72+
on-error: map.get($palettes, warn, default-contrast),
73+
shadow: black,
74+
surface: white,
75+
on-surface: rgba(black, 0.87),
76+
surface-variant: #f6f6f6,
77+
on-surface-variant: rgba(black, 0.54),
78+
background: map.get(palette.$grey-palette, 50),
79+
inverse-surface: map.get(palette.$grey-palette, 800),
80+
inverse-on-surface: white,
81+
outline: rgba(black, 0.12),
82+
outline-variant: rgba(black, 0.38),
83+
84+
// TBD
85+
error-container: null,
86+
inverse-primary: null,
87+
on-background: null,
88+
on-error-container: null,
89+
on-primary-container: null,
90+
on-primary-fixed: null,
91+
on-primary-fixed-variant: null,
92+
on-secondary-container: null,
93+
on-secondary-fixed: null,
94+
on-secondary-fixed-variant: null,
95+
on-tertiary: null,
96+
on-tertiary-container: null,
97+
on-tertiary-fixed: null,
98+
on-tertiary-fixed-variant: null,
99+
primary-container: null,
100+
primary-fixed: null,
101+
primary-fixed-dim: null,
102+
scrim: null,
103+
secondary-container: null,
104+
secondary-fixed: null,
105+
secondary-fixed-dim: null,
106+
surface-bright: null,
107+
surface-container: null,
108+
surface-container-high: null,
109+
surface-container-highest: null,
110+
surface-container-low: null,
111+
surface-container-lowest: null,
112+
surface-dim: null,
113+
surface-tint: null,
114+
tertiary: null,
115+
tertiary-container: null,
116+
tertiary-fixed: null,
117+
tertiary-fixed-dim: null,
118+
);
119+
}

‎src/material/core/tokens/m2/_md-sys-elevation.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
//
2+
// Design system display name: Material 3
3+
// Design system version: v0.161
4+
//
5+
6+
@function md-sys-elevation-values() {
7+
@return (
8+
// TBD
9+
level0: null,
10+
level1: null,
11+
level2: null,
12+
level3: null,
13+
level4: null,
14+
level5: null,
15+
);
16+
}

‎src/material/core/tokens/m2/_md-sys-motion.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
//
2+
// Design system display name: Material 3
3+
// Design system version: v0.161
4+
//
5+
6+
@function md-sys-motion-values() {
7+
@return (
8+
// TBD
9+
duration-extra-long1: null,
10+
duration-extra-long2: null,
11+
duration-extra-long3: null,
12+
duration-extra-long4: null,
13+
duration-long1: null,
14+
duration-long2: null,
15+
duration-long3: null,
16+
duration-long4: null,
17+
duration-medium1: null,
18+
duration-medium2: null,
19+
duration-medium3: null,
20+
duration-medium4: null,
21+
duration-short1: null,
22+
duration-short2: null,
23+
duration-short3: null,
24+
duration-short4: null,
25+
easing-emphasized: null,
26+
easing-emphasized-accelerate: null,
27+
easing-emphasized-decelerate: null,
28+
easing-legacy: null,
29+
easing-legacy-accelerate: null,
30+
easing-legacy-decelerate: null,
31+
easing-linear: null,
32+
easing-standard: null,
33+
easing-standard-accelerate: null,
34+
easing-standard-decelerate: null,
35+
);
36+
}

‎src/material/core/tokens/m2/_md-sys-shape.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
//
2+
// Design system display name: Material 3
3+
// Design system version: v0.161
4+
//
5+
6+
@function md-sys-shape-values() {
7+
@return (
8+
// TBD
9+
corner-extra-large: null,
10+
corner-extra-large-top: null,
11+
corner-extra-small: null,
12+
corner-extra-small-top: null,
13+
corner-full: null,
14+
corner-large: null,
15+
corner-large-end: null,
16+
corner-large-start: null,
17+
corner-large-top: null,
18+
corner-medium: null,
19+
corner-none: null,
20+
corner-small: null,
21+
);
22+
}

‎src/material/core/tokens/m2/_md-sys-state.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//
2+
// Design system display name: Material 3
3+
// Design system version: v0.161
4+
//
5+
6+
@function md-sys-state-values($exclude-hardcoded-values: false) {
7+
@return (
8+
focus-state-layer-opacity: 0.12,
9+
hover-state-layer-opacity: 0.04,
10+
pressed-state-layer-opacity: 0.12,
11+
12+
// TBD
13+
dragged-state-layer-opacity: 0.16,
14+
);
15+
}

0 commit comments

Comments
 (0)