Skip to content
This repository has been archived by the owner on Dec 18, 2024. It is now read-only.

Commit

Permalink
Switch to Material 3
Browse files Browse the repository at this point in the history
Reworks the docs site to use the latest Material Design spec. Also switches to the new Angular logo and fixes some general UI inconsistencies.
  • Loading branch information
crisbeto committed Mar 25, 2024
1 parent 5a64ab1 commit bb0fc2a
Show file tree
Hide file tree
Showing 87 changed files with 547 additions and 931 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
# Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
# This file should be checked into version control along with the pnpm-lock.yaml file.
.npmrc=-1306950124
pnpm-lock.yaml=-1588531956
pnpm-lock.yaml=-93580819
yarn.lock=-1601036339
package.json=232433724
package.json=-1110318834
32 changes: 16 additions & 16 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,23 +51,23 @@
},
{
"inject": false,
"input": "src/styles/custom-themes/pink-bluegrey.scss",
"bundleName": "pink-bluegrey"
"input": "src/styles/custom-themes/magenta-violet.scss",
"bundleName": "magenta-violet"
},
{
"inject": false,
"input": "src/styles/custom-themes/deeppurple-amber.scss",
"bundleName": "deeppurple-amber"
"input": "src/styles/custom-themes/rose-red.scss",
"bundleName": "rose-red"
},
{
"inject": false,
"input": "src/styles/custom-themes/indigo-pink.scss",
"bundleName": "indigo-pink"
"input": "src/styles/custom-themes/azure-blue.scss",
"bundleName": "azure-blue"
},
{
"inject": false,
"input": "src/styles/custom-themes/purple-green.scss",
"bundleName": "purple-green"
"input": "src/styles/custom-themes/cyan-orange.scss",
"bundleName": "cyan-orange"
}
],
"stylePreprocessorOptions": {
Expand Down Expand Up @@ -143,23 +143,23 @@
},
{
"inject": false,
"input": "src/styles/custom-themes/pink-bluegrey.scss",
"bundleName": "pink-bluegrey"
"input": "src/styles/custom-themes/magenta-violet.scss",
"bundleName": "magenta-violet"
},
{
"inject": false,
"input": "src/styles/custom-themes/deeppurple-amber.scss",
"bundleName": "deeppurple-amber"
"input": "src/styles/custom-themes/rose-red.scss",
"bundleName": "rose-red"
},
{
"inject": false,
"input": "src/styles/custom-themes/indigo-pink.scss",
"bundleName": "indigo-pink"
"input": "src/styles/custom-themes/azure-blue.scss",
"bundleName": "azure-blue"
},
{
"inject": false,
"input": "src/styles/custom-themes/purple-green.scss",
"bundleName": "purple-green"
"input": "src/styles/custom-themes/cyan-orange.scss",
"bundleName": "cyan-orange"
}
],
"stylePreprocessorOptions": {
Expand Down
2 changes: 2 additions & 0 deletions defs.bzl
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ APPLICATION_CONFIG = COMMON_CONFIG + [
":ng-app-config",
]
APPLICATION_DEPS = [
"//:node_modules/@material/tokens",
]

# Common dependencies of Angular CLI test suites
Expand All @@ -68,6 +69,7 @@ TEST_CONFIG = COMMON_CONFIG + [
"//:node_modules/karma-coverage-istanbul-reporter",
]
TEST_DEPS = [
"//:node_modules/@material/tokens",
"//:node_modules/@types/jasmine",
"//:node_modules/@types/node",
"//:node_modules/@angular/compiler",
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"@angular-eslint/eslint-plugin": "^14.0.0",
"@angular-eslint/eslint-plugin-template": "^14.0.0",
"@angular-eslint/template-parser": "^14.0.0",
"@material/tokens": "15.0.0-canary.7f224ddd4.0",
"@angular/cli": "^17.3.0",
"@angular/compiler-cli": "^17.3.0",
"@bazel/bazelisk": "^1.12.1",
Expand Down
12 changes: 4 additions & 8 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 7 additions & 30 deletions src/_app-theme.scss
Original file line number Diff line number Diff line change
@@ -1,62 +1,37 @@
@use '@angular/material' as mat;

@use 'sass:map';
@use './app/pages/component-category-list/component-category-list-theme';
@use './app/pages/component-sidenav/component-sidenav-theme';
@use './app/pages/component-viewer/component-viewer-theme';
@use './app/pages/guide-list/guide-list-theme';
@use './app/pages/homepage/homepage-theme';
@use './app/pages/not-found/not-found-theme';
@use './app/shared/carousel/carousel-theme';
@use './app/pages/component-page-header/component-page-header-theme';
@use './app/shared/example-viewer/example-viewer-theme';
@use './app/shared/footer/footer-theme';
@use './app/shared/navbar/navbar-theme';
@use './app/shared/table-of-contents/table-of-contents-theme';
@use './app/shared/cookie-popup/cookie-popup-theme';
@use './app/shared/theme-picker/theme-picker-theme';
@use './styles/api-theme';
@use './styles/markdown-theme';
@use './styles/svg-theme';
@use './styles/tables-theme';

// Styles for the docs app that are based on the current theme.
@mixin theme($theme) {
$primary: map.get($theme, primary);
$accent: map.get($theme, accent);
$warn: map.get($theme, warn);
$background: map.get($theme, background);
$foreground: map.get($theme, foreground);
$next-theme: mat.define-palette(mat.$red-palette);

.docs-app-background {
background: mat.get-color-from-palette($background, background);
}

.docs-primary-header {
background: mat.get-color-from-palette($primary);

h1 {
color: mat.get-color-from-palette($primary, default-contrast);
}
}

.docs-footer {
background: mat.get-color-from-palette($primary);
color: mat.get-color-from-palette($primary, default-contrast);
background: mat.get-theme-color($theme, surface);
}

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

a {
color: mat.get-color-from-palette($foreground, text);
color: mat.get-theme-color($theme, on-surface-variant);
}
}

.is-next-version {
background: mat.get-color-from-palette($next-theme, 900) !important;
}

@include carousel-theme.theme($theme);
@include component-category-list-theme.theme($theme);
@include component-sidenav-theme.theme($theme);
@include component-viewer-theme.theme($theme);
Expand All @@ -72,4 +47,6 @@
@include navbar-theme.theme($theme);
@include table-of-contents-theme.theme($theme);
@include cookie-popup-theme.theme($theme);
@include theme-picker-theme.theme($theme);
@include component-page-header-theme.theme($theme);
}
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
@use 'sass:map';
@use '@angular/material' as mat;

@mixin theme($theme) {
$primary: map.get($theme, primary);
$accent: map.get($theme, accent);
$warn: map.get($theme, warn);
$background: map.get($theme, background);
$foreground: map.get($theme, foreground);
$is-dark-theme: map.get($theme, is-dark);
$nav-background-opacity: if($is-dark-theme, 0.2, 0.03);

.docs-component-category-list-summary a {
color: mat.get-color-from-palette($primary, if($is-dark-theme, 200, default));
color: mat.get-theme-color($theme, primary);
}

.docs-component-category-list-card-summary {
color: mat.get-color-from-palette($foreground, secondary-text);
.docs-component-category-list-card-title,
.docs-component-category-list-card-summary {
color: mat.get-theme-color($theme, on-surface-variant);
}

.docs-component-category-list-card {
border: 1px solid mat.get-color-from-palette($foreground, divider);
border-radius: 4px;
background: mat.get-color-from-palette($background, card);
border: 1px solid mat.get-theme-color($theme, outline-variant);
border-radius: 12px;
}

.docs-component-category-list-card:hover {
background: rgba(0, 0, 0, $nav-background-opacity);
}

.docs-component-category-list-card-title {
color: mat.get-color-from-palette($foreground, text);
background: mat.get-theme-color($theme, surface-dim);
}

.docs-component-category-list-card-image-wrapper {
border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
border-bottom: 1px solid mat.get-theme-color($theme, outline-variant);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
}

.docs-component-category-list-summary {
padding: 25px 40px 0;
font-size: 18px;
padding: 40px 40px 0;
font-size: 16px;
line-height: 1.5;
display: flex;
justify-content: center;
Expand All @@ -27,7 +27,7 @@
.docs-component-category-list {
display: flex;
flex-wrap: wrap;
padding: 20px;
padding: 20px 20px 100px;
justify-content: center;
}

Expand All @@ -40,7 +40,7 @@
.docs-component-category-list-card-title {
align-items: center;
display: flex;
padding: 15px;
padding: 16px;
font-size: 20px;
font-weight: 500;
}
Expand All @@ -52,16 +52,17 @@

.docs-component-category-list-card {
overflow: hidden;
transition: background 0.3s ease;
}

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

.docs-component-category-list-card-summary {
padding: 0 15px 15px 15px;
padding: 0 16px 16px;
min-height: 2.4em;
font-size: 15px;
font-size: 16px;
}


Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@use '@angular/material' as mat;

@mixin theme($theme) {
.docs-component-page-header {
background: mat.get-theme-color($theme, primary-container);
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<header class="docs-primary-header component-page-header">
<button mat-button class="sidenav-toggle" (click)="toggleSidenav.emit()">
<header class="docs-component-page-header">
<button mat-button (click)="toggleSidenav.emit()">
<mat-icon>menu</mat-icon>
Menu
</button>

<h1>{{getTitle()}} </h1>
</header>
Loading

0 comments on commit bb0fc2a

Please sign in to comment.