Skip to content

Commit 64ed7ca

Browse files
andrewseguinandrewseguin
authoredAug 26, 2024··
feat(material/core): add experimental theme demo (#29636)
·
20.0.0-next.519.0.0-next.2
1 parent ac324fb commit 64ed7ca

12 files changed

+683
-18
lines changed
 

‎.stylelintrc.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181

8282
"unit-case": "lower",
8383
"unit-no-unknown": true,
84-
"unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin"],
84+
"unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin", "fr"],
8585

8686
"value-list-comma-space-after": "always-single-line",
8787
"value-list-comma-space-before": "never",

‎src/dev-app/BUILD.bazel

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ ng_module(
7171
"//src/dev-app/table",
7272
"//src/dev-app/table-scroll-container",
7373
"//src/dev-app/tabs",
74+
"//src/dev-app/theme",
7475
"//src/dev-app/toolbar",
7576
"//src/dev-app/tooltip",
7677
"//src/dev-app/tree",

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

+11
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,17 @@ <h1>Angular Material Demos</h1>
9797
<mat-icon>dark_mode</mat-icon>
9898
}
9999
</button>
100+
<button
101+
mat-icon-button
102+
(click)="toggleSystemTheme()"
103+
[matTooltip]="state.systemTheme ? 'Switch to standard theme' : 'Switch to system theme'"
104+
>
105+
@if (state.systemTheme) {
106+
<mat-icon>public_off</mat-icon>
107+
} @else {
108+
<mat-icon>public</mat-icon>
109+
}
110+
</button>
100111
<button
101112
mat-icon-button
102113
(click)="toggleRippleDisabled()"

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

