Skip to content

Commit

Permalink
feat(material/core): add experimental theme demo (#29636)
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewseguin authored Aug 26, 2024
1 parent ac324fb commit 64ed7ca
Show file tree
Hide file tree
Showing 12 changed files with 683 additions and 18 deletions.
2 changes: 1 addition & 1 deletion .stylelintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

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

"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
Expand Down
1 change: 1 addition & 0 deletions src/dev-app/BUILD.bazel
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ ng_module(
"//src/dev-app/table",
"//src/dev-app/table-scroll-container",
"//src/dev-app/tabs",
"//src/dev-app/theme",
"//src/dev-app/toolbar",
"//src/dev-app/tooltip",
"//src/dev-app/tree",
Expand Down
11 changes: 11 additions & 0 deletions src/dev-app/dev-app/dev-app-layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,17 @@ <h1>Angular Material Demos</h1>
<mat-icon>dark_mode</mat-icon>
}
</button>
<button
mat-icon-button
(click)="toggleSystemTheme()"
[matTooltip]="state.systemTheme ? 'Switch to standard theme' : 'Switch to system theme'"
>
@if (state.systemTheme) {
<mat-icon>public_off</mat-icon>
} @else {
<mat-icon>public</mat-icon>
}
</button>
<button
mat-icon-button
(click)="toggleRippleDisabled()"
Expand Down
8 changes: 8 additions & 0 deletions src/dev-app/dev-app/dev-app-layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export class DevAppLayout {
{name: 'Table Scroll Container', route: '/table-scroll-container'},
{name: 'Table', route: '/table'},
{name: 'Tabs', route: '/tabs'},
{name: 'Theme', route: '/theme'},
{name: 'Toolbar', route: '/toolbar'},
{name: 'Tooltip', route: '/tooltip'},
{name: 'Tree', route: '/tree'},
Expand All @@ -127,6 +128,7 @@ export class DevAppLayout {

constructor() {
this.toggleTheme(this.state.darkTheme);
this.toggleSystemTheme(this.state.systemTheme);
this.toggleStrongFocus(this.state.strongFocusEnabled);
this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
this.toggleRippleDisabled(this.state.rippleDisabled);
Expand All @@ -141,6 +143,12 @@ export class DevAppLayout {
setAppState(this.state);
}

toggleSystemTheme(value = !this.state.systemTheme) {
this.state.systemTheme = value;
this._document.body.classList.toggle('demo-experimental-theme', value);
setAppState(this.state);
}

toggleFullscreen() {
this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
}
Expand Down
2 changes: 2 additions & 0 deletions src/dev-app/dev-app/dev-app-state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export interface DevAppState {
animations: boolean;
zoneless: boolean;
darkTheme: boolean;
systemTheme: boolean;
rippleDisabled: boolean;
strongFocusEnabled: boolean;
m3Enabled: boolean;
Expand All @@ -42,6 +43,7 @@ export function getAppState(): DevAppState {
animations: true,
zoneless: false,
darkTheme: false,
systemTheme: false,
rippleDisabled: false,
strongFocusEnabled: false,
m3Enabled: false,
Expand Down
4 changes: 4 additions & 0 deletions src/dev-app/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,10 @@ export const DEV_APP_ROUTES: Routes = [
path: 'tabs',
loadComponent: () => import('./tabs/tabs-demo').then(m => m.TabsDemo),
},
{
path: 'theme',
loadComponent: () => import('./theme/theme-demo').then(m => m.ThemeDemo),
},
{
path: 'toolbar',
loadComponent: () => import('./toolbar/toolbar-demo').then(m => m.ToolbarDemo),
Expand Down
69 changes: 52 additions & 17 deletions src/dev-app/theme-m3.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,16 @@
// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
mat.$theme-legacy-inspection-api-compatibility: false;

$primary: mat.$azure-palette;
$tertiary: mat.$blue-palette;

// Create a theme with the specified color type and density.
@function create-theme($type: light, $density: 0) {
@return mat.define-theme((
color: (
theme-type: $type,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
primary: $primary,
tertiary: $tertiary,
use-system-variables: true,
),
typography: (use-system-variables: true),
Expand All @@ -34,12 +37,26 @@ $dark-theme: create-theme($type: dark);

// Include the default theme styles.
html {
@include mat.all-component-themes($light-theme);
@include mat.system-level-colors($light-theme);
@include mat.system-level-typography($light-theme);
// TODO(mmalerba): Support M3 for experimental components.
// @include matx.column-resize-theme($light-theme);
// @include matx.popover-edit-theme($light-theme);
body:not(.demo-experimental-theme) {
@include mat.all-component-themes($light-theme);
@include mat.system-level-colors($light-theme);
@include mat.system-level-typography($light-theme);
// TODO(mmalerba): Support M3 for experimental components.
// @include matx.column-resize-theme($light-theme);
// @include matx.popover-edit-theme($light-theme);
}

body.demo-experimental-theme {
@include mat.private-experimental-theme((
color: (
theme-type: light,
primary: $primary,
tertiary: $tertiary,
),
typography: Roboto,
density: 0,
));
}
}

@include mat.typography-hierarchy($light-theme);
Expand All @@ -55,13 +72,25 @@ html {
// CSS class whatever you want. In this example, any component inside of an element with
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
// default theme.
.demo-unicorn-dark-theme {
// Include the dark theme color styles.
@include mat.all-component-colors($dark-theme);
@include mat.system-level-colors($dark-theme);
// TODO(mmalerba): Support M3 for experimental components.
// @include matx.column-resize-color($dark-theme);
// @include matx.popover-edit-color($dark-theme);
body.demo-unicorn-dark-theme {
&:not(.demo-experimental-theme) {
// Include the dark theme color styles.
@include mat.all-component-colors($dark-theme);
@include mat.system-level-colors($dark-theme);
// TODO(mmalerba): Support M3 for experimental components.
// @include matx.column-resize-color($dark-theme);
// @include matx.popover-edit-color($dark-theme);
}

&.demo-experimental-theme {
@include mat.private-experimental-theme((
color: (
theme-type: dark,
primary: $primary,
tertiary: $tertiary,
),
));
}

// Include the dark theme colors for focus indicators.
&.demo-strong-focus {
Expand All @@ -75,8 +104,14 @@ html {
$density-scales: (-1, -2, -3, -4, minimum, maximum);
@each $scale in $density-scales {
.demo-density-#{$scale} {
$density-theme: create-theme($density: $scale);
@include mat.all-component-densities($density-theme);
body:not(.demo-experimental-theme) & {
$density-theme: create-theme($density: $scale);
@include mat.all-component-densities($density-theme);
}

body.demo-experimental-theme & {
@include mat.private-experimental-theme((density: $scale));
}
}
}

Expand Down
27 changes: 27 additions & 0 deletions src/dev-app/theme/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
load("//tools:defaults.bzl", "ng_module", "sass_binary")

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

ng_module(
name = "theme",
srcs = glob(["**/*.ts"]),
assets = [
"theme-demo.html",
":theme_demo_scss",
],
deps = [
"//src/dev-app/dev-app",
"//src/material/card",
"//src/material/expansion",
"//src/material/icon",
"@npm//@angular/forms",
],
)

sass_binary(
name = "theme_demo_scss",
src = "theme-demo.scss",
deps = [
"//src/material:sass_lib",
],
)
Loading

0 comments on commit 64ed7ca

Please sign in to comment.