@ng-doc/app 17.6.16 → 18.0.0-beta.2

package/styles/main.css

@@ -1,5 +1,4 @@
 @import '@angular/cdk/overlay-prebuilt.css';
-@import 'highlight.js/styles/github.css';
 body {
   --ng-doc-code-margin: var(--ng-doc-page-block-margin);
   --ng-doc-blockquote-margin: var(--ng-doc-page-block-margin);
@@ -14,7 +13,6 @@ html {
 }
 
 iframe.ngde {
-  width: 100%;
   border: 0;
 }
 
@@ -59,10 +57,19 @@ h6.ngde {
   line-height: var(--ng-doc-line-height);
   font-size: var(--ng-doc-font-size);
   font-weight: var(--ng-doc-font-weight);
-  margin: calc(var(--ng-doc-base-gutter) * 9) 0 0;
+  margin: calc(var(--ng-doc-base-gutter) * 7) 0 0;
   --ng-doc-line-height: 1.5rem;
-  --ng-doc-font-weight: 800;
+  --ng-doc-font-weight: 600;
   overflow-wrap: anywhere;
+  color: var(--ng-doc-heading-color);
+}
+h1.ngde.ng-doc-secondary-heading,
+h2.ngde.ng-doc-secondary-heading,
+h3.ngde.ng-doc-secondary-heading,
+h4.ngde.ng-doc-secondary-heading,
+h5.ngde.ng-doc-secondary-heading,
+h6.ngde.ng-doc-secondary-heading {
+  color: var(--ng-doc-text);
 }
 h1.ngde + h1.ngde, h1.ngde + h2.ngde, h1.ngde + h3.ngde, h1.ngde + h4.ngde, h1.ngde + h5.ngde, h1.ngde + h6.ngde,
 h2.ngde + h1.ngde,
@@ -99,38 +106,37 @@ h6.ngde + h6.ngde {
 }
 
 h1.ngde {
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 5);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 5);
-  --ng-doc-font-weight: 900;
+  --ng-doc-font-size: 36px;
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
 }
 
 h2.ngde {
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 4);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 5);
+  --ng-doc-font-size: 26px;
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
 }
 
 h3.ngde {
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 3);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-font-size: 20px;
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
 }
 
 h4.ngde {
-  --ng-doc-font-size: 20px;
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 4);
+  --ng-doc-font-size: 18px;
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2);
   margin: calc(var(--ng-doc-base-gutter) * 2) 0;
 }
 
 h5.ngde,
 h6.ngde {
-  --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
+  --ng-doc-font-size: 15px;
+  --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 2);
   margin: calc(var(--ng-doc-base-gutter) * 2) 0;
 }
 