+8
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export class DevAppLayout {
110110
{name: 'Table Scroll Container', route: '/table-scroll-container'},
111111
{name: 'Table', route: '/table'},
112112
{name: 'Tabs', route: '/tabs'},
113+
{name: 'Theme', route: '/theme'},
113114
{name: 'Toolbar', route: '/toolbar'},
114115
{name: 'Tooltip', route: '/tooltip'},
115116
{name: 'Tree', route: '/tree'},
@@ -127,6 +128,7 @@ export class DevAppLayout {
127128

128129
constructor() {
129130
this.toggleTheme(this.state.darkTheme);
131+
this.toggleSystemTheme(this.state.systemTheme);
130132
this.toggleStrongFocus(this.state.strongFocusEnabled);
131133
this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
132134
this.toggleRippleDisabled(this.state.rippleDisabled);
@@ -141,6 +143,12 @@ export class DevAppLayout {
141143
setAppState(this.state);
142144
}
143145

146+
toggleSystemTheme(value = !this.state.systemTheme) {
147+
this.state.systemTheme = value;
148+
this._document.body.classList.toggle('demo-experimental-theme', value);
149+
setAppState(this.state);
150+
}
151+
144152
toggleFullscreen() {
145153
this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
146154
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface DevAppState {
1616
animations: boolean;
1717
zoneless: boolean;
1818
darkTheme: boolean;
19+
systemTheme: boolean;
1920
rippleDisabled: boolean;
2021
strongFocusEnabled: boolean;
2122
m3Enabled: boolean;
@@ -42,6 +43,7 @@ export function getAppState(): DevAppState {
4243
animations: true,
4344
zoneless: false,
4445
darkTheme: false,
46+
systemTheme: false,
4547
rippleDisabled: false,
4648
strongFocusEnabled: false,
4749
m3Enabled: false,

‎src/dev-app/routes.ts

+4
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,10 @@ export const DEV_APP_ROUTES: Routes = [
221221
path: 'tabs',
222222
loadComponent: () => import('./tabs/tabs-demo').then(m => m.TabsDemo),
223223
},
224+
{
225+
path: 'theme',
226+
loadComponent: () => import('./theme/theme-demo').then(m => m.ThemeDemo),
227+
},
224228
{
225229
path: 'toolbar',
226230
loadComponent: () => import('./toolbar/toolbar-demo').then(m => m.ToolbarDemo),

‎src/dev-app/theme-m3.scss

+52-17
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,16 @@
55
// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
66
mat.$theme-legacy-inspection-api-compatibility: false;
77

8+
$primary: mat.$azure-palette;
9+
$tertiary: mat.$blue-palette;
10+
811
// Create a theme with the specified color type and density.
912
@function create-theme($type: light, $density: 0) {
1013
@return mat.define-theme((
1114
color: (
1215
theme-type: $type,
13-
primary: mat.$azure-palette,
14-
tertiary: mat.$blue-palette,
16+
primary: $primary,
17+
tertiary: $tertiary,
1518
use-system-variables: true,
1619
),
1720
typography: (use-system-variables: true),
@@ -34,12 +37,26 @@ $dark-theme: create-theme($type: dark);
3437

3538
// Include the default theme styles.
3639
html {
37-
@include mat.all-component-themes($light-theme);
38-
@include mat.system-level-colors($light-theme);
39-
@include mat.system-level-typography($light-theme);
40-
// TODO(mmalerba): Support M3 for experimental components.
41-
// @include matx.column-resize-theme($light-theme);
42-
// @include matx.popover-edit-theme($light-theme);
40+
body:not(.demo-experimental-theme) {
41+
@include mat.all-component-themes($light-theme);
42+
@include mat.system-level-colors($light-theme);
43+
@include mat.system-level-typography($light-theme);
44+
// TODO(mmalerba): Support M3 for experimental components.
45+
// @include matx.column-resize-theme($light-theme);
46+
// @include matx.popover-edit-theme($light-theme);
47+
}
48+
49+
body.demo-experimental-theme {
50+
@include mat.private-experimental-theme((
51+
color: (
52+
theme-type: light,
53+
primary: $primary,
54+
tertiary: $tertiary,
55+
),
56+
typography: Roboto,
57+
density: 0,
58+
));
59+
}
4360
}
4461

4562
@include mat.typography-hierarchy($light-theme);
@@ -55,13 +72,25 @@ html {
5572
// CSS class whatever you want. In this example, any component inside of an element with
5673
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
5774
// default theme.
58-
.demo-unicorn-dark-theme {
59-
// Include the dark theme color styles.
60-
@include mat.all-component-colors($dark-theme);
61-
@include mat.system-level-colors($dark-theme);
62-
// TODO(mmalerba): Support M3 for experimental components.
63-
// @include matx.column-resize-color($dark-theme);
64-
// @include matx.popover-edit-color($dark-theme);
75+
body.demo-unicorn-dark-theme {
76+
&:not(.demo-experimental-theme) {
77+
// Include the dark theme color styles.
78+
@include mat.all-component-colors($dark-theme);
79+
@include mat.system-level-colors($dark-theme);
80+
// TODO(mmalerba): Support M3 for experimental components.
81+
// @include matx.column-resize-color($dark-theme);
82+
// @include matx.popover-edit-color($dark-theme);
83+
}
84+
85+
&.demo-experimental-theme {
86+
@include mat.private-experimental-theme((
87+
color: (
88+
theme-type: dark,
89+
primary: $primary,
90+
tertiary: $tertiary,
91+
),
92+
));
93+
}
6594

6695
// Include the dark theme colors for focus indicators.
6796
&.demo-strong-focus {
@@ -75,8 +104,14 @@ html {
75104
$density-scales: (-1, -2, -3, -4, minimum, maximum);
76105
@each $scale in $density-scales {
77106
.demo-density-#{$scale} {
78-
$density-theme: create-theme($density: $scale);
79-
@include mat.all-component-densities($density-theme);
107+
body:not(.demo-experimental-theme) & {
108+
$density-theme: create-theme($density: $scale);
109+
@include mat.all-component-densities($density-theme);
110+
}
111+
112+
body.demo-experimental-theme & {
113+
@include mat.private-experimental-theme((density: $scale));
114+
}
80115
}
81116
}
82117

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "theme",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"theme-demo.html",
10+
":theme_demo_scss",
11+
],
12+
deps = [
13+
"//src/dev-app/dev-app",
14+
"//src/material/card",
15+
"//src/material/expansion",
16+
"//src/material/icon",
17+
"@npm//@angular/forms",
18+
],
19+
)
20+
21+
sass_binary(
22+
name = "theme_demo_scss",
23+
src = "theme-demo.scss",
24+
deps = [
25+
"//src/material:sass_lib",
26+
],
27+
)

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

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
<p class="demo-warn">
2+
This page uses an experimental prototype version of a
3+
<span class="demo-surface-variable">material.theme</span> API.
4+
To enable it, click the <mat-icon>public</mat-icon> icon in the header.
5+
</p>
6+
7+
<p>
8+
Angular Material components depend on CSS variables defined by the
9+
<span class="demo-surface-variable">material.theme</span>
10+
Sass mixin. This page provides guidance and documentation for using these variables to
11+
customize components.
12+
</p>
13+
14+
<h1>Colors</h1>
15+
16+
<p>
17+
Material Design uses color to create accessible, personal color schemes
18+
that communicate your product's hierarchy, state, and brand. See Material
19+
Design's <a href="https://m3.material.io/styles/color/system/overview">Color System</a>
20+
page to learn more about its use and purpose.
21+
</p>
22+
<p>
23+
The following colors are the most often used in Angular Material components. Use these
24+
colors and follow their uses to add theme colors to your application's custom components.
25+
</p>
26+
<p>
27+
Note that variables starting with "mat-app-on-*" are designed to be used for text or icons
28+
placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-app-on-primary</span>
29+
is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-app-primary</span> color.
30+
</p>
31+
32+
<div class="demo-group">
33+
<div class="demo-color-container">
34+
<div class="demo-heading"
35+
[style.background-color]="'var(--mat-app-primary)'"
36+
[style.color]="'var(--mat-app-on-primary)'">
37+
<div class="demo-name"> Primary</div>
38+
<div class="demo-variable demo-code"> --mat-app-primary</div>
39+
</div>
40+
<div class="demo-description">
41+
<p>
42+
The most common color used by Angular Material components to
43+
participate in the application theme.
44+
</p>
45+
<p>
46+
Examples include the background color
47+
of filled buttons, the icon color of selected radio buttons, and the
48+
outline color of form fields.
49+
</p>
50+
<p>
51+
Use the color <span class="demo-surface-variable">--mat-app-on-primary</span> for
52+
icons, text, and other visual elements placed on a primary background. This
53+
color is calculated to be optimal for accessibility and legibility.
54+
</p>
55+
</div>
56+
</div>
57+
58+
<div class="demo-color-container">
59+
<div class="demo-heading"
60+
[style.background-color]="'var(--mat-app-surface)'"
61+
[style.color]="'var(--mat-app-on-surface)'">
62+
<div class="demo-name"> Surface</div>
63+
<div class="demo-variable code"> --mat-app-surface</div>
64+
</div>
65+
<div class="demo-description">
66+
<p>
67+
A low-emphasis background color that provides a clear contrast for
68+
both light and dark themes and their varied theme colors.
69+
</p>
70+
<p>
71+
Examples include the background color of the application and most
72+
components such as the dialog, card, table, and more.
73+
</p>
74+
<p>
75+
Use the color <span class="demo-surface-variable">--mat-app-on-surface</span> for
76+
icons, text, and other visual elements placed on a surface background. This
77+
color is calculated to be optimal for accessibility and legibility.
78+
</p>
79+
</div>
80+
</div>
81+
82+
<div class="demo-color-container">
83+
<div class="demo-heading"
84+
[style.background-color]="'var(--mat-app-error)'"
85+
[style.color]="'var(--mat-app-on-error)'">
86+
<div class="demo-name"> Error</div>
87+
<div class="demo-variable demo-code"> --mat-app-error</div>
88+
</div>
89+
<div class="demo-description">
90+
<p>
91+
High-contrast color meant to alert the user to attract immediate attention.
92+
</p>
93+
<p>
94+
Examples include the background color of the badge and the text color of invalid
95+
form fields inputs.
96+
</p>
97+
<p>
98+
Use the color <span class="demo-surface-variable">--mat-app-on-error</span> for
99+
icons, text, and other visual elements placed on an error background. This
100+
color is calculated to be optimal for accessibility and legibility.
101+
</p>
102+
</div>
103+
</div>
104+
105+
<div class="demo-color-container">
106+
<div class="demo-heading"
107+
[style.background-color]="'var(--mat-app-outline)'"
108+
[style.color]="'var(--mat-app-surface)'">
109+
<div class="demo-name"> Outline</div>
110+
<div class="demo-variable demo-code"> --mat-app-outline </div>
111+
</div>
112+
<div class="demo-description">
113+
<p>
114+
Used for borders and dividers to help provide visual separation between
115+
and around elements.
116+
</p>
117+
<p>
118+
Examples include the color of the divider and border color of an outlined
119+
form field.
120+
</p>
121+
<p>
122+
Use the color <span class="demo-surface-variable">--mat-app-outline-variant</span> for a less
123+
prominent outline.
124+
</p>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<mat-expansion-panel>
130+
<mat-expansion-panel-header>Other available colors</mat-expansion-panel-header>
131+
132+
<p>
133+
These colors are less commonly used in Angular Material components but
134+
are available for adding color variety and creating additional emphasis
135+
to components.
136+
</p>
137+
<p>
138+
Colors may be paired with a <span class="demo-surface-variable">--mat-app-on-</span> variable
139+
that should be used for text and icons placed within a filled container.
140+
</p>
141+
142+
<h2>Alternative Theme Colors</h2>
143+
144+
<theme-demo-colors [colors]="alternativeThemeColors"></theme-demo-colors>
145+
146+
<h2>Surface Colors</h2>
147+
148+
<p>
149+
The following colors should be used for backgrounds and large,
150+
low-emphasis areas of the screen.
151+
</p>
152+
153+
<p>
154+
Containers filled with a surface color should apply the
155+
<span class="demo-surface-variable">--mat-app-on-surface</span> color to text
156+
and icons placed within.
157+
</p>
158+
159+
<theme-demo-colors [colors]="surfaceColors"></theme-demo-colors>
160+
161+
<h2>Fixed Colors</h2>
162+
163+
<p>
164+
These colors are the same for both light and dark themes. They are unused
165+
by any Angular Material components.
166+
</p>
167+
168+
<theme-demo-colors [colors]="fixedColors"></theme-demo-colors>
169+
170+
</mat-expansion-panel>
171+
172+
<h1>Typography</h1>
173+
174+
<p>
175+
There are five categories of font types defined by Material Design: body, display, headline,
176+
label, and title. Each category has three sizes: small, medium, and large.
177+
</p>
178+
<p>
179+
Learn more about how these categories and their sizes should be used in your application by
180+
visiting Material Design's
181+
<a href="https://m3.material.io/styles/typography/overview">Typography</a> documentation.
182+
</p>
183+
184+
185+
@for (category of ['body', 'display', 'headline', 'label', 'title']; track $index) {
186+
<div class="demo-typography-group">
187+
<div class="demo-typography-title">{{category}}</div>
188+
@for (size of ['small', 'medium', 'large']; track $index) {
189+
<div class="demo-typography-example">
190+
<div class="demo-typography-variable">
191+
<div class="demo-surface-variable">--mat-app-{{category}}-{{size}}</div>
192+
</div>
193+
<div class="demo-typography-text" [style.font]="'var(--mat-app-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
194+
</div>
195+
}
196+
</div>
197+
}
198+
199+
<p>
200+
Each variable can be applied to the `font` CSS style. Additionally, the parts of the variable definition
201+
can be accessed individually by appending the keywords "font", "line-height", "size", "tracking", and "weight".
202+
</p>
203+
<p>
204+
For example, the values for medium body text may be defined as follows:
205+
</p>
206+
<pre class="demo-code-block">
207+
--mat-app-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
208+
--mat-app-body-medium-font: Roboto, sans-serif;
209+
--mat-app-body-medium-line-height: 1.25rem;
210+
--mat-app-body-medium-size: 0.875rem;
211+
--mat-app-body-medium-tracking: 0.016rem;
212+
--mat-app-body-medium-weight: 400;
213+
</pre>
214+
215+
<h1>Elevation</h1>
216+
217+
<p>
218+
Material Design provides six levels of elevation that can be used to provide
219+
a sense of depth and organization to an application's UI. Learn more at Material Design's
220+
<a href="https://m3.material.io/styles/elevation/overview">Elevation</a> guide.
221+
</p>
222+
223+
<p>
224+
These levels are defined as CSS box-shadow values that can be styled to an element.
225+
</p>
226+
227+
@for (level of [0, 1, 2, 3, 4, 5]; track $index) {
228+
<div class="demo-elevation code" [style.box-shadow]="'var(--mat-app-level' + level + ')'">
229+
box-shadow: var(--mat-app-level{{level}})
230+
</div>
231+
}

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

+175
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@use '@angular/material';
2+
3+
:host {
4+
display: block;
5+
max-width: 1000px;
6+
}
7+
8+
h1 {
9+
font: var(--mat-app-title-large);
10+
font-size: 28px;
11+
padding-top: 32px;
12+
}
13+
14+
h2 {
15+
font: var(--mat-app-title-large);
16+
}
17+
18+
a {
19+
color: var(--mat-app-primary);
20+
}
21+
22+
.demo-warn {
23+
background: var(--mat-app-error-container);
24+
color: var(--mat-app-on-error-container);
25+
border: 1px solid var(--mat-app-outline-variant);
26+
border-radius: var(--mat-app-corner-extra-small);
27+
padding: 8px;
28+
}
29+
30+
.demo-group {
31+
display: grid;
32+
grid-template-columns: 1fr 1fr;
33+
grid-gap: 24px;
34+
margin-top: 24px;
35+
}
36+
37+
@media (max-width: 1000px) {
38+
.demo-group { grid-template-columns: auto;}
39+
}
40+
41+
.demo-color-container {
42+
border-radius: var(--mat-app-corner-small);
43+
display: inline-block;
44+
font: var(--mat-app-body-medium);
45+
vertical-align: top;
46+
}
47+
48+
.demo-heading {
49+
color: var(--mat-app-on-primary);
50+
background: var(--mat-app-primary);
51+
border: 1px solid var(--mat-app-outline);
52+
border-top-right-radius: var(--mat-app-corner-small);
53+
border-top-left-radius: var(--mat-app-corner-small);
54+
border-bottom: none;
55+
padding: 16px;
56+
display: flex;
57+
align-items: center;
58+
justify-content: space-between;
59+
}
60+
61+
.demo-name {
62+
font: var(--mat-app-title-medium);
63+
}
64+
65+
.demo-variable {
66+
font: var(--mat-app-title-small);
67+
font-family: monospace;
68+
text-align: right;
69+
}
70+
71+
.demo-description {
72+
border: 1px solid var(--mat-app-outline);
73+
border-bottom-right-radius: var(--mat-app-corner-small);
74+
border-bottom-left-radius: var(--mat-app-corner-small);
75+
padding: 0 16px;
76+
}
77+
78+
.demo-code {
79+
font-family: monospace;
80+
}
81+
82+
.demo-surface-variable {
83+
display: inline-block;
84+
font-family: monospace;
85+
background: var(--mat-app-surface-dim);
86+
padding: 2px 6px;
87+
margin: 0 2px;
88+
border-radius: 4px;
89+
}
90+
91+
mat-expansion-panel {
92+
margin-top: 24px;
93+
overflow: visible;
94+
@include material.expansion-overrides((
95+
'container-text-font': var(--mat-app-body-medium-font),
96+
'container-text-size': var(--mat-app-body-medium-size),
97+
'container-text-weight': var(--mat-app-body-medium-weight),
98+
'container-text-line-height': var(--mat-app-body-medium-line-height),
99+
'container-text-tracking': var(--mat-app-body-medium-tracking),
100+
));
101+
}
102+
103+
.demo-compact-color-container {
104+
border-radius: var(--mat-app-corner-small);
105+
border: 1px solid var(--mat-app-outline);
106+
overflow: hidden; // Hide child heading background color
107+
margin-top: 24px;
108+
109+
.demo-heading {
110+
border: none;
111+
border-radius: 0;
112+
113+
&:not(:nth-child(1)) {
114+
border-top: 1px solid var(--mat-app-outline);
115+
}
116+
}
117+
118+
.demo-variables {
119+
text-align: end;
120+
}
121+
}
122+
123+
.demo-typography-group {
124+
border: 1px solid var(--mat-app-outline);
125+
border-radius: var(--mat-app-corner-small);
126+
margin-top: 40px;
127+
overflow: hidden;
128+
}
129+
130+
.demo-typography-title {
131+
text-transform: capitalize;
132+
font: var(--mat-app-title-medium);
133+
padding: 16px;
134+
border-bottom: 1px solid var(--mat-app-outline);
135+
background: var(--mat-app-primary-container);
136+
color: var(--mat-app-on-primary-container);
137+
}
138+
139+
.demo-typography-variable {
140+
min-width: 240px;
141+
}
142+
143+
.demo-typography-example {
144+
padding: 16px;
145+
display: flex;
146+
align-items: baseline;
147+
border-top: 1px solid var(--mat-app-outline-variant);
148+
149+
&:nth-child(1) {
150+
border: none;
151+
}
152+
.demo-surface-variable {
153+
margin-right: 16px;
154+
}
155+
}
156+
157+
.demo-typography-text {
158+
display: inline-block;
159+
}
160+
161+
.demo-elevation {
162+
height: 40px;
163+
width: 300px;
164+
margin: 32px;
165+
display: flex;
166+
align-items: center;
167+
justify-content: center;
168+
}
169+
170+
.demo-code-block {
171+
background: var(--mat-app-surface-container-low);
172+
padding: 16px;
173+
border-radius: var(--mat-app-corner-small);
174+
border: 1px solid var(--mat-app-outline);
175+
}

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

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {ChangeDetectionStrategy, Component, input} from '@angular/core';
10+
import {MatCardModule} from '@angular/material/card';
11+
import {MatExpansionModule} from '@angular/material/expansion';
12+
import {MatIconModule} from '@angular/material/icon';
13+
import {getAppState} from '../dev-app/dev-app-state';
14+
15+
interface Color {
16+
name: string;
17+
background: string;
18+
text: string;
19+
hideText?: boolean;
20+
}
21+
22+
@Component({
23+
selector: 'theme-demo-colors',
24+
template: `
25+
<div class="demo-compact-color-container">
26+
@for (color of colors(); track $index) {
27+
<div class="demo-heading"
28+
[style.background-color]="'var(' + color.background + ')'"
29+
[style.color]="'var(' + color.text + ')'">
30+
<div class="demo-name"> {{color.name}} </div>
31+
<div class="demo-variables">
32+
<div class="demo-variable demo-code">{{color.background}}</div>
33+
@if (!color.hideText) {
34+
<div class="demo-variable demo-code">{{color.text}}</div>
35+
}
36+
</div>
37+
</div>
38+
}
39+
</div>
40+
`,
41+
styleUrl: 'theme-demo.css',
42+
standalone: true,
43+
changeDetection: ChangeDetectionStrategy.OnPush,
44+
})
45+
export class ThemeDemoColors {
46+
colors = input<Color[]>();
47+
}
48+
49+
@Component({
50+
selector: 'theme-demo',
51+
templateUrl: 'theme-demo.html',
52+
styleUrl: 'theme-demo.css',
53+
standalone: true,
54+
imports: [MatCardModule, MatExpansionModule, MatIconModule, ThemeDemoColors],
55+
changeDetection: ChangeDetectionStrategy.OnPush,
56+
})
57+
export class ThemeDemo {
58+
state = getAppState();
59+
60+
alternativeThemeColors: Color[] = [
61+
{
62+
name: 'Primary Container',
63+
background: '--mat-app-primary-container',
64+
text: '--mat-app-on-primary-container',
65+
},
66+
{
67+
name: 'Secondary',
68+
background: '--mat-app-secondary',
69+
text: '--mat-app-on-secondary',
70+
},
71+
{
72+
name: 'Secondary Container',
73+
background: '--mat-app-secondary-container',
74+
text: '--mat-app-on-secondary-container',
75+
},
76+
{
77+
name: 'Tertiary',
78+
background: '--mat-app-tertiary',
79+
text: '--mat-app-on-tertiary',
80+
},
81+
{
82+
name: 'Tertiary Container',
83+
background: '--mat-app-tertiary-container',
84+
text: '--mat-app-on-tertiary-container',
85+
},
86+
{
87+
name: 'Error Container',
88+
background: '--mat-app-error-container',
89+
text: '--mat-app-on-error-container',
90+
},
91+
];
92+
93+
surfaceColors: Color[] = [
94+
{
95+
name: 'Surface Dim',
96+
background: '--mat-app-surface-dim',
97+
text: '--mat-app-on-surface',
98+
hideText: true,
99+
},
100+
{
101+
name: 'Surface Bright',
102+
background: '--mat-app-surface-bright',
103+
text: '--mat-app-on-surface',
104+
hideText: true,
105+
},
106+
{
107+
name: 'Surface Container Lowest',
108+
background: '--mat-app-surface-container-lowest',
109+
text: '--mat-app-on-surface',
110+
hideText: true,
111+
},
112+
{
113+
name: 'Surface Container Low',
114+
background: '--mat-app-surface-container-low',
115+
text: '--mat-app-on-surface',
116+
hideText: true,
117+
},
118+
{
119+
name: 'Surface Container',
120+
background: '--mat-app-surface-container',
121+
text: '--mat-app-on-surface',
122+
hideText: true,
123+
},
124+
{
125+
name: 'Surface Container High',
126+
background: '--mat-app-surface-container-high',
127+
text: '--mat-app-on-surface',
128+
hideText: true,
129+
},
130+
{
131+
name: 'Surface Container Highest',
132+
background: '--mat-app-surface-container-highest',
133+
text: '--mat-app-on-surface',
134+
hideText: true,
135+
},
136+
];
137+
138+
fixedColors: Color[] = [
139+
{
140+
name: 'Primary Fixed',
141+
background: '--mat-app-primary-fixed',
142+
text: '--mat-app-on-primary-fixed',
143+
},
144+
{
145+
name: 'Primary Fixed Dim',
146+
background: '--mat-app-primary-fixed-dim',
147+
text: '--mat-app-on-primary-fixed',
148+
},
149+
{
150+
name: 'Secondary Fixed',
151+
background: '--mat-app-secondary-fixed',
152+
text: '--mat-app-on-secondary-fixed',
153+
},
154+
{
155+
name: 'Secondary Fixed Dim',
156+
background: '--mat-app-secondary-fixed-dim',
157+
text: '--mat-app-on-secondary-fixed',
158+
},
159+
{
160+
name: 'Tertiary Fixed',
161+
background: '--mat-app-tertiary-fixed',
162+
text: '--mat-app-on-tertiary-fixed',
163+
},
164+
{
165+
name: 'Tertiary Fixed Dim',
166+
background: '--mat-app-tertiary-fixed-dim',
167+
text: '--mat-app-on-tertiary-fixed',
168+
},
169+
];
170+
}

‎src/material/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
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;
24+
@forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
2425

2526
// Private/Internal
2627
@forward './core/density/private/all-density' show all-component-densities;

0 commit comments

Comments
 (0)
Please sign in to comment.