Clean up markdown and api styles

* Import the "Roboto Mono" font and use that for code * Replace "typography" styles with specific styles for markdown docs and api docs. * Add common "tables" styles used by both markdown and api docs. * Improve styles for @Input/@output markers * Improve styles for method parameter and return types * Improve styles for method names * Other minor style tweaks (font size, spacing)
angular · Apr 8, 2017 · 3132b41 · 3132b41
1 parent 966b9c9
commit 3132b41
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 140 deletions.
diff --git a/src/_app-theme.scss b/src/_app-theme.scss
@@ -5,7 +5,9 @@
 @import './app/pages/component-list/component-list-theme';
 @import './app/pages/component-category-list/component-category-list-theme';
 
-@import './styles/typography-theme';
+@import './styles/api-theme';
+@import './styles/markdown-theme';
+@import './styles/tables-theme';
 @import './app/shared/navbar/navbar-theme';
 @import './app/shared/example-viewer/example-viewer-theme';
 @import './app/shared/footer/footer-theme';
@@ -36,7 +38,9 @@
     color: mat-color($primary, default-contrast);
   }
 
-  @include docs-site-typography-theme($theme);
+  @include docs-site-api-theme($theme);
+  @include docs-site-markdown-theme($theme);
+  @include docs-site-tables-theme($theme);
   @include nav-bar-theme($theme);
   @include component-viewer-sidenav-theme($theme);
   @include home-page-theme($theme);

diff --git a/src/index.html b/src/index.html
@@ -16,6 +16,7 @@
       sizes="192x192">
   <link rel="manifest" href="assets/img/favicons/manifest.json">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
 </head>
 
 <body class="docs-app-background">

diff --git a/src/main.scss b/src/main.scss
@@ -1,11 +1,12 @@
 @import '~@angular/material/theming';
 @import './app-theme';
-@import './styles/typography';
+@import './styles/api';
+@import './styles/markdown';
+@import './styles/tables';
 
 
 // Include material core styles.
 @include mat-core();
-@include docs-site-typography();
 
 
 // Define the light theme.

diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss
@@ -0,0 +1,26 @@
+@import '~@angular/material/theming';
+
+// Mixin to apply theme colors for generated API docs.
+@mixin docs-site-api-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);
+
+  .docs-api-method-name-cell {
+    color: mat-color($primary, 800);
+  }
+
+  .docs-api-method-returns-type,
+  .docs-api-method-parameter-type {
+    color: mat-color($primary, darker);
+  }
+
+  // Force the top-level API docs header to be hidden, since this is already
+  // captured in the top nav-bar.
+  .docs-api-h1 {
+    display: none !important;
+  }
+}
diff --git a/src/styles/_api.scss b/src/styles/_api.scss
@@ -0,0 +1,57 @@
+// Styles for API docs generated via dgeni from material2 source JsDocs.
+
+// Top header, e.g., "API documentation for dialog".
+.docs-api-h2 {
+  font-size: 30px;
+}
+
+// Section header, e.g. "Services" or "Directives"
+.docs-api-h3 {
+  font-size: 24px;
+  font-weight: 400;
+  margin-top: 45px;
+}
+
+.docs-api-h4 {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.docs-api-class-description {
+  font-size: 12px;
+}
+.docs-api-property-name {
+  margin: 0;
+}
+
+.docs-api-method-name-row,
+.docs-api-method-parameter-row,
+.docs-api-properties-name-cell {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 600;
+}
+
+.docs-api-properties-name-cell,
+.docs-api-method-parameter-row {
+  font-size: 14px;
+}
+
+.docs-api-method-parameter-type {
+  font-size: 12px;
+}
+
+.docs-api-method-name-cell {
+  font-weight: 700;
+  font-size: 18px;
+}
+
+.docs-api-method-parameters-header-cell,
+.docs-api-method-returns-header-cell {
+  font-size: 14px;
+}
+
+.docs-api-input-marker,
+.docs-api-output-marker {
+  // Size corresponding to "caption"-style text in the spec.
+  font-size: 12px;
+}
diff --git a/src/styles/_markdown-theme.scss b/src/styles/_markdown-theme.scss
@@ -0,0 +1,16 @@
+@import '~@angular/material/theming';
+
+// Mixin to apply theme colors for docs generated from markdown files in the material2 repo.
+@mixin docs-site-markdown-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);
+
+  .docs-markdown-a {
+    color: mat-color($primary);
+  }
+}
+
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
@@ -0,0 +1,38 @@
+// Styles for overview and guide docs generated via `marked` from the material2 repo.
+
+.docs-markdown-h1 {
+  display: inline-block;
+  font-size: 20px;
+  font-weight: 400;
+  padding: 5px;
+}
+
+.docs-markdown-h2,
+.docs-markdown-h4 {
+  margin-top: 40px;
+}
+
+.docs-markdown-h5 {
+  font-size: 16px;
+}
+
+.docs-markdown-p {
+  font-size: 16px;
+  line-height: 28px;
+}
+
+.docs-markdown-a {
+  text-decoration: none;
+}
+
+.docs-markdown-td code {
+  font-size: 12px;
+}
+
+code, pre {
+  font-family: 'Roboto Mono', monospace;
+}
+
+pre {
+  font-size: 12px;
+}
diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss
@@ -0,0 +1,26 @@
+@import '~@angular/material/theming';
+
+// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews).
+@mixin docs-site-tables-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);
+
+  .docs-api table,
+  .docs-markdown-table {
+    color: mat-color($foreground, text);
+  }
+
+  .docs-api th,
+  .docs-markdown-th {
+    background: mat-color($background, app-bar);
+  }
+
+  .docs-api td,
+  .docs-markdown-td {
+    border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
+  }
+}
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
@@ -0,0 +1,23 @@
+.docs-api table,
+.docs-markdown-table {
+  border-collapse: collapse;
+  border-radius: 2px;
+  border-spacing: 0;
+  margin: 0 0 32px 0;
+  width: 100%;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
+}
+
+.docs-api th,
+.docs-markdown-th {
+  font-weight: 400;
+  max-width: 100px;
+  padding: 13px 32px;
+  text-align: left;
+}
+
+.docs-api td,
+.docs-markdown-td {
+  font-weight: 400;
+  padding: 8px 16px;
+}
diff --git a/src/styles/_typography-theme.scss b/src/styles/_typography-theme.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss