Skip to content

Commit 9b665c3

Browse files
crisbetocrisbeto
committed
Switch to Material 3
Reworks the docs site to use the latest Material Design spec. Also switches to the new Angular logo and fixes some general UI inconsistencies.
1 parent 3f07a02 commit 9b665c3

File tree

87 files changed

+547
-931
lines changed

Some content is hidden

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

87 files changed

+547
-931
lines changed

‎material.angular.io/.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
# Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
33
# This file should be checked into version control along with the pnpm-lock.yaml file.
44
.npmrc=-1306950124
5-
pnpm-lock.yaml=-1588531956
5+
pnpm-lock.yaml=-93580819
66
yarn.lock=-1601036339
7-
package.json=232433724
7+
package.json=-1110318834

‎material.angular.io/angular.json

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,23 +51,23 @@
5151
},
5252
{
5353
"inject": false,
54-
"input": "src/styles/custom-themes/pink-bluegrey.scss",
55-
"bundleName": "pink-bluegrey"
54+
"input": "src/styles/custom-themes/magenta-violet.scss",
55+
"bundleName": "magenta-violet"
5656
},
5757
{
5858
"inject": false,
59-
"input": "src/styles/custom-themes/deeppurple-amber.scss",
60-
"bundleName": "deeppurple-amber"
59+
"input": "src/styles/custom-themes/rose-red.scss",
60+
"bundleName": "rose-red"
6161
},
6262
{
6363
"inject": false,
64-
"input": "src/styles/custom-themes/indigo-pink.scss",
65-
"bundleName": "indigo-pink"
64+
"input": "src/styles/custom-themes/azure-blue.scss",
65+
"bundleName": "azure-blue"
6666
},
6767
{
6868
"inject": false,
69-
"input": "src/styles/custom-themes/purple-green.scss",
70-
"bundleName": "purple-green"
69+
"input": "src/styles/custom-themes/cyan-orange.scss",
70+
"bundleName": "cyan-orange"
7171
}
7272
],
7373
"stylePreprocessorOptions": {
@@ -143,23 +143,23 @@
143143
},
144144
{
145145
"inject": false,
146-
"input": "src/styles/custom-themes/pink-bluegrey.scss",
147-
"bundleName": "pink-bluegrey"
146+
"input": "src/styles/custom-themes/magenta-violet.scss",
147+
"bundleName": "magenta-violet"
148148
},
149149
{
150150
"inject": false,
151-
"input": "src/styles/custom-themes/deeppurple-amber.scss",
152-
"bundleName": "deeppurple-amber"
151+
"input": "src/styles/custom-themes/rose-red.scss",
152+
"bundleName": "rose-red"
153153
},
154154
{
155155
"inject": false,
156-
"input": "src/styles/custom-themes/indigo-pink.scss",
157-
"bundleName": "indigo-pink"
156+
"input": "src/styles/custom-themes/azure-blue.scss",
157+
"bundleName": "azure-blue"
158158
},
159159
{
160160
"inject": false,
161-
"input": "src/styles/custom-themes/purple-green.scss",
162-
"bundleName": "purple-green"
161+
"input": "src/styles/custom-themes/cyan-orange.scss",
162+
"bundleName": "cyan-orange"
163163
}
164164
],
165165
"stylePreprocessorOptions": {

‎material.angular.io/defs.bzl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ APPLICATION_CONFIG = COMMON_CONFIG + [
5151
":ng-app-config",
5252
]
5353
APPLICATION_DEPS = [
54+
"//:node_modules/@material/tokens",
5455
]
5556

5657
# Common dependencies of Angular CLI test suites
@@ -68,6 +69,7 @@ TEST_CONFIG = COMMON_CONFIG + [
6869
"//:node_modules/karma-coverage-istanbul-reporter",
6970
]
7071
TEST_DEPS = [
72+
"//:node_modules/@material/tokens",
7173
"//:node_modules/@types/jasmine",
7274
"//:node_modules/@types/node",
7375
"//:node_modules/@angular/compiler",

‎material.angular.io/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@angular-eslint/eslint-plugin": "^14.0.0",
6464
"@angular-eslint/eslint-plugin-template": "^14.0.0",
6565
"@angular-eslint/template-parser": "^14.0.0",
66+
"@material/tokens": "15.0.0-canary.7f224ddd4.0",
6667
"@angular/cli": "^17.3.0",
6768
"@angular/compiler-cli": "^17.3.0",
6869
"@bazel/bazelisk": "^1.12.1",

‎material.angular.io/pnpm-lock.yaml

Lines changed: 4 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎material.angular.io/src/_app-theme.scss

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,37 @@
11
@use '@angular/material' as mat;
22

3-
@use 'sass:map';
43
@use './app/pages/component-category-list/component-category-list-theme';
54
@use './app/pages/component-sidenav/component-sidenav-theme';
65
@use './app/pages/component-viewer/component-viewer-theme';
76
@use './app/pages/guide-list/guide-list-theme';
87
@use './app/pages/homepage/homepage-theme';
98
@use './app/pages/not-found/not-found-theme';
10-
@use './app/shared/carousel/carousel-theme';
9+
@use './app/pages/component-page-header/component-page-header-theme';
1110
@use './app/shared/example-viewer/example-viewer-theme';
1211
@use './app/shared/footer/footer-theme';
1312
@use './app/shared/navbar/navbar-theme';
1413
@use './app/shared/table-of-contents/table-of-contents-theme';
1514
@use './app/shared/cookie-popup/cookie-popup-theme';
15+
@use './app/shared/theme-picker/theme-picker-theme';
1616
@use './styles/api-theme';
1717
@use './styles/markdown-theme';
1818
@use './styles/svg-theme';
1919
@use './styles/tables-theme';
2020

2121
// Styles for the docs app that are based on the current theme.
2222
@mixin theme($theme) {
23-
$primary: map.get($theme, primary);
24-
$accent: map.get($theme, accent);
25-
$warn: map.get($theme, warn);
26-
$background: map.get($theme, background);
27-
$foreground: map.get($theme, foreground);
28-
$next-theme: mat.define-palette(mat.$red-palette);
29-
3023
.docs-app-background {
31-
background: mat.get-color-from-palette($background, background);
32-
}
33-
34-
.docs-primary-header {
35-
background: mat.get-color-from-palette($primary);
36-
37-
h1 {
38-
color: mat.get-color-from-palette($primary, default-contrast);
39-
}
40-
}
41-
42-
.docs-footer {
43-
background: mat.get-color-from-palette($primary);
44-
color: mat.get-color-from-palette($primary, default-contrast);
24+
background: mat.get-theme-color($theme, surface);
4525
}
4626

4727
.docs-help-support {
48-
color: mat.get-color-from-palette($foreground, secondary-text);
28+
color: mat.get-theme-color($theme, on-surface);
4929

5030
a {
51-
color: mat.get-color-from-palette($foreground, text);
31+
color: mat.get-theme-color($theme, on-surface-variant);
5232
}
5333
}
5434

55-
.is-next-version {
56-
background: mat.get-color-from-palette($next-theme, 900) !important;
57-
}
58-
59-
@include carousel-theme.theme($theme);
6035
@include component-category-list-theme.theme($theme);
6136
@include component-sidenav-theme.theme($theme);
6237
@include component-viewer-theme.theme($theme);
@@ -72,4 +47,6 @@
7247
@include navbar-theme.theme($theme);
7348
@include table-of-contents-theme.theme($theme);
7449
@include cookie-popup-theme.theme($theme);
50+
@include theme-picker-theme.theme($theme);
51+
@include component-page-header-theme.theme($theme);
7552
}

‎material.angular.io/src/app/pages/component-category-list/_component-category-list-theme.scss

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,25 @@
1-
@use 'sass:map';
21
@use '@angular/material' as mat;
32

43
@mixin theme($theme) {
5-
$primary: map.get($theme, primary);
6-
$accent: map.get($theme, accent);
7-
$warn: map.get($theme, warn);
8-
$background: map.get($theme, background);
9-
$foreground: map.get($theme, foreground);
10-
$is-dark-theme: map.get($theme, is-dark);
11-
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);
12-
134
.docs-component-category-list-summary a {
14-
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
5+
color: mat.get-theme-color($theme, primary);
156
}
167

17-
.docs-component-category-list-card-summary {
18-
color: mat.get-color-from-palette($foreground, secondary-text);
8+
.docs-component-category-list-card-title,
9+
.docs-component-category-list-card-summary {
10+
color: mat.get-theme-color($theme, on-surface-variant);
1911
}
2012

2113
.docs-component-category-list-card {
22-
border: 1px solid mat.get-color-from-palette($foreground, divider);
23-
border-radius: 4px;
24-
background: mat.get-color-from-palette($background, card);
14+
border: 1px solid mat.get-theme-color($theme, outline-variant);
15+
border-radius: 12px;
2516
}
2617

2718
.docs-component-category-list-card:hover {
28-
background: rgba(0, 0, 0, $nav-background-opacity);
29-
}
30-
31-
.docs-component-category-list-card-title {
32-
color: mat.get-color-from-palette($foreground, text);
19+
background: mat.get-theme-color($theme, surface-dim);
3320
}
3421

3522
.docs-component-category-list-card-image-wrapper {
36-
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
23+
border-bottom: 1px solid mat.get-theme-color($theme, outline-variant);
3724
}
3825
}

‎material.angular.io/src/app/pages/component-category-list/component-category-list.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
}
66

77
.docs-component-category-list-summary {
8-
padding: 25px 40px 0;
9-
font-size: 18px;
8+
padding: 40px 40px 0;
9+
font-size: 16px;
1010
line-height: 1.5;
1111
display: flex;
1212
justify-content: center;
@@ -27,7 +27,7 @@
2727
.docs-component-category-list {
2828
display: flex;
2929
flex-wrap: wrap;
30-
padding: 20px;
30+
padding: 20px 20px 100px;
3131
justify-content: center;
3232
}
3333

@@ -40,7 +40,7 @@
4040
.docs-component-category-list-card-title {
4141
align-items: center;
4242
display: flex;
43-
padding: 15px;
43+
padding: 16px;
4444
font-size: 20px;
4545
font-weight: 500;
4646
}
@@ -52,16 +52,17 @@
5252

5353
.docs-component-category-list-card {
5454
overflow: hidden;
55+
transition: background 0.3s ease;
5556
}
5657

5758
.docs-component-category-list-card-image-wrapper {
5859
height: 156px;
5960
}
6061

6162
.docs-component-category-list-card-summary {
62-
padding: 0 15px 15px 15px;
63+
padding: 0 16px 16px;
6364
min-height: 2.4em;
64-
font-size: 15px;
65+
font-size: 16px;
6566
}
6667

6768

‎material.angular.io/src/app/pages/component-page-header/_component-page-header-theme.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use '@angular/material' as mat;
2+
3+
@mixin theme($theme) {
4+
.docs-component-page-header {
5+
background: mat.get-theme-color($theme, primary-container);
6+
}
7+
}

‎material.angular.io/src/app/pages/component-page-header/component-page-header.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
<header class="docs-primary-header component-page-header">
2-
<button mat-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
1+
<header class="docs-component-page-header">
2+
<button mat-button (click)="toggleSidenav.emit()">
33
<mat-icon>menu</mat-icon>
4+
Menu
45
</button>
5-
6-
<h1>{{getTitle()}} </h1>
76
</header>

0 commit comments

Comments
 (0)