diff --git a/src/_app-theme.scss b/src/_app-theme.scss
index f5f7d9890..8c8ad3ab1 100644
--- 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
index 7ee8663f0..6972aad06 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,7 @@
sizes="192x192">
+
diff --git a/src/main.scss b/src/main.scss
index 098d40199..997c8b60c 100644
--- 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
new file mode 100644
index 000000000..eda4b4665
--- /dev/null
+++ 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
new file mode 100644
index 000000000..5de082e5e
--- /dev/null
+++ 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
new file mode 100644
index 000000000..9ad46e8cb
--- /dev/null
+++ 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
new file mode 100644
index 000000000..6aa987e27
--- /dev/null
+++ 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
new file mode 100644
index 000000000..92beea549
--- /dev/null
+++ 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
new file mode 100644
index 000000000..db9fed814
--- /dev/null
+++ 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
deleted file mode 100644
index 496f21123..000000000
--- a/src/styles/_typography-theme.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin docs-site-typography-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);
-
- .docs-component-viewer-tabbed-content,
- .docs-guide-content {
- h1 {
- color: mat-color($primary, 800);
- background: rgba(mat-color($foreground, text), .03);
- }
-
- h3, h2, h4, h5, p, ol, li{
- color: mat-color($foreground, text);
- }
-
- a {
- color: mat-color($primary);
- }
-
- table {
- box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
- }
-
- table tbody th{
- border: 1px solid rgba(mat-color($foreground, text), .03);
- }
-
- td {
- color: mat-color($foreground, text);
- border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
- }
-
- th {
- color: mat-color($foreground, text);
- background: rgba(mat-color($foreground, secondary-text), .03);
- }
- }
-}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
deleted file mode 100644
index b557374ef..000000000
--- a/src/styles/_typography.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@mixin docs-site-typography() {
- .docs-component-viewer-tabbed-content .docs-component-view-text-content,
- .docs-guide-content {
- h1 {
- display:inline-block;
- font-size: 20px;
- font-weight: 400;
- padding: 5px;
- }
-
- h3, h2 {
- font-size: 20px;
- font-weight: 400;
- margin-bottom: 30px;
- margin-top: 80px;
- }
-
- h4 {
- margin-top: 40px;
- }
-
- h5 {
- font-size: 16px;
- }
-
- .mat-tab-body-wrapper h2 {
- margin-top: 0px;
- }
-
- p {
- font-size: 16px;
- line-height: 28px;
- }
-
- a {
- text-decoration: none;
- }
-
- table {
- border-collapse: collapse;
- border-radius: 2px;
- border-spacing: 0;
- margin: 0 0 32px 0;
- width: 100%;
- }
-
- table tbody th {
- max-width: 100px;
- padding: 13px 32px;
- text-align: left;
- }
-
- td {
- font-weight: 400;
- padding: 8px 30px;
-
- p {
- margin: 0;
- }
- }
-
- th {
- font-size: 16px;
- font-weight: 400;
- padding: 13px 32px;
- text-align: left;
- }
- }
-}