-pre.ngde {
+pre.shiki {
   margin: var(--ng-doc-page-block-margin);
 }
-pre.ngde code.ngde {
+pre.shiki code {
   position: relative;
   white-space: unset;
   box-shadow: var(--ng-doc-code-shadow);
@@ -139,7 +145,11 @@ pre.ngde code.ngde {
   font-weight: var(--ng-doc-code-font-weight);
   line-height: var(--ng-doc-code-line-height);
   border: var(--ng-doc-code-border);
-  background-color: var(--ng-doc-code-background, inherit);
+  background-color: var(--ng-doc-code-background, inherit) !important;
+  -webkit-font-smoothing: auto;
+}
+pre.shiki code span {
+  background-color: var(--ng-doc-code-background, inherit) !important;
 }
 
 *:not(pre) > code.ngde {
@@ -148,27 +158,12 @@ pre.ngde code.ngde {
   color: var(--ng-doc-inline-code-color);
   padding: calc(var(--ng-doc-base-gutter) / 4) var(--ng-doc-base-gutter);
   font-family: var(--ng-doc-code-font);
-  font-size: var(--ng-doc-code-font-size);
+  font-size: 14px;
   font-weight: var(--ng-doc-code-font-weight);
-  line-height: var(--ng-doc-line-height);
+  line-height: var(--ng-doc-code-line-height, var(--ng-doc-line-height));
+  background: color-mix(in srgb, var(--ng-doc-inline-code-background) 15%, transparent);
   white-space: nowrap;
 }
-*:not(pre) > code.ngde {
-  position: relative;
-}
-*:not(pre) > code.ngde:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--ng-doc-inline-code-background);
-  opacity: 0.15;
-  border-radius: inherit;
-  overflow: hidden;
-  pointer-events: none;
-}
 
 .ng-doc-table-wrapper {
   overflow-x: auto;
@@ -177,22 +172,19 @@ pre.ngde code.ngde {
 table.ngde {
   width: 100%;
   border-spacing: 0;
-  margin: var(--ng-doc-page-block-margin);
 }
 table.ngde thead tr th {
-  padding: var(--ng-doc-base-gutter);
+  padding: calc(var(--ng-doc-base-gutter) * 1.5);
   background-color: var(--ng-doc-base-1);
   text-align: left;
 }
 table.ngde thead tr th:first-child {
   border-top-left-radius: var(--ng-doc-base-gutter);
-  border-bottom-left-radius: var(--ng-doc-base-gutter);
-  padding-left: calc(var(--ng-doc-base-gutter) * 4);
+  padding-left: calc(var(--ng-doc-base-gutter) * 3);
 }
 table.ngde thead tr th:last-child {
-  padding-right: calc(var(--ng-doc-base-gutter) * 4);
+  padding-right: calc(var(--ng-doc-base-gutter) * 3);
   border-top-right-radius: var(--ng-doc-base-gutter);
-  border-bottom-right-radius: var(--ng-doc-base-gutter);
 }
 table.ngde thead tr th h1.ngde,
 table.ngde thead tr th h2.ngde,
@@ -206,13 +198,14 @@ table.ngde thead tr th h6.ngde {
 table.ngde tbody tr td {
   padding: calc(var(--ng-doc-base-gutter) * 2);
   vertical-align: top;
-  border-bottom: 1px solid var(--ng-doc-base-1);
+  border-bottom: 1px solid var(--ng-doc-base-2);
+  background-color: var(--ng-doc-background);
 }
 table.ngde tbody tr td:first-child {
-  padding-left: calc(var(--ng-doc-base-gutter) * 4);
+  padding-left: calc(var(--ng-doc-base-gutter) * 3);
 }
 table.ngde tbody tr td:last-child {
-  padding-right: calc(var(--ng-doc-base-gutter) * 4);
+  padding-right: calc(var(--ng-doc-base-gutter) * 3);
 }
 table.ngde tbody tr td table {
   margin: calc(var(--ng-doc-base-gutter) * 2) 0;
@@ -223,7 +216,7 @@ table.ngde h3.ngde,
 table.ngde h4.ngde,
 table.ngde h5.ngde,
 table.ngde h6.ngde {
-  margin: 0 0 calc(var(--ng-doc-base-gutter) * 2);
+  margin: 0 0 var(--ng-doc-base-gutter);
 }
 
 a.ngde {
@@ -245,6 +238,7 @@ mark.ng-doc-mark {
   --ng-doc-text-selection: rgba(21, 88, 214, 0.15);
   --ng-doc-white: #fff;
   --ng-doc-black: #000;
+  --ng-doc-base-rgb: 0 0 0;
   --ng-doc-base-0: var(--ng-doc-white);
   --ng-doc-base-1: #f6f6f6;
   --ng-doc-base-2: #ebebeb;
@@ -264,6 +258,8 @@ mark.ng-doc-mark {
   --ng-doc-warning-text: var(--ng-doc-white);
   --ng-doc-info: #3f68b5;
   --ng-doc-info-text: var(--ng-doc-white);
+  --ng-doc-success: #00b74a;
+  --ng-doc-success-text: var(--ng-doc-white);
   --ng-doc-background: var(--ng-doc-base-0);
   --ng-doc-hover-background: rgba(110, 110, 110, 0.09);
   --ng-doc-border-size: 1px;
@@ -271,11 +267,12 @@ mark.ng-doc-mark {
   --ng-doc-border-hover-color: var(--ng-doc-base-5);
   --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
   --ng-doc-font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-  	Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  	"Segoe UI Symbol", "Noto Color Emoji";
+    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --ng-doc-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-  	"Liberation Mono", "Courier New", monospace;
+    "Liberation Mono", "Courier New", monospace;
   --ng-doc-heading-font-family: var(--ng-doc-font-system);
+  --ng-doc-heading-color: #111111;
   --ng-doc-font-family: var(--ng-doc-font-system);
   --ng-doc-font-size: calc(var(--ng-doc-base-gutter) * 2);
   --ng-doc-line-height: calc(var(--ng-doc-base-gutter) * 3);
@@ -284,7 +281,7 @@ mark.ng-doc-mark {
   --ng-doc-code-font-size: 14px;
   --ng-doc-code-line-height: 20px;
   --ng-doc-code-font-weight: 400;
-  --ng-doc-text: #111111;
+  --ng-doc-text: rgb(78 78 78);
   --ng-doc-text-muted: var(--ng-doc-base-8);
   --ng-doc-mark-background: rgba(255, 222, 0, 0.3);
   --ng-doc-link-color: var(--ng-doc-primary);
@@ -293,9 +290,9 @@ mark.ng-doc-mark {
   --ng-doc-button-background: trasparent;
   --ng-doc-button-background-opacity: 0;
   --ng-doc-button-color: var(--ng-doc-text);
-  --ng-doc-button-hover-background: var(--ng-doc-base-1);
+  --ng-doc-button-hover-background: var(--ng-doc-base-2);
   --ng-doc-button-hover-color: var(--ng-doc-button-color);
-  --ng-doc-button-active-background: var(--ng-doc-base-2);
+  --ng-doc-button-active-background: var(--ng-doc-base-3);
   --ng-doc-button-active-color: var(--ng-doc-button-hover-color);
   --ng-doc-floated-border-color: transparent;
   --ng-doc-floated-border: 2px solid var(--ng-doc-floated-border-color);
@@ -313,14 +310,12 @@ mark.ng-doc-mark {
   --ng-doc-input-border: var(--ng-doc-border-size) solid var(--ng-doc-border-color);
   --ng-doc-input-border-hover: var(--ng-doc-border-size) solid var(--ng-doc-border-hover-color);
   --ng-doc-input-background-color: var(--ng-doc-base-0);
-  --ng-doc-input-padding-left: calc(var(--ng-doc-base-gutter) * 2);
-  --ng-doc-input-padding-right: calc(var(--ng-doc-base-gutter) * 2);
   --ng-doc-input-cursor: auto;
   /* NgDocTagComponent */
   --ng-doc-tag-background: var(--ng-doc-primary);
   --ng-doc-tag-color: var(--ng-doc-primary-text);
   /* NgDocSelection */
-  --ng-doc-selection-border: 3px solid var(--ng-doc-primary);
+  --ng-doc-selection-border: 2px solid var(--ng-doc-primary);
   --ng-doc-selection-background: transparent;
   /* NgDocDot */
   --ng-doc-dot-size: calc(var(--ng-doc-base-gutter) / 2);
@@ -379,6 +374,10 @@ mark.ng-doc-mark {
   background: var(--ng-doc-background);
 }
 
+.ng-doc-transparent-dialog {
+  background: transparent;
+}
+
 :root {
   --ng-doc-app-max-width: 1450px;
   --ng-doc-app-horizontal-padding: calc(var(--ng-doc-base-gutter) * 3);
@@ -386,6 +385,7 @@ mark.ng-doc-mark {
   --ng-doc-page-padding: calc(var(--ng-doc-base-gutter) * 3) var(--ng-doc-app-horizontal-padding);
   --ng-doc-main-padding: var(--ng-doc-navbar-height) 0 0 0;
   --ng-doc-page-block-margin: calc(var(--ng-doc-base-gutter) * 3) 0;
+  --ng-doc-page-wrapper-tabs-height: calc(var(--ng-doc-base-gutter) * 6);
   --ng-doc-class-color: #fff;
   --ng-doc-class-background: #e74c3c;
   --ng-doc-interface-color: #fff;
@@ -446,8 +446,9 @@ mark.ng-doc-mark {
   --ng-doc-navbar-height: calc(var(--ng-doc-base-gutter) * 7);
   --ng-doc-navbar-horizontal-padding: var(--ng-doc-app-horizontal-padding);
   --ng-doc-navbar-left-width: calc(
-  	var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding)
+    var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding)
   );
+  --ng-doc-navbar-border: 1px solid var(--ng-doc-base-3);
   --ng-doc-sidebar-width: 310px;
   --ng-doc-sidebar-background: var(--ng-doc-base-0);
   --ng-doc-sidebar-padding: calc(var(--ng-doc-base-gutter) * 2);
@@ -459,6 +460,7 @@ mark.ng-doc-mark {
   --ng-doc-code-highlight-color: var(--ng-doc-primary);
   --ng-doc-toc-width: 280px;
   --ng-doc-toc-indent: var(--ng-doc-base-gutter);
+  --ng-doc-toc-top-padding: calc(var(--ng-doc-base-gutter) * 3);
   --ng-doc-search-result-color: #454545;
   --ng-doc-api-tag-color: #ff1111;
   --ng-doc-api-tag-background: rgba(255, 17, 17, 0.15);
@@ -510,11 +512,10 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
   padding: 0 var(--ng-doc-base-gutter);
   font-size: 14px;
   border-radius: var(--ng-doc-base-gutter);
-  background-color: var(--ng-doc-base-2);
-  color: var(--ng-doc-text);
+  background-color: color-mix(in srgb, var(--ng-doc-css-tag-background) var(--ng-doc-css-tag-background-opacity, 15%), transparent);
   vertical-align: middle;
   white-space: nowrap;
-  font-weight: 600;
+  color: var(--ng-doc-css-tag-background);
 }
 .ng-doc-tag + .ng-doc-tag {
   margin-left: var(--ng-doc-base-gutter);
@@ -525,52 +526,40 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
   color: var(--ng-doc-text);
 }
 .ng-doc-tag[data-content=Class] {
-  background-color: var(--ng-doc-class-background);
-  color: var(--ng-doc-class-color);
+  --ng-doc-css-tag-background: var(--ng-doc-class-background);
 }
 .ng-doc-tag[data-content=Interface] {
-  background-color: var(--ng-doc-interface-background);
-  color: var(--ng-doc-interface-color);
+  --ng-doc-css-tag-background: var(--ng-doc-interface-background);
 }
 .ng-doc-tag[data-content=Enum] {
-  background-color: var(--ng-doc-enum-background);
-  color: var(--ng-doc-enum-color);
+  --ng-doc-css-tag-background: var(--ng-doc-enum-background);
 }
 .ng-doc-tag[data-content=Variable] {
-  background-color: var(--ng-doc-variable-background);
-  color: var(--ng-doc-variable-color);
+  --ng-doc-css-tag-background: var(--ng-doc-variable-background);
 }
 .ng-doc-tag[data-content=Function] {
-  background-color: var(--ng-doc-function-background);
-  color: var(--ng-doc-function-color);
+  --ng-doc-css-tag-background: var(--ng-doc-function-background);
 }
 .ng-doc-tag[data-content=TypeAlias] {
-  background-color: var(--ng-doc-type-alias-background);
-  color: var(--ng-doc-type-alias-color);
+  --ng-doc-css-tag-background: var(--ng-doc-type-alias-background);
 }
 .ng-doc-tag[data-content=Component] {
-  background-color: var(--ng-doc-component-decorator-background);
-  color: var(--ng-doc-component-decorator-color);
+  --ng-doc-css-tag-background: var(--ng-doc-component-decorator-background);
 }
 .ng-doc-tag[data-content=Directive] {
-  background-color: var(--ng-doc-directive-decorator-background);
-  color: var(--ng-doc-directive-decorator-color);
+  --ng-doc-css-tag-background: var(--ng-doc-directive-decorator-background);
 }
 .ng-doc-tag[data-content=Injectable] {
-  background-color: var(--ng-doc-injectable-decorator-background);
-  color: var(--ng-doc-injectable-decorator-color);
+  --ng-doc-css-tag-background: var(--ng-doc-injectable-decorator-background);
 }
 .ng-doc-tag[data-content=Pipe] {
-  background-color: var(--ng-doc-pipe-decorator-background);
-  color: var(--ng-doc-pipe-decorator-color);
+  --ng-doc-css-tag-background: var(--ng-doc-pipe-decorator-background);
 }
 .ng-doc-tag[data-content=NgModule] {
-  background-color: var(--ng-doc-ng-module-decorator-background);
-  color: var(--ng-doc-ng-module-decorator-color);
+  --ng-doc-css-tag-background: var(--ng-doc-ng-module-decorator-background);
 }
 .ng-doc-tag[data-content=ng-doc-tag-selector] {
-  background-color: var(--ng-doc-selector-background);
-  color: var(--ng-doc-selector-color);
+  --ng-doc-css-tag-background: var(--ng-doc-selector-background);
 }
 
 .ng-doc-decorators-group {
@@ -708,19 +697,53 @@ article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-ch
   margin: 0;
 }
 
-table.ng-doc-properties-table .ng-doc-properties-table-name {
-  width: 25%;
+.ng-doc-table-wrapper {
+  overflow: auto;
+  margin: var(--ng-doc-page-block-margin);
 }
-table.ng-doc-properties-table .ng-doc-properties-table-type {
-  width: 25%;
+.ng-doc-table-wrapper:last-child {
+  margin-bottom: 0;
 }
 
-table.ng-doc-parameters-table .ng-doc-parameters-table-name {
+table.ng-doc-api-table {
+  overflow: scroll;
+}
+table.ng-doc-api-table.no-full-width {
+  width: unset;
+}
+table.ng-doc-api-table.no-padding tbody tr td,
+table.ng-doc-api-table.no-padding thead tr th {
+  padding: var(--ng-doc-base-gutter);
+}
+table.ng-doc-api-table.no-padding tbody tr td:first-child,
+table.ng-doc-api-table.no-padding thead tr th:first-child {
+  padding-left: 0;
+}
+table.ng-doc-api-table.sticky tr th:first-child,
+table.ng-doc-api-table.sticky tr td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+table.ng-doc-api-table.first-colum-highlighted tr td:first-child {
+  color: var(--ng-doc-heading-color);
+}
+table.ng-doc-api-table tr th.ng-doc-api-table-name {
   width: 25%;
 }
-table.ng-doc-parameters-table .ng-doc-parameters-table-type {
+table.ng-doc-api-table tr th.ng-doc-api-table-type {
   width: 25%;
 }
+table.ng-doc-api-table tr th.ng-doc-api-table-description {
+  min-width: 300px;
+}
+table.ng-doc-api-table tr td > *:not(:last-child) {
+  margin-right: var(--ng-doc-base-gutter);
+}
+
+table.ng-doc-overload-table thead tr th {
+  background: color-mix(in srgb, var(--ng-doc-warning) 10%, transparent);
+}
 
 .ng-doc-no-content {
   color: var(--ng-doc-text-muted);
@@ -732,20 +755,21 @@ code.ng-doc-code-with-link {
   --ng-doc-inline-code-background: var(--ng-doc-link-color);
 }
 
-article h1:hover .ng-doc-header-link,
-article h2:hover .ng-doc-header-link,
-article h3:hover .ng-doc-header-link,
-article h4:hover .ng-doc-header-link,
-article h5:hover .ng-doc-header-link,
-article h6:hover .ng-doc-header-link {
+article h1:hover .ng-doc-anchor,
+article h2:hover .ng-doc-anchor,
+article h3:hover .ng-doc-anchor,
+article h4:hover .ng-doc-anchor,
+article h5:hover .ng-doc-anchor,
+article h6:hover .ng-doc-anchor {
   opacity: 1;
 }
-article h1 .ng-doc-header-link,
-article h2 .ng-doc-header-link,
-article h3 .ng-doc-header-link,
-article h4 .ng-doc-header-link,
-article h5 .ng-doc-header-link,
-article h6 .ng-doc-header-link {
+article h1 .ng-doc-anchor,
+article h2 .ng-doc-anchor,
+article h3 .ng-doc-anchor,
+article h4 .ng-doc-anchor,
+article h5 .ng-doc-anchor,
+article h6 .ng-doc-anchor {
+  margin-left: var(--ng-doc-base-gutter);
   opacity: 0;
   transition: var(--ng-doc-transition);
 }
@@ -760,11 +784,9 @@ article .ng-doc-page-wrapper > h6:first-child {
 article section.ngde {
   margin-bottom: calc(var(--ng-doc-base-gutter) * 5);
 }
-article header.ngde {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: calc(var(--ng-doc-base-gutter) * 3);
+article header.ngde .ng-doc-declaration-details {
+  list-style: none;
+  padding: 0;
 }
 article header.ngde .ng-doc-page-tags {
   display: inline-flex;
@@ -807,3 +829,25 @@ article .ng-doc-header-link {
 article pre code .ng-doc-code-anchor {
   color: inherit;
 }
+
+.ng-doc-deprecated {
+  text-decoration: line-through;
+}
+.ng-doc-deprecated:hover {
+  text-decoration: auto;
+}
+
+.ng-doc-api-status {
+  display: inline-block;
+  width: 100%;
+}
+.ng-doc-api-status > *:first-child {
+  margin-top: 0 !important;
+}
+.ng-doc-api-status:empty {
+  display: none;
+}
+
+.ng-doc-deprecated-notes {
+  color: var(--ng-doc-warning-text);
+}

package/styles/themes/dark.css

@@ -0,0 +1,71 @@
+@media (prefers-color-scheme: dark) {
+  :root[data-theme=auto] {
+    --ng-doc-base-rgb: 43 43 43;
+    --ng-doc-base-0: #1e1e1e;
+    --ng-doc-base-1: #262626;
+    --ng-doc-base-2: #2d2d2d;
+    --ng-doc-base-3: #353535;
+    --ng-doc-base-4: #3e3e3e;
+    --ng-doc-base-5: #484848;
+    --ng-doc-base-6: #515151;
+    --ng-doc-base-7: #5b5b5b;
+    --ng-doc-base-8: #656565;
+    --ng-doc-base-9: #707070;
+    --ng-doc-base-10: #7b7b7b;
+    --ng-doc-heading-color: #e3e3e3;
+    --ng-doc-text: #a9a9a9;
+    --ng-doc-text-muted: var(--ng-doc-base-10);
+    --ng-doc-text-selection: rgba(110, 110, 110, 0.81);
+    --ng-doc-shadow-color: rgba(0, 0, 0, 0.4);
+    --ng-doc-link-color: #30a5ff;
+    --ng-doc-inline-code-background: #b9b9b9;
+    --ng-doc-primary: #faab00;
+    --ng-doc-info: #7095ff;
+    --ng-doc-mark-background: rgba(48, 165, 255, 0.3);
+    --ng-doc-search-result-color: #c6c6c6;
+    --ng-doc-api-tag-background: #ff5959;
+    --ng-doc-api-tag-color: var(--ng-doc-base-0);
+    --ng-doc-guide-tag-background: #faab00;
+    --ng-doc-guide-tag-color: var(--ng-doc-base-0);
+    --ng-doc-navbar-border: 1px solid var(--ng-doc-base-4);
+  }
+  :root[data-theme=auto] .shiki,
+  :root[data-theme=auto] .shiki span {
+    color: var(--shiki-dark) !important;
+  }
+}
+
+:root[data-theme=dark] {
+  --ng-doc-base-rgb: 43 43 43;
+  --ng-doc-base-0: #1e1e1e;
+  --ng-doc-base-1: #262626;
+  --ng-doc-base-2: #2d2d2d;
+  --ng-doc-base-3: #353535;
+  --ng-doc-base-4: #3e3e3e;
+  --ng-doc-base-5: #484848;
+  --ng-doc-base-6: #515151;
+  --ng-doc-base-7: #5b5b5b;
+  --ng-doc-base-8: #656565;
+  --ng-doc-base-9: #707070;
+  --ng-doc-base-10: #7b7b7b;
+  --ng-doc-heading-color: #e3e3e3;
+  --ng-doc-text: #a9a9a9;
+  --ng-doc-text-muted: var(--ng-doc-base-10);
+  --ng-doc-text-selection: rgba(110, 110, 110, 0.81);
+  --ng-doc-shadow-color: rgba(0, 0, 0, 0.4);
+  --ng-doc-link-color: #30a5ff;
+  --ng-doc-inline-code-background: #b9b9b9;
+  --ng-doc-primary: #faab00;
+  --ng-doc-info: #7095ff;
+  --ng-doc-mark-background: rgba(48, 165, 255, 0.3);
+  --ng-doc-search-result-color: #c6c6c6;
+  --ng-doc-api-tag-background: #ff5959;
+  --ng-doc-api-tag-color: var(--ng-doc-base-0);
+  --ng-doc-guide-tag-background: #faab00;
+  --ng-doc-guide-tag-color: var(--ng-doc-base-0);
+  --ng-doc-navbar-border: 1px solid var(--ng-doc-base-4);
+}
+:root[data-theme=dark] .shiki,
+:root[data-theme=dark] .shiki span {
+  color: var(--shiki-dark) !important;
+}

package/tokens/index.d.ts

@@ -1,6 +1,8 @@
-export * from './api-list';
 export * from './context';
+export * from './mermaid';
 export * from './page-processor';
 export * from './page-skeleton';
+export * from './route-prefix';
+export * from './shiki-theme';
 export * from './theme';
 export * from './type-control';

package/tokens/mermaid.d.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+import type { Mermaid } from 'mermaid';
+export declare const NG_DOC_MERMAID: InjectionToken<Mermaid>;

package/tokens/page-processor.d.ts

@@ -7,7 +7,7 @@ export declare const NG_DOC_PAGE_CUSTOM_PROCESSOR: InjectionToken<NgDocPageProce
  * Main processors are run before custom processors.
  * @param processors - The processor to provide.
  */
-export declare function provideMainPageProcessor<T>(processors: NgDocPageProcessor<T> | Array<NgDocPageProcessor<T>>): Provider[];
+export declare function provideMainPageProcessor(processors: NgDocPageProcessor<unknown> | Array<NgDocPageProcessor<unknown>>): Provider[];
 /**
  * Provide a processor to replace html nodes with an Angular component.
  * @param processors - The processor to provide.

package/tokens/route-prefix.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export declare const NG_DOC_ROUTE_PREFIX: InjectionToken<string>;

package/tokens/shiki-theme.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+export interface NgDocShikiTheme {
+    light: string;
+    dark: string;
+}
+export declare const NG_DOC_SHIKI_THEME: InjectionToken<NgDocShikiTheme>;