@ng-doc/app 16.13.1 → 16.15.0

package/styles/main.css

@@ -147,7 +147,6 @@ pre.ngde code.ngde {
 *:not(pre) > code.ngde {
   vertical-align: bottom;
   border-radius: calc(var(--ng-doc-base-gutter) / 2);
-  background-color: var(--ng-doc-inline-code-background);
   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);
@@ -156,6 +155,22 @@ pre.ngde code.ngde {
   line-height: var(--ng-doc-line-height);
   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;
@@ -222,38 +237,40 @@ a.ngde:hover {
 }
 
 mark.ng-doc-mark {
-  background-color: var(--ng-doc-mark-background, var(--ng-doc-ember-30));
+  background-color: var(--ng-doc-mark-background);
   color: var(--ng-doc-mark-color, inherit);
 }
 
-/*
- Original sources
- https://github.com/heygrady/scss-blend-modes/blob/master/stylesheets/_blend-modes.scss
-*/
 :root {
   --ng-doc-base-gutter: 8px;
   --ng-doc-transition: 0.2s;
+  --ng-doc-text-selection: rgba(21, 88, 214, 0.15);
+  --ng-doc-white: #fff;
+  --ng-doc-black: #000;
   --ng-doc-base-0: var(--ng-doc-white);
-  --ng-doc-base-1: var(--ng-doc-grey-10);
-  --ng-doc-base-2: var(--ng-doc-grey-20);
-  --ng-doc-base-3: var(--ng-doc-grey-30);
-  --ng-doc-base-4: var(--ng-doc-grey-40);
-  --ng-doc-base-5: var(--ng-doc-grey-50);
-  --ng-doc-base-6: var(--ng-doc-grey-60);
-  --ng-doc-base-7: var(--ng-doc-grey-70);
-  --ng-doc-base-8: var(--ng-doc-grey-90);
-  --ng-doc-base-9: var(--ng-doc-grey-100);
-  --ng-doc-base-10: var(--ng-doc-grey-110);
-  --ng-doc-base-11: var(--ng-doc-grey-180);
-  --ng-doc-primary: var(--ng-doc-blue-100);
-  --ng-doc-primary-rgb: var(--ng-doc-blue-rgb);
+  --ng-doc-base-1: #f6f6f6;
+  --ng-doc-base-2: #ebebeb;
+  --ng-doc-base-3: #dedede;
+  --ng-doc-base-4: #d1d1d1;
+  --ng-doc-base-5: #b8b8b8;
+  --ng-doc-base-6: #ababab;
+  --ng-doc-base-7: #9e9e9e;
+  --ng-doc-base-8: #919191;
+  --ng-doc-base-9: #858585;
+  --ng-doc-base-10: #6e6e6e;
+  --ng-doc-primary: #1558d6;
   --ng-doc-primary-text: var(--ng-doc-white);
-  --ng-doc-hover: var(--ng-doc-ember-20);
-  --ng-doc-active: var(--ng-doc-ember-40);
+  --ng-doc-alert: #ff5959;
+  --ng-doc-alert-text: var(--ng-doc-white);
+  --ng-doc-warning: #ff9f1a;
+  --ng-doc-warning-text: var(--ng-doc-white);
+  --ng-doc-info: #3f68b5;
+  --ng-doc-info-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;
-  --ng-doc-border-color: var(--ng-doc-base-1);
-  --ng-doc-border-hover-color: var(--ng-doc-base-3);
+  --ng-doc-border-color: var(--ng-doc-base-3);
+  --ng-doc-border-hover-color: var(--ng-doc-base-5);
   --ng-doc-shadow-color: rgba(0, 0, 0, 0.15);
   --ng-doc-heading-font-family: "Nunito", sans-serif;
   --ng-doc-font-family: "Nunito Sans", sans-serif;
@@ -264,14 +281,14 @@ mark.ng-doc-mark {
   --ng-doc-code-font-size: 14px;
   --ng-doc-code-line-height: 20px;
   --ng-doc-code-font-weight: 600;
-  --ng-doc-text: var(--ng-doc-base-11);
-  --ng-doc-text-inversed: var(--ng-doc-base-0);
+  --ng-doc-text: #111111;
   --ng-doc-text-muted: var(--ng-doc-base-8);
-  --ng-doc-link-color: var(--ng-doc-blue-100);
-  --ng-doc-link-color-rgb: var(--ng-doc-blue-rgb);
-  --ng-doc-inline-code-background: var(--ng-doc-base-2);
+  --ng-doc-mark-background: rgba(255, 222, 0, 0.3);
+  --ng-doc-link-color: var(--ng-doc-primary);
+  --ng-doc-inline-code-background: var(--ng-doc-base-9);
   --ng-doc-inline-code-color: var(--ng-doc-text);
   --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-color: var(--ng-doc-button-color);
@@ -300,22 +317,21 @@ mark.ng-doc-mark {
   --ng-doc-tag-background: var(--ng-doc-primary);
   --ng-doc-tag-color: var(--ng-doc-primary-text);
   /* NgDocSelection */
-  --ng-doc-selection-border: 4px solid var(--ng-doc-primary);
+  --ng-doc-selection-border: 3px solid var(--ng-doc-primary);
   --ng-doc-selection-background: transparent;
   /* NgDocDot */
   --ng-doc-dot-size: calc(var(--ng-doc-base-gutter) / 2);
   --ng-doc-dot-background: var(--ng-doc-primary);
   /* Sidenav */
   --ng-doc-sidenav-width: 300px;
-  /* Tabs */
-  --ng-doc-tabs-margin: calc(var(--ng-doc-base-gutter) * 4) 0px;
-  --ng-doc-tabs-border: 1px solid var(--ng-doc-base-2);
-  --ng-doc-tabs-border-radius: var(--ng-doc-base-gutter);
+  /* TabGroup */
+  --ng-doc-tab-group-border-radius: var(--ng-doc-base-gutter);
+  --ng-doc-tab-group-border: 1px solid var(--ng-doc-border-color);
 }
 
 .ng-doc-tooltip {
-  --ng-doc-overlay-background: var(--ng-doc-base-11);
-  --ng-doc-overlay-border: var(--ng-doc-base-11);
+  --ng-doc-overlay-background: var(--ng-doc-tooltip-background, var(--ng-doc-base-10));
+  --ng-doc-overlay-border: var(--ng-doc-tooltip-border, var(--ng-doc-base-10));
   --ng-doc-overlay-border-radius: calc(var(--ng-doc-base-gutter) / 2);
 }
 .ng-doc-tooltip .ng-doc-overlay-content {
@@ -337,8 +353,8 @@ mark.ng-doc-mark {
 }
 
 .ng-doc-notify {
-  --ng-doc-overlay-background: var(--ng-doc-base-11);
-  --ng-doc-overlay-border: var(--ng-doc-base-11);
+  --ng-doc-overlay-background: var(--ng-doc-base-10);
+  --ng-doc-overlay-border: var(--ng-doc-base-10);
   --ng-doc-overlay-border-radius: calc(var(--ng-doc-base-gutter) / 2);
 }
 .ng-doc-notify .ng-doc-overlay-content {
@@ -356,351 +372,6 @@ mark.ng-doc-mark {
   --ng-doc-text: var(--ng-doc-base-0);
 }
 
-:root {
-  --ng-doc-red-rgb: 255, 0, 0;
-  --ng-doc-red-10: rgba(255, 1, 1, 0.1);
-  --ng-doc-red-20: rgba(255, 1, 1, 0.2);
-  --ng-doc-red-30: rgba(255, 0, 0, 0.3);
-  --ng-doc-red-40: rgba(255, 0, 0, 0.4);
-  --ng-doc-red-50: rgba(255, 0, 0, 0.5);
-  --ng-doc-red-60: rgba(255, 0, 0, 0.6);
-  --ng-doc-red-70: rgba(255, 0, 0, 0.7);
-  --ng-doc-red-80: rgba(255, 0, 0, 0.8);
-  --ng-doc-red-90: rgba(255, 0, 0, 0.9);
-  --ng-doc-red-100: #ff0000;
-  --ng-doc-red-110: rgb(249, 0, 0);
-  --ng-doc-red-120: rgb(242, 0, 0);
-  --ng-doc-red-130: rgb(233, 0, 0);
-  --ng-doc-red-140: rgb(230, 0, 0);
-  --ng-doc-red-150: rgb(223, 0, 0);
-  --ng-doc-red-160: rgb(217, 0, 0);
-  --ng-doc-red-170: rgb(182, 0, 0);
-  --ng-doc-red-180: rgb(204, 0, 0);
-  --ng-doc-red-190: rgb(198, 0, 0);
-  --ng-doc-pink-rgb: 255, 0, 102;
-  --ng-doc-pink-10: rgba(255, 1, 136, 0.1);
-  --ng-doc-pink-20: rgba(255, 1, 133, 0.2);
-  --ng-doc-pink-30: rgba(255, 0, 130, 0.3);
-  --ng-doc-pink-40: rgba(255, 0, 127, 0.4);
-  --ng-doc-pink-50: rgba(255, 0, 124, 0.5);
-  --ng-doc-pink-60: rgba(255, 0, 121, 0.6);
-  --ng-doc-pink-70: rgba(255, 0, 118, 0.7);
-  --ng-doc-pink-80: rgba(255, 0, 114, 0.8);
-  --ng-doc-pink-90: rgba(255, 0, 111, 0.9);
-  --ng-doc-pink-100: #ff0066;
-  --ng-doc-pink-110: rgb(249, 0, 94);
-  --ng-doc-pink-120: rgb(242, 0, 86);
-  --ng-doc-pink-130: rgb(233, 0, 77);
-  --ng-doc-pink-140: rgb(230, 0, 70);
-  --ng-doc-pink-150: rgb(223, 0, 63);
-  --ng-doc-pink-160: rgb(217, 0, 55);
-  --ng-doc-pink-170: rgb(182, 0, 42);
-  --ng-doc-pink-180: rgb(204, 0, 42);
-  --ng-doc-pink-190: rgb(198, 0, 36);
-  --ng-doc-purple-rgb: 204, 0, 204;
-  --ng-doc-purple-10: rgba(227, 1, 227, 0.1);
-  --ng-doc-purple-20: rgba(225, 1, 225, 0.2);
-  --ng-doc-purple-30: rgba(222, 0, 222, 0.3);
-  --ng-doc-purple-40: rgba(220, 0, 220, 0.4);
-  --ng-doc-purple-50: rgba(218, 0, 218, 0.5);
-  --ng-doc-purple-60: rgba(216, 0, 216, 0.6);
-  --ng-doc-purple-70: rgba(214, 0, 214, 0.7);
-  --ng-doc-purple-80: rgba(212, 0, 212, 0.8);
-  --ng-doc-purple-90: rgba(210, 0, 210, 0.9);
-  --ng-doc-purple-100: #cc00cc;
-  --ng-doc-purple-110: rgb(195, 0, 195);
-  --ng-doc-purple-120: rgb(186, 0, 186);
-  --ng-doc-purple-130: rgb(176, 0, 176);
-  --ng-doc-purple-140: rgb(169, 0, 169);
-  --ng-doc-purple-150: rgb(161, 0, 161);
-  --ng-doc-purple-160: rgb(152, 0, 152);
-  --ng-doc-purple-170: rgb(125, 0, 125);
-  --ng-doc-purple-180: rgb(137, 0, 137);
-  --ng-doc-purple-190: rgb(129, 0, 129);
-  --ng-doc-deep-purple-rgb: 153, 0, 204;
-  --ng-doc-deep-purple-10: rgba(187, 1, 227, 0.1);
-  --ng-doc-deep-purple-20: rgba(184, 1, 225, 0.2);
-  --ng-doc-deep-purple-30: rgba(180, 0, 222, 0.3);
-  --ng-doc-deep-purple-40: rgba(177, 0, 220, 0.4);
-  --ng-doc-deep-purple-50: rgba(174, 0, 218, 0.5);
-  --ng-doc-deep-purple-60: rgba(171, 0, 216, 0.6);
-  --ng-doc-deep-purple-70: rgba(168, 0, 214, 0.7);
-  --ng-doc-deep-purple-80: rgba(165, 0, 212, 0.8);
-  --ng-doc-deep-purple-90: rgba(162, 0, 210, 0.9);
-  --ng-doc-deep-purple-100: #9900cc;
-  --ng-doc-deep-purple-110: rgb(143, 0, 195);
-  --ng-doc-deep-purple-120: rgb(134, 0, 186);
-  --ng-doc-deep-purple-130: rgb(124, 0, 176);
-  --ng-doc-deep-purple-140: rgb(116, 0, 169);
-  --ng-doc-deep-purple-150: rgb(108, 0, 161);
-  --ng-doc-deep-purple-160: rgb(99, 0, 152);
-  --ng-doc-deep-purple-170: rgb(79, 0, 125);
-  --ng-doc-deep-purple-180: rgb(83, 0, 137);
-  --ng-doc-deep-purple-190: rgb(76, 0, 129);
-  --ng-doc-indigo-rgb: 102, 0, 204;
-  --ng-doc-indigo-10: rgba(136, 1, 227, 0.1);
-  --ng-doc-indigo-20: rgba(133, 1, 225, 0.2);
-  --ng-doc-indigo-30: rgba(130, 0, 222, 0.3);
-  --ng-doc-indigo-40: rgba(127, 0, 220, 0.4);
-  --ng-doc-indigo-50: rgba(124, 0, 218, 0.5);
-  --ng-doc-indigo-60: rgba(121, 0, 216, 0.6);
-  --ng-doc-indigo-70: rgba(118, 0, 214, 0.7);
-  --ng-doc-indigo-80: rgba(114, 0, 212, 0.8);
-  --ng-doc-indigo-90: rgba(111, 0, 210, 0.9);
-  --ng-doc-indigo-100: #6600cc;
-  --ng-doc-indigo-110: rgb(94, 0, 195);
-  --ng-doc-indigo-120: rgb(86, 0, 186);
-  --ng-doc-indigo-130: rgb(77, 0, 176);
-  --ng-doc-indigo-140: rgb(70, 0, 169);
-  --ng-doc-indigo-150: rgb(63, 0, 161);
-  --ng-doc-indigo-160: rgb(55, 0, 152);
-  --ng-doc-indigo-170: rgb(42, 0, 125);
-  --ng-doc-indigo-180: rgb(42, 0, 137);
-  --ng-doc-indigo-190: rgb(36, 0, 129);
-  --ng-doc-blue-rgb: 0, 102, 204;
-  --ng-doc-blue-10: rgba(1, 136, 227, 0.1);
-  --ng-doc-blue-20: rgba(1, 133, 225, 0.2);
-  --ng-doc-blue-30: rgba(0, 130, 222, 0.3);
-  --ng-doc-blue-40: rgba(0, 127, 220, 0.4);
-  --ng-doc-blue-50: rgba(0, 124, 218, 0.5);
-  --ng-doc-blue-60: rgba(0, 121, 216, 0.6);
-  --ng-doc-blue-70: rgba(0, 118, 214, 0.7);
-  --ng-doc-blue-80: rgba(0, 114, 212, 0.8);
-  --ng-doc-blue-90: rgba(0, 111, 210, 0.9);
-  --ng-doc-blue-100: #0066cc;
-  --ng-doc-blue-110: rgb(0, 94, 195);
-  --ng-doc-blue-120: rgb(0, 86, 186);
-  --ng-doc-blue-130: rgb(0, 77, 176);
-  --ng-doc-blue-140: rgb(0, 70, 169);
-  --ng-doc-blue-150: rgb(0, 63, 161);
-  --ng-doc-blue-160: rgb(0, 55, 152);
-  --ng-doc-blue-170: rgb(0, 42, 125);
-  --ng-doc-blue-180: rgb(0, 42, 137);
-  --ng-doc-blue-190: rgb(0, 36, 129);
-  --ng-doc-light-blue-rgb: 0, 153, 204;
-  --ng-doc-light-blue-10: rgba(1, 187, 227, 0.1);
-  --ng-doc-light-blue-20: rgba(1, 184, 225, 0.2);
-  --ng-doc-light-blue-30: rgba(0, 180, 222, 0.3);
-  --ng-doc-light-blue-40: rgba(0, 177, 220, 0.4);
-  --ng-doc-light-blue-50: rgba(0, 174, 218, 0.5);
-  --ng-doc-light-blue-60: rgba(0, 171, 216, 0.6);
-  --ng-doc-light-blue-70: rgba(0, 168, 214, 0.7);
-  --ng-doc-light-blue-80: rgba(0, 165, 212, 0.8);
-  --ng-doc-light-blue-90: rgba(0, 162, 210, 0.9);
-  --ng-doc-light-blue-100: #0099cc;
-  --ng-doc-light-blue-110: rgb(0, 143, 195);
-  --ng-doc-light-blue-120: rgb(0, 134, 186);
-  --ng-doc-light-blue-130: rgb(0, 124, 176);
-  --ng-doc-light-blue-140: rgb(0, 116, 169);
-  --ng-doc-light-blue-150: rgb(0, 108, 161);
-  --ng-doc-light-blue-160: rgb(0, 99, 152);
-  --ng-doc-light-blue-170: rgb(0, 79, 125);
-  --ng-doc-light-blue-180: rgb(0, 83, 137);
-  --ng-doc-light-blue-190: rgb(0, 76, 129);
-  --ng-doc-cian-rgb: 0, 204, 204;
-  --ng-doc-cian-10: rgba(1, 227, 227, 0.1);
-  --ng-doc-cian-20: rgba(1, 225, 225, 0.2);
-  --ng-doc-cian-30: rgba(0, 222, 222, 0.3);
-  --ng-doc-cian-40: rgba(0, 220, 220, 0.4);
-  --ng-doc-cian-50: rgba(0, 218, 218, 0.5);
-  --ng-doc-cian-60: rgba(0, 216, 216, 0.6);
-  --ng-doc-cian-70: rgba(0, 214, 214, 0.7);
-  --ng-doc-cian-80: rgba(0, 212, 212, 0.8);
-  --ng-doc-cian-90: rgba(0, 210, 210, 0.9);
-  --ng-doc-cian-100: #00cccc;
-  --ng-doc-cian-110: rgb(0, 195, 195);
-  --ng-doc-cian-120: rgb(0, 186, 186);
-  --ng-doc-cian-130: rgb(0, 176, 176);
-  --ng-doc-cian-140: rgb(0, 169, 169);
-  --ng-doc-cian-150: rgb(0, 161, 161);
-  --ng-doc-cian-160: rgb(0, 152, 152);
-  --ng-doc-cian-170: rgb(0, 125, 125);
-  --ng-doc-cian-180: rgb(0, 137, 137);
-  --ng-doc-cian-190: rgb(0, 129, 129);
-  --ng-doc-teal-rgb: 4, 191, 139;
-  --ng-doc-teal-10: rgba(7, 217, 174, 0.1);
-  --ng-doc-teal-20: rgba(7, 215, 171, 0.2);
-  --ng-doc-teal-30: rgba(6, 213, 167, 0.3);
-  --ng-doc-teal-40: rgba(6, 210, 164, 0.4);
-  --ng-doc-teal-50: rgba(6, 208, 161, 0.5);
-  --ng-doc-teal-60: rgba(6, 205, 158, 0.6);
-  --ng-doc-teal-70: rgba(5, 203, 155, 0.7);
-  --ng-doc-teal-80: rgba(5, 201, 152, 0.8);
-  --ng-doc-teal-90: rgba(5, 198, 148, 0.9);
-  --ng-doc-teal-100: #04bf8b;
-  --ng-doc-teal-110: rgb(4, 181, 130);
-  --ng-doc-teal-120: rgb(3, 172, 120);
-  --ng-doc-teal-130: rgb(3, 162, 110);
-  --ng-doc-teal-140: rgb(2, 155, 103);
-  --ng-doc-teal-150: rgb(2, 146, 95);
-  --ng-doc-teal-160: rgb(2, 138, 86);
-  --ng-doc-teal-170: rgb(1, 112, 68);
-  --ng-doc-teal-180: rgb(1, 122, 71);
-  --ng-doc-teal-190: rgb(0, 115, 64);
-  --ng-doc-green-rgb: 0, 204, 0;
-  --ng-doc-green-10: rgba(1, 227, 1, 0.1);
-  --ng-doc-green-20: rgba(1, 225, 1, 0.2);
-  --ng-doc-green-30: rgba(0, 222, 0, 0.3);
-  --ng-doc-green-40: rgba(0, 220, 0, 0.4);
-  --ng-doc-green-50: rgba(0, 218, 0, 0.5);
-  --ng-doc-green-60: rgba(0, 216, 0, 0.6);
-  --ng-doc-green-70: rgba(0, 214, 0, 0.7);
-  --ng-doc-green-80: rgba(0, 212, 0, 0.8);
-  --ng-doc-green-90: rgba(0, 210, 0, 0.9);
-  --ng-doc-green-100: #00cc00;
-  --ng-doc-green-110: rgb(0, 195, 0);
-  --ng-doc-green-120: rgb(0, 186, 0);
-  --ng-doc-green-130: rgb(0, 176, 0);
-  --ng-doc-green-140: rgb(0, 169, 0);
-  --ng-doc-green-150: rgb(0, 161, 0);
-  --ng-doc-green-160: rgb(0, 152, 0);
-  --ng-doc-green-170: rgb(0, 125, 0);
-  --ng-doc-green-180: rgb(0, 137, 0);
-  --ng-doc-green-190: rgb(0, 129, 0);
-  --ng-doc-light-green-rgb: 0, 204, 51;
-  --ng-doc-light-green-10: rgba(1, 227, 74, 0.1);
-  --ng-doc-light-green-20: rgba(1, 225, 72, 0.2);
-  --ng-doc-light-green-30: rgba(0, 222, 69, 0.3);
-  --ng-doc-light-green-40: rgba(0, 220, 67, 0.4);
-  --ng-doc-light-green-50: rgba(0, 218, 65, 0.5);
-  --ng-doc-light-green-60: rgba(0, 216, 63, 0.6);
-  --ng-doc-light-green-70: rgba(0, 214, 61, 0.7);
-  --ng-doc-light-green-80: rgba(0, 212, 59, 0.8);
-  --ng-doc-light-green-90: rgba(0, 210, 57, 0.9);
-  --ng-doc-light-green-100: #00cc33;
-  --ng-doc-light-green-110: rgb(0, 195, 46);
-  --ng-doc-light-green-120: rgb(0, 186, 41);
-  --ng-doc-light-green-130: rgb(0, 176, 36);
-  --ng-doc-light-green-140: rgb(0, 169, 32);
-  --ng-doc-light-green-150: rgb(0, 161, 27);
-  --ng-doc-light-green-160: rgb(0, 152, 22);
-  --ng-doc-light-green-170: rgb(0, 125, 16);
-  --ng-doc-light-green-180: rgb(0, 137, 14);
-  --ng-doc-light-green-190: rgb(0, 129, 11);
-  --ng-doc-lime-rgb: 153, 255, 0;
-  --ng-doc-lime-10: rgba(187, 255, 1, 0.1);
-  --ng-doc-lime-20: rgba(184, 255, 1, 0.2);
-  --ng-doc-lime-30: rgba(180, 255, 0, 0.3);
-  --ng-doc-lime-40: rgba(177, 255, 0, 0.4);
-  --ng-doc-lime-50: rgba(174, 255, 0, 0.5);
-  --ng-doc-lime-60: rgba(171, 255, 0, 0.6);
-  --ng-doc-lime-70: rgba(168, 255, 0, 0.7);
-  --ng-doc-lime-80: rgba(165, 255, 0, 0.8);
-  --ng-doc-lime-90: rgba(162, 255, 0, 0.9);
-  --ng-doc-lime-100: #99ff00;
-  --ng-doc-lime-110: rgb(143, 249, 0);
-  --ng-doc-lime-120: rgb(134, 242, 0);
-  --ng-doc-lime-130: rgb(124, 233, 0);
-  --ng-doc-lime-140: rgb(116, 230, 0);
-  --ng-doc-lime-150: rgb(108, 223, 0);
-  --ng-doc-lime-160: rgb(99, 217, 0);
-  --ng-doc-lime-170: rgb(79, 182, 0);
-  --ng-doc-lime-180: rgb(83, 204, 0);
-  --ng-doc-lime-190: rgb(76, 198, 0);
-  --ng-doc-yellow-rgb: 255, 255, 0;
-  --ng-doc-yellow-10: rgba(255, 255, 1, 0.1);
-  --ng-doc-yellow-20: rgba(255, 255, 1, 0.2);
-  --ng-doc-yellow-30: rgba(255, 255, 0, 0.3);
-  --ng-doc-yellow-40: rgba(255, 255, 0, 0.4);
-  --ng-doc-yellow-50: rgba(255, 255, 0, 0.5);
-  --ng-doc-yellow-60: rgba(255, 255, 0, 0.6);
-  --ng-doc-yellow-70: rgba(255, 255, 0, 0.7);
-  --ng-doc-yellow-80: rgba(255, 255, 0, 0.8);
-  --ng-doc-yellow-90: rgba(255, 255, 0, 0.9);
-  --ng-doc-yellow-100: #ffff00;
-  --ng-doc-yellow-110: rgb(249, 249, 0);
-  --ng-doc-yellow-120: rgb(242, 242, 0);
-  --ng-doc-yellow-130: rgb(233, 233, 0);
-  --ng-doc-yellow-140: rgb(230, 230, 0);
-  --ng-doc-yellow-150: rgb(223, 223, 0);
-  --ng-doc-yellow-160: rgb(217, 217, 0);
-  --ng-doc-yellow-170: rgb(182, 182, 0);
-  --ng-doc-yellow-180: rgb(204, 204, 0);
-  --ng-doc-yellow-190: rgb(198, 198, 0);
-  --ng-doc-ember-rgb: 255, 204, 0;
-  --ng-doc-ember-10: rgba(255, 227, 1, 0.1);
-  --ng-doc-ember-20: rgba(255, 225, 1, 0.2);
-  --ng-doc-ember-30: rgba(255, 222, 0, 0.3);
-  --ng-doc-ember-40: rgba(255, 220, 0, 0.4);
-  --ng-doc-ember-50: rgba(255, 218, 0, 0.5);
-  --ng-doc-ember-60: rgba(255, 216, 0, 0.6);
-  --ng-doc-ember-70: rgba(255, 214, 0, 0.7);
-  --ng-doc-ember-80: rgba(255, 212, 0, 0.8);
-  --ng-doc-ember-90: rgba(255, 210, 0, 0.9);
-  --ng-doc-ember-100: #ffcc00;
-  --ng-doc-ember-110: rgb(249, 195, 0);
-  --ng-doc-ember-120: rgb(242, 186, 0);
-  --ng-doc-ember-130: rgb(233, 176, 0);
-  --ng-doc-ember-140: rgb(230, 169, 0);
-  --ng-doc-ember-150: rgb(223, 161, 0);
-  --ng-doc-ember-160: rgb(217, 152, 0);
-  --ng-doc-ember-170: rgb(182, 125, 0);
-  --ng-doc-ember-180: rgb(204, 137, 0);
-  --ng-doc-ember-190: rgb(198, 129, 0);
-  --ng-doc-orange-rgb: 255, 153, 0;
-  --ng-doc-orange-10: rgba(255, 187, 1, 0.1);
-  --ng-doc-orange-20: rgba(255, 184, 1, 0.2);
-  --ng-doc-orange-30: rgba(255, 180, 0, 0.3);
-  --ng-doc-orange-40: rgba(255, 177, 0, 0.4);
-  --ng-doc-orange-50: rgba(255, 174, 0, 0.5);
-  --ng-doc-orange-60: rgba(255, 171, 0, 0.6);
-  --ng-doc-orange-70: rgba(255, 168, 0, 0.7);
-  --ng-doc-orange-80: rgba(255, 165, 0, 0.8);
-  --ng-doc-orange-90: rgba(255, 162, 0, 0.9);
-  --ng-doc-orange-100: #ff9900;
-  --ng-doc-orange-110: rgb(249, 143, 0);
-  --ng-doc-orange-120: rgb(242, 134, 0);
-  --ng-doc-orange-130: rgb(233, 124, 0);
-  --ng-doc-orange-140: rgb(230, 116, 0);
-  --ng-doc-orange-150: rgb(223, 108, 0);
-  --ng-doc-orange-160: rgb(217, 99, 0);
-  --ng-doc-orange-170: rgb(182, 79, 0);
-  --ng-doc-orange-180: rgb(204, 83, 0);
-  --ng-doc-orange-190: rgb(198, 76, 0);
-  --ng-doc-deep-orange-rgb: 255, 102, 0;
-  --ng-doc-deep-orange-10: rgba(255, 136, 1, 0.1);
-  --ng-doc-deep-orange-20: rgba(255, 133, 1, 0.2);
-  --ng-doc-deep-orange-30: rgba(255, 130, 0, 0.3);
-  --ng-doc-deep-orange-40: rgba(255, 127, 0, 0.4);
-  --ng-doc-deep-orange-50: rgba(255, 124, 0, 0.5);
-  --ng-doc-deep-orange-60: rgba(255, 121, 0, 0.6);
-  --ng-doc-deep-orange-70: rgba(255, 118, 0, 0.7);
-  --ng-doc-deep-orange-80: rgba(255, 114, 0, 0.8);
-  --ng-doc-deep-orange-90: rgba(255, 111, 0, 0.9);
-  --ng-doc-deep-orange-100: #ff6600;
-  --ng-doc-deep-orange-110: rgb(249, 94, 0);
-  --ng-doc-deep-orange-120: rgb(242, 86, 0);
-  --ng-doc-deep-orange-130: rgb(233, 77, 0);
-  --ng-doc-deep-orange-140: rgb(230, 70, 0);
-  --ng-doc-deep-orange-150: rgb(223, 63, 0);
-  --ng-doc-deep-orange-160: rgb(217, 55, 0);
-  --ng-doc-deep-orange-170: rgb(182, 42, 0);
-  --ng-doc-deep-orange-180: rgb(204, 42, 0);
-  --ng-doc-deep-orange-190: rgb(198, 36, 0);
-  --ng-doc-grey-rgb: 30, 30, 30;
-  --ng-doc-grey-10: rgb(245, 245, 245);
-  --ng-doc-grey-20: rgb(235, 235, 235);
-  --ng-doc-grey-30: rgb(218, 218, 218);
-  --ng-doc-grey-40: rgb(206, 206, 206);
-  --ng-doc-grey-50: rgb(194, 194, 194);
-  --ng-doc-grey-60: rgb(182, 182, 182);
-  --ng-doc-grey-70: rgb(170, 170, 170);
-  --ng-doc-grey-80: rgb(159, 159, 159);
-  --ng-doc-grey-90: rgb(147, 147, 147);
-  --ng-doc-grey-100: rgb(136, 136, 136);
-  --ng-doc-grey-110: rgb(125, 125, 125);
-  --ng-doc-grey-120: rgb(114, 114, 114);
-  --ng-doc-grey-130: rgb(103, 103, 103);
-  --ng-doc-grey-140: rgb(92, 92, 92);
-  --ng-doc-grey-150: rgb(82, 82, 82);
-  --ng-doc-grey-160: rgb(71, 71, 71);
-  --ng-doc-grey-170: rgb(60, 60, 60);
-  --ng-doc-grey-180: rgb(50, 50, 50);
-  --ng-doc-grey-190: rgb(40, 40, 40);
-  --ng-doc-black: #000;
-  --ng-doc-white: #fff;
-}
-
 :root {
   --ng-doc-app-max-width: 1450px;
   --ng-doc-app-horizontal-padding: calc(var(--ng-doc-base-gutter) * 3);
@@ -708,70 +379,100 @@ 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-class-color: var(--ng-doc-pink-70);
-  --ng-doc-class-background: var(--ng-doc-pink-10);
-  --ng-doc-interface-color: var(--ng-doc-light-blue-90);
-  --ng-doc-interface-background: var(--ng-doc-blue-10);
-  --ng-doc-enum-color: var(--ng-doc-orange-150);
-  --ng-doc-enum-background: var(--ng-doc-orange-20);
-  --ng-doc-variable-color: var(--ng-doc-orange-150);
-  --ng-doc-variable-background: var(--ng-doc-orange-20);
-  --ng-doc-function-color: var(--ng-doc-green-150);
-  --ng-doc-function-background: var(--ng-doc-green-20);
-  --ng-doc-type-alias-color: var(--ng-doc-purple-90);
-  --ng-doc-type-alias-background: var(--ng-doc-purple-10);
-  --ng-doc-component-decorator-background: var(--ng-doc-light-blue-10);
-  --ng-doc-component-decorator-color: var(--ng-doc-blue-100);
-  --ng-doc-directive-decorator-background: var(--ng-doc-orange-10);
-  --ng-doc-directive-decorator-color: var(--ng-doc-orange-100);
-  --ng-doc-injectable-decorator-background: var(--ng-doc-teal-20);
-  --ng-doc-injectable-decorator-color: var(--ng-doc-teal-100);
-  --ng-doc-pipe-decorator-background: var(--ng-doc-green-10);
-  --ng-doc-pipe-decorator-color: var(--ng-doc-green-100);
-  --ng-doc-ng-module-decorator-background: var(--ng-doc-pink-10);
-  --ng-doc-ng-module-decorator-color: var(--ng-doc-pink-100);
-  --ng-doc-input-decorator-background: var(--ng-doc-light-blue-10);
-  --ng-doc-input-decorator-color: var(--ng-doc-light-blue-100);
-  --ng-doc-output-decorator-background: var(--ng-doc-light-blue-20);
-  --ng-doc-output-decorator-color: var(--ng-doc-light-blue-150);
+  --ng-doc-class-color: #fff;
+  --ng-doc-class-background: #e74c3c;
+  --ng-doc-interface-color: #fff;
+  --ng-doc-interface-background: #3498db;
+  --ng-doc-enum-color: #fff;
+  --ng-doc-enum-background: #2ecc71;
+  --ng-doc-variable-color: #fff;
+  --ng-doc-variable-background: #f1c40f;
+  --ng-doc-function-color: #fff;
+  --ng-doc-function-background: #27bd09;
+  --ng-doc-type-alias-color: #fff;
+  --ng-doc-type-alias-background: #3e69c5;
+  --ng-doc-selector-color: #fff;
+  --ng-doc-selector-background: #25ac5f;
+  --ng-doc-string-color: #fff;
+  --ng-doc-string-background: #ff1150;
+  --ng-doc-number-color: #fff;
+  --ng-doc-number-background: #3498db;
+  --ng-doc-boolean-color: #fff;
+  --ng-doc-boolean-background: #2ecc71;
+  --ng-doc-null-color: #fff;
+  --ng-doc-null-background: #95a5a6;
+  --ng-doc-undefined-color: #fff;
+  --ng-doc-undefined-background: #bdc3c7;
+  --ng-doc-object-color: #fff;
+  --ng-doc-object-background: #f39c12;
+  --ng-doc-component-decorator-color: #fff;
+  --ng-doc-component-decorator-background: #1abc9c;
+  --ng-doc-directive-decorator-color: #fff;
+  --ng-doc-directive-decorator-background: #e67e22;
+  --ng-doc-injectable-decorator-color: #fff;
+  --ng-doc-injectable-decorator-background: #9b59b6;
+  --ng-doc-pipe-decorator-color: #fff;
+  --ng-doc-pipe-decorator-background: #c0392b;
+  --ng-doc-ng-module-decorator-color: #fff;
+  --ng-doc-ng-module-decorator-background: #27ae60;
+  --ng-doc-input-decorator-color: #fff;
+  --ng-doc-input-decorator-background: #13a2da;
+  --ng-doc-output-decorator-color: #fff;
+  --ng-doc-output-decorator-background: #daa213;
+  --ng-doc-abstract-background: #ff5f1a;
+  --ng-doc-abstract-color: #fff;
+  --ng-doc-async-background: #0de311;
+  --ng-doc-async-color: #fff;
+  --ng-doc-protected-background: var(--ng-doc-base-7);
+  --ng-doc-protected-color: #fff;
+  --ng-doc-static-background: #e30dbf;
+  --ng-doc-static-color: #fff;
+  --ng-doc-overriden-background: #0d78e3;
+  --ng-doc-overriden-color: #fff;
+  --ng-doc-readonly-background: #ff2020;
+  --ng-doc-readonly-color: #fff;
+  --ng-doc-get-background: #2ecc3b;
+  --ng-doc-get-color: #fff;
+  --ng-doc-set-background: #e30dbf;
+  --ng-doc-set-color: #fff;
   --ng-doc-navbar-background: var(--ng-doc-base-0);
   --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));
+  --ng-doc-navbar-left-width: calc(
+  	var(--ng-doc-sidebar-width) - var(--ng-doc-navbar-horizontal-padding)
+  );
   --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);
   --ng-doc-sidebar-vetical-padding: var(--ng-doc-base-gutter);
   --ng-doc-sidebar-horizontal-padding: var(--ng-doc-app-horizontal-padding);
-  --ng-doc-demo-displayer-border: 1px solid var(--ng-doc-base-2);
+  --ng-doc-demo-displayer-border: 1px solid var(--ng-doc-border-color);
   --ng-doc-demo-displayer-border-radius: var(--ng-doc-base-gutter);
   --ng-doc-code-max-height: 400px;
+  --ng-doc-code-highlight-color: var(--ng-doc-primary);
   --ng-doc-toc-width: 280px;
-  --ng-doc-toc-indent: calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2);
+  --ng-doc-toc-indent: var(--ng-doc-base-gutter);
   --ng-doc-search-result-color: #454545;
-  --ng-doc-api-tag-color: var(--ng-doc-red-100);
-  --ng-doc-api-tag-background: var(--ng-doc-red-10);
-  --ng-doc-guide-tag-color: var(--ng-doc-blue-100);
-  --ng-doc-guide-tag-background: var(--ng-doc-blue-10);
+  --ng-doc-api-tag-color: #ff1111;
+  --ng-doc-api-tag-background: rgba(255, 17, 17, 0.15);
+  --ng-doc-guide-tag-color: #0086ff;
+  --ng-doc-guide-tag-background: rgba(0, 134, 255, 0.15);
+  /* Tabs */
+  --ng-doc-tabs-margin: calc(var(--ng-doc-base-gutter) * 4) 0px;
+  --ng-doc-tabs-border-radius: var(--ng-doc-base-gutter);
 }
 
-article header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: calc(var(--ng-doc-base-gutter) * 3);
-}
-article header .ng-doc-page-tags {
+article header.ngde .ng-doc-page-tags {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   margin-bottom: calc(var(--ng-doc-base-gutter) * 2);
   line-height: 22px;
 }
-article header h1 {
+article header.ngde h1 {
   margin-right: var(--ng-doc-base-gutter);
 }
-article header .ng-doc-header-details {
+article header.ngde .ng-doc-header-details {
   display: inline-flex;
   flex-wrap: wrap;
   align-items: baseline;
@@ -779,17 +480,17 @@ article header .ng-doc-header-details {
   margin-top: var(--ng-doc-base-gutter);
   line-height: 18px;
 }
-article header .ng-doc-header-details code {
+article header.ngde .ng-doc-header-details code {
   --ng-doc-line-height: 18px;
 }
-article header .ng-doc-header-details .ng-doc-header-details-label {
+article header.ngde .ng-doc-header-details .ng-doc-header-details-label {
   font-size: 11px;
   font-weight: 600;
   line-height: 18px;
   margin-left: calc(var(--ng-doc-base-gutter) * 2);
   opacity: 0.5;
 }
-article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
+article header.ngde .ng-doc-header-details .ng-doc-header-details-label:first-child {
   margin-left: 0;
 }
 
@@ -816,13 +517,6 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   background-color: transparent;
   color: var(--ng-doc-text);
 }
-.ng-doc-tag[data-content=ng-doc-declaration-modifier] {
-  font-family: var(--ng-doc-heading-font-family);
-  font-weight: 800;
-  background-color: transparent;
-  color: var(--ng-doc-deep-orange-100);
-  padding: 0;
-}
 .ng-doc-tag[data-content=Class] {
   background-color: var(--ng-doc-class-background);
   color: var(--ng-doc-class-color);
@@ -868,8 +562,8 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   color: var(--ng-doc-ng-module-decorator-color);
 }
 .ng-doc-tag[data-content=ng-doc-tag-selector] {
-  background-color: var(--ng-doc-teal-10);
-  color: var(--ng-doc-teal-150);
+  background-color: var(--ng-doc-selector-background);
+  color: var(--ng-doc-selector-color);
 }
 
 .ng-doc-decorators-group {
@@ -902,30 +596,30 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   font-weight: 800;
 }
 .ng-doc-modifier[data-content=protected] {
-  color: var(--ng-doc-base-8);
+  color: var(--ng-doc-protected-background);
 }
 .ng-doc-modifier[data-content=abstract] {
-  color: var(--ng-doc-deep-orange-100);
+  color: var(--ng-doc-abstract-background);
 }
 .ng-doc-modifier[data-content=static] {
-  color: var(--ng-doc-pink-100);
+  color: var(--ng-doc-static-background);
 }
 .ng-doc-modifier[data-content=async] {
-  color: var(--ng-doc-green-100);
+  color: var(--ng-doc-async-background);
 }
 .ng-doc-modifier[data-content=overriden] {
-  color: var(--ng-doc-light-blue-100);
+  color: var(--ng-doc-overriden-background);
 }
 .ng-doc-modifier[data-content=readonly] {
-  color: var(--ng-doc-deep-orange-100);
+  color: var(--ng-doc-readonly-background);
 }
 .ng-doc-modifier[data-content=get] {
   font-size: 16px;
-  color: var(--ng-doc-green-100);
+  color: var(--ng-doc-get-background);
 }
 .ng-doc-modifier[data-content=set] {
   font-size: 16px;
-  color: var(--ng-doc-pink-100);
+  color: var(--ng-doc-set-background);
 }
 
 .ng-doc-node-details {
@@ -976,22 +670,28 @@ article header .ng-doc-header-details .ng-doc-header-details-label:first-child {
   text-transform: capitalize;
 }
 .ng-doc-badge[data-content=protected] {
-  background-color: var(--ng-doc-base-8);
+  background-color: var(--ng-doc-protected-background);
+  color: var(--ng-doc-protected-color);
 }
 .ng-doc-badge[data-content=abstract] {
-  background-color: var(--ng-doc-deep-orange-100);
+  background-color: var(--ng-doc-abstract-background);
+  color: var(--ng-doc-abstract-color);
 }
 .ng-doc-badge[data-content=static] {
-  background-color: var(--ng-doc-pink-100);
+  background-color: var(--ng-doc-static-background);
+  color: var(--ng-doc-static-color);
 }
 .ng-doc-badge[data-content=async] {
-  background-color: var(--ng-doc-green-100);
+  background-color: var(--ng-doc-async-background);
+  color: var(--ng-doc-async-color);
 }
 .ng-doc-badge[data-content=overriden] {
-  background-color: var(--ng-doc-light-blue-100);
+  background-color: var(--ng-doc-overriden-background);
+  color: var(--ng-doc-overriden-color);
 }
 .ng-doc-badge[data-content=readonly] {
-  background-color: var(--ng-doc-red-100);
+  background-color: var(--ng-doc-readonly-background);
+  color: var(--ng-doc-readonly-color);
 }
 
 .ng-doc-see-also li {
@@ -1022,7 +722,7 @@ table.ng-doc-parameters-table .ng-doc-parameters-table-type {
 }
 
 code.ng-doc-code-with-link {
-  --ng-doc-inline-code-background: var(--ng-doc-blue-10);
+  --ng-doc-inline-code-background: var(--ng-doc-link-color);
 }
 
 article h1:hover .ng-doc-header-link,