Skip to content

Commit 839aa3e

Browse files
andrewseguinandrewseguin
authored
fix(material/core): fix m2 system color values (#31632)
1 parent d06d969 commit 839aa3e

File tree

8 files changed

+217
-20
lines changed

8 files changed

+217
-20
lines changed

‎src/dev-app/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ ng_project(
8383
"//src/dev-app/slider",
8484
"//src/dev-app/snack-bar",
8585
"//src/dev-app/stepper",
86+
"//src/dev-app/system",
8687
"//src/dev-app/table",
8788
"//src/dev-app/table-scroll-container",
8889
"//src/dev-app/tabs",

‎src/dev-app/dev-app/dev-app-layout.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export class DevAppLayout {
111111
{name: 'Slider', route: '/slider'},
112112
{name: 'Snack Bar', route: '/snack-bar'},
113113
{name: 'Stepper', route: '/stepper'},
114+
{name: 'System', route: '/system'},
114115
{name: 'Table Scroll Container', route: '/table-scroll-container'},
115116
{name: 'Table', route: '/table'},
116117
{name: 'Tabs', route: '/tabs'},

‎src/dev-app/routes.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,10 @@ export const DEV_APP_ROUTES: Routes = [
235235
path: 'stepper',
236236
loadComponent: () => import('./stepper/stepper-demo').then(m => m.StepperDemo),
237237
},
238+
{
239+
path: 'system',
240+
loadComponent: () => import('./system/system-demo').then(m => m.SystemDemo),
241+
},
238242
{
239243
path: 'table',
240244
loadComponent: () => import('./table/table-demo').then(m => m.TableDemo),

‎src/dev-app/system/BUILD.bazel‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
load("//tools:defaults.bzl", "ng_project", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_project(
6+
name = "system",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"system-demo.html",
10+
"system_demo_scss",
11+
],
12+
deps = [
13+
"//:node_modules/@angular/common",
14+
"//:node_modules/@angular/core",
15+
"//src/material/card",
16+
],
17+
)
18+
19+
sass_binary(
20+
name = "system_demo_scss",
21+
src = "system-demo.scss",
22+
)

‎src/dev-app/system/system-demo.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@for (group of colorGroups; track $index) {
2+
<h2>{{group.name}}</h2>
3+
4+
@for (role of group.roles; track $index) {
5+
@let titleColorRole = role.titleColorRole || role.foregroundColors[0];
6+
<mat-card>
7+
@for (backgroundColor of role.backgroundColors; track $index) {
8+
<div class="example-background" style.backgroundColor="var(--mat-sys-{{backgroundColor}})">
9+
<div class="example-foreground example-role-title" style.color="var(--mat-sys-{{titleColorRole}})">
10+
{{backgroundColor}}
11+
</div>
12+
@for (foregroundColor of role.foregroundColors; track $index) {
13+
<div class="example-foreground" style.color="var(--mat-sys-{{foregroundColor}})">
14+
{{foregroundColor}}
15+
</div>
16+
}
17+
</div>
18+
}
19+
</mat-card>
20+
}
21+
}

‎src/dev-app/system/system-demo.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
mat-card {
2+
font: var(--mat-sys-body-medium);
3+
display: inline-flex;
4+
flex-direction: column;
5+
margin: 1rem;
6+
overflow: hidden;
7+
min-height: 16rem;
8+
}
9+
10+
.example-background {
11+
width: 16rem;
12+
flex-grow: 1;
13+
padding: 1rem 0.5rem 1rem 0;
14+
}
15+
16+
.example-foreground {
17+
padding-inline-start: 2rem;
18+
}
19+
20+
.example-role-title {
21+
font: var(--mat-sys-title-small);
22+
padding-inline-start: 1rem;
23+
margin-bottom: 1rem;
24+
}
25+
26+
section {
27+
margin-inline: 3rem;
28+
max-width: 75px;
29+
}

‎src/dev-app/system/system-demo.ts‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import {CommonModule} from '@angular/common';
2+
import {ChangeDetectionStrategy, Component} from '@angular/core';
3+
import {MatCardModule} from '@angular/material/card';
4+
5+
interface RoleCategory {
6+
/** Display name of a category for grouping related roles. */
7+
name: string;
8+
roles: ColorGroup[];
9+
}
10+
11+
interface ColorGroup {
12+
/** List of role names used for background colors in this group. */
13+
backgroundColors: string[];
14+
15+
/** List of role names used for foreground colors in this group. */
16+
foregroundColors: string[];
17+
18+
/**
19+
* Optional color role name to use for displaying titles. If not specified,
20+
* the first foreground color is used.
21+
*/
22+
titleColorRole?: string;
23+
}
24+
25+
/**
26+
* Demo showing color swatches for Material Color Roles in the default GM3 and
27+
* Angular Material color palettes.
28+
*/
29+
@Component({
30+
selector: 'system-demo',
31+
templateUrl: 'system-demo.html',
32+
styleUrls: ['system-demo.css'],
33+
imports: [CommonModule, MatCardModule],
34+
changeDetection: ChangeDetectionStrategy.OnPush,
35+
})
36+
export class SystemDemo {
37+
/**
38+
* Color roles grouped into categories for display. Each role group is
39+
* rendered into a card showing the background colors for that role, with text
40+
* labels written in the foreground colors for that role.
41+
*/
42+
protected readonly colorGroups: RoleCategory[] = [
43+
{
44+
name: 'Primary',
45+
roles: [
46+
{
47+
backgroundColors: ['primary'],
48+
foregroundColors: ['on-primary'],
49+
},
50+
{
51+
backgroundColors: ['primary-container'],
52+
foregroundColors: ['on-primary-container'],
53+
},
54+
{
55+
backgroundColors: ['primary-fixed', 'primary-fixed-dim'],
56+
foregroundColors: ['on-primary-fixed', 'on-primary-fixed-variant'],
57+
},
58+
],
59+
},
60+
{
61+
name: 'Secondary',
62+
roles: [
63+
{
64+
backgroundColors: ['secondary'],
65+
foregroundColors: ['on-secondary'],
66+
},
67+
{
68+
backgroundColors: ['secondary-container'],
69+
foregroundColors: ['on-secondary-container'],
70+
},
71+
{
72+
backgroundColors: ['secondary-fixed', 'secondary-fixed-dim'],
73+
foregroundColors: ['on-secondary-fixed', 'on-secondary-fixed-variant'],
74+
},
75+
],
76+
},
77+
{
78+
name: 'Surface',
79+
roles: [
80+
{
81+
backgroundColors: ['surface-bright', 'surface', 'surface-dim'],
82+
foregroundColors: ['on-surface', 'on-surface-variant'],
83+
},
84+
{
85+
backgroundColors: [
86+
'surface-container-lowest',
87+
'surface-container-low',
88+
'surface-container',
89+
'surface-container-high',
90+
'surface-container-highest',
91+
],
92+
foregroundColors: ['on-surface', 'on-surface-variant'],
93+
},
94+
{
95+
backgroundColors: ['inverse-surface'],
96+
foregroundColors: ['inverse-on-surface', 'inverse-primary'],
97+
},
98+
],
99+
},
100+
{
101+
name: 'Utility',
102+
roles: [
103+
{
104+
backgroundColors: ['error'],
105+
foregroundColors: ['on-error'],
106+
},
107+
{
108+
backgroundColors: ['error-container'],
109+
foregroundColors: ['on-error-container'],
110+
},
111+
{
112+
backgroundColors: ['outline', 'outline-variant', 'scrim', 'shadow'],
113+
foregroundColors: [],
114+
titleColorRole: 'on-primary',
115+
},
116+
],
117+
},
118+
];
119+
}

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@
2828
on-primary-container: map.get($palettes, primary, default-contrast),
2929
on-primary-fixed: map.get($palettes, primary, default-contrast),
3030
on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
31-
on-secondary-container: map.get($palettes, accent, default),
32-
on-secondary-fixed: map.get($palettes, accent, default),
33-
on-secondary-fixed-variant: map.get($palettes, accent, default),
31+
on-secondary-container: map.get($palettes, accent, default-contrast),
32+
on-secondary-fixed: map.get($palettes, accent, default-contrast),
33+
on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
3434
on-tertiary: map.get($palettes, accent, default-contrast),
3535
on-tertiary-container: map.get($palettes, accent, default-contrast),
3636
on-tertiary-fixed: map.get($palettes, accent, default-contrast),
@@ -39,9 +39,9 @@
3939
primary-fixed: map.get($palettes, primary, default),
4040
primary-fixed-dim: map.get($palettes, primary, default),
4141
scrim: black,
42-
secondary-container: map.get($palettes, accent, default-contrast),
43-
secondary-fixed: map.get($palettes, accent, default-contrast),
44-
secondary-fixed-dim: map.get($palettes, accent, default-contrast),
42+
secondary-container: map.get($palettes, accent, default),
43+
secondary-fixed: map.get($palettes, accent, default),
44+
secondary-fixed-dim: map.get($palettes, accent, default),
4545
surface-bright: map.get(palette.$grey-palette, 800),
4646
surface-container: map.get(palette.$grey-palette, 800),
4747
surface-container-high: map.get(palette.$grey-palette, 800),
@@ -84,9 +84,9 @@
8484
on-primary-container: map.get($palettes, primary, default-contrast),
8585
on-primary-fixed: map.get($palettes, primary, default-contrast),
8686
on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
87-
on-secondary-container: map.get($palettes, accent, default),
88-
on-secondary-fixed: map.get($palettes, accent, default),
89-
on-secondary-fixed-variant: map.get($palettes, accent, default),
87+
on-secondary-container: map.get($palettes, accent, default-contrast),
88+
on-secondary-fixed: map.get($palettes, accent, default-contrast),
89+
on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
9090
on-tertiary: map.get($palettes, accent, default-contrast),
9191
on-tertiary-container: map.get($palettes, accent, default-contrast),
9292
on-tertiary-fixed: map.get($palettes, accent, default-contrast),
@@ -95,17 +95,17 @@
9595
primary-fixed: map.get($palettes, primary, default),
9696
primary-fixed-dim: map.get($palettes, primary, default),
9797
scrim: black,
98-
secondary-container: map.get($palettes, accent, default-contrast),
99-
secondary-fixed: map.get($palettes, accent, default-contrast),
100-
secondary-fixed-dim: map.get($palettes, accent, default-contrast),
101-
surface-bright: map.get(palette.$grey-palette, 800),
102-
surface-container: map.get(palette.$grey-palette, 800),
103-
surface-container-high: map.get(palette.$grey-palette, 800),
104-
surface-container-highest: map.get(palette.$grey-palette, 800),
105-
surface-container-low: map.get(palette.$grey-palette, 800),
106-
surface-container-lowest: map.get(palette.$grey-palette, 800),
107-
surface-dim: map.get(palette.$grey-palette, 800),
108-
surface-tint: map.get(palette.$grey-palette, 800),
98+
secondary-container: map.get($palettes, accent, default),
99+
secondary-fixed: map.get($palettes, accent, default),
100+
secondary-fixed-dim: map.get($palettes, accent, default),
101+
surface-bright: white,
102+
surface-container: white,
103+
surface-container-high: white,
104+
surface-container-highest: white,
105+
surface-container-low: white,
106+
surface-container-lowest: white,
107+
surface-dim: white,
108+
surface-tint: white,
109109
tertiary: map.get($palettes, accent, default),
110110
tertiary-container: map.get($palettes, accent, default),
111111
tertiary-fixed: map.get($palettes, accent, default),

0 commit comments

Comments
 (0)