feat: add service support to analytics mechnism

apps/showcase/src/style/dark-theme/dark-theme.scss

@@ -2,100 +2,100 @@
 
 :root {
 /* --- BEGIN THEME Auto-generated --- */
+--bs-body-bg: #000000;
+--bs-body-color: #ffffff;
+.card { --bs-card-bg: #000000; }
+.card { --bs-card-color: #ffffff; }
+.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
+.navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
 /* Application Primary color */
 --bs-primary: var(--color-primary);
 --bs-primary-800: var(--color-primary-800);
-.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
-.navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
---color-primary-50: #e6edfc;
---color-primary-100: #c2d3f7;
---color-primary-200: #99b6f2;
---color-primary-300: #7098ed;
---color-primary-400: #5182e9;
---color-primary-500: #326ce5;
---color-primary-600: #2d64e2;
---color-primary-700: #2659de;
---color-primary-800: #1f4fda;
---color-primary-900: #133dd3;
---color-primary-A700: #839aff;
---color-primary-A400: #9caeff;
---color-primary-A200: #cfd8ff;
---color-primary-A100: #000000;
---color-primary: var(--color-primary-500);
---color-accent-50: #e8f7ff;
+--bs-tertiary-bg: #333333;
+--bs-tertiary-bg-blue: 51;
+--bs-tertiary-bg-green: 51;
+--bs-tertiary-bg-red: 51;
+--bs-tertiary-bg-rgb: var(--bs-tertiary-bg-red), var(--bs-tertiary-bg-green), var(--bs-tertiary-bg-blue);
+--color-accent: var(--color-accent-500);
 --color-accent-100: #c5eaff;
 --color-accent-200: #9eddff;
 --color-accent-300: #77cfff;
 --color-accent-400: #5ac4ff;
+--color-accent-50: #e8f7ff;
 --color-accent-500: #3dbaff;
 --color-accent-600: #37b3ff;
 --color-accent-700: #2fabff;
 --color-accent-800: #27a3ff;
 --color-accent-900: #1a94ff;
---color-accent-A700: #b2d8ff;
---color-accent-A400: #cbe5ff;
---color-accent-A200: #feffff;
 --color-accent-A100: #ffffff;
---color-accent: var(--color-accent-500);
---color-highlight-50: #f4e5ff;
+--color-accent-A200: #feffff;
+--color-accent-A400: #cbe5ff;
+--color-accent-A700: #b2d8ff;
+--color-highlight: var(--color-highlight-500);
 --color-highlight-100: #e4beff;
 --color-highlight-200: #d292ff;
 --color-highlight-300: #c066ff;
 --color-highlight-400: #b346ff;
+--color-highlight-50: #f4e5ff;
 --color-highlight-500: #a525ff;
 --color-highlight-600: #9d21ff;
 --color-highlight-700: #931bff;
 --color-highlight-800: #8a16ff;
 --color-highlight-900: #790dff;
---color-highlight-A700: #ccaaff;
---color-highlight-A400: #dcc3ff;
---color-highlight-A200: #faf6ff;
 --color-highlight-A100: #ffffff;
---color-highlight: var(--color-highlight-500);
---color-warn-50: #fdede4;
+--color-highlight-A200: #faf6ff;
+--color-highlight-A400: #dcc3ff;
+--color-highlight-A700: #ccaaff;
+--color-neutral-alabaster: #f5f5f7;
+--color-neutral-black: #000000;
+--color-neutral-gray-dark: #616161;
+--color-neutral-gray-light: #eff5f9;
+--color-neutral-iron: #dbdff8;
+--color-neutral-silver: #f8f8f8;
+--color-neutral-white: #ffffff;
+--color-out-of-palette-comet: #1b2073;
+--color-out-of-palette-green: #067f28;
+--color-primary: var(--color-primary-500);
+--color-primary-100: #c2d3f7;
+--color-primary-200: #99b6f2;
+--color-primary-300: #7098ed;
+--color-primary-400: #5182e9;
+--color-primary-50: #e6edfc;
+--color-primary-500: #326ce5;
+--color-primary-600: #2d64e2;
+--color-primary-700: #2659de;
+--color-primary-800: #1f4fda;
+--color-primary-900: #133dd3;
+--color-primary-A100: #000000;
+--color-primary-A200: #cfd8ff;
+--color-primary-A400: #9caeff;
+--color-primary-A700: #839aff;
+--color-warn: var(--color-warn-500);
 --color-warn-100: #fbd1bb;
 --color-warn-200: #f8b38e;
 --color-warn-300: #f59460;
 --color-warn-400: #f27d3e;
+--color-warn-50: #fdede4;
 --color-warn-500: #f0661c;
 --color-warn-600: #ee5e19;
 --color-warn-700: #ec5314;
 --color-warn-800: #e94911;
 --color-warn-900: #dc3709;
---color-warn-A700: #ffa28f;
---color-warn-A400: #ffb7a8;
---color-warn-A200: #ffe1db;
 --color-warn-A100: #ffffff;
---color-warn: var(--color-warn-500);
---color-out-of-palette-green: #067f28;
---color-out-of-palette-comet: #1b2073;
---color-neutral-iron: #dbdff8;
---color-neutral-alabaster: #f5f5f7;
---color-neutral-white: #ffffff;
---color-neutral-silver: #f8f8f8;
---color-neutral-gray-light: #eff5f9;
---color-neutral-black: #000000;
---color-neutral-gray-dark: #616161;
+--color-warn-A200: #ffe1db;
+--color-warn-A400: #ffb7a8;
+--color-warn-A700: #ffa28f;
+--radius-10: 10px;
+--radius-2: 2px;
+--radius-25: 25px;
+--radius-5: 5px;
 --spacing-0: 0px;
 --spacing-1: 1px;
---spacing-5: 5px;
 --spacing-10: 10px;
 --spacing-20: 20px;
 --spacing-30: 30px;
 --spacing-40: 40px;
---radius-2: 2px;
---radius-5: 5px;
---radius-10: 10px;
---radius-25: 25px;
---bs-body-bg: #000000;
---bs-body-color: #ffffff;
---bs-tertiary-bg: #333333;
---bs-tertiary-bg-red: 51;
---bs-tertiary-bg-green: 51;
---bs-tertiary-bg-blue: 51;
---bs-tertiary-bg-rgb: var(--bs-tertiary-bg-red), var(--bs-tertiary-bg-green), var(--bs-tertiary-bg-blue);
-.card { --bs-card-color: #ffffff; }
-.card { --bs-card-bg: #000000; }
+--spacing-5: 5px;
 /* --- END THEME Auto-generated --- */
 
   .nav.nav-pills .nav-link {

apps/showcase/src/style/horizon-theme/horizon-theme.scss

@@ -1,90 +1,90 @@
 
 :root {
 /* --- BEGIN THEME Auto-generated --- */
+.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
+.navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
 /* Application Primary color */
 --bs-primary: var(--color-primary);
 --bs-primary-800: var(--color-primary-800);
-.nav-pills { --bs-nav-pills-link-active-color: var(--color-primary); }
-.navbar-toggler { --bs-navbar-color: var(--bs-primary-bg-subtle); }
---color-primary-50: #f0e4ea;
---color-primary-100: #d8bbca;
---color-primary-200: #bf8da6;
---color-primary-300: #a55f82;
---color-primary-400: #913d68;
---color-primary-500: #7e1b4d;
---color-primary-600: #761846;
---color-primary-700: #6b143d;
---color-primary-800: #611034;
---color-primary-900: #4e0825;
---color-primary-A700: #ff035b;
---color-primary-A400: #ff1d6c;
---color-primary-A200: #ff508d;
---color-primary-A100: #ff83ae;
---color-primary: var(--color-primary-500);
---color-accent-50: #fdf8e6;
+--color-accent: var(--color-accent-500);
 --color-accent-100: #fbedc2;
 --color-accent-200: #f8e199;
 --color-accent-300: #f5d470;
 --color-accent-400: #f3cb51;
+--color-accent-50: #fdf8e6;
 --color-accent-500: #f1c232;
 --color-accent-600: #efbc2d;
 --color-accent-700: #edb426;
 --color-accent-800: #ebac1f;
 --color-accent-900: #e79f13;
---color-accent-A700: #ffd896;
---color-accent-A400: #ffe2af;
---color-accent-A200: #fff4e2;
 --color-accent-A100: #ffffff;
---color-accent: var(--color-accent-500);
---color-highlight-50: #e1e1f4;
+--color-accent-A200: #fff4e2;
+--color-accent-A400: #ffe2af;
+--color-accent-A700: #ffd896;
+--color-highlight: var(--color-highlight-500);
 --color-highlight-100: #b5b3e3;
 --color-highlight-200: #8481d1;
 --color-highlight-300: #524ebf;
 --color-highlight-400: #2d28b1;
+--color-highlight-50: #e1e1f4;
 --color-highlight-500: #0802a3;
 --color-highlight-600: #07029b;
 --color-highlight-700: #060191;
 --color-highlight-800: #040188;
 --color-highlight-900: #020177;
---color-highlight-A700: #2525ff;
---color-highlight-A400: #3f3fff;
---color-highlight-A200: #7272ff;
 --color-highlight-A100: #a5a5ff;
---color-highlight: var(--color-highlight-500);
---color-warn-50: #fdede4;
+--color-highlight-A200: #7272ff;
+--color-highlight-A400: #3f3fff;
+--color-highlight-A700: #2525ff;
+--color-neutral-alabaster: #f5f5f7;
+--color-neutral-black: #000000;
+--color-neutral-gray-dark: #616161;
+--color-neutral-gray-light: #f0f0f0;
+--color-neutral-iron: #e4dbd1;
+--color-neutral-silver: #f8f8f8;
+--color-neutral-white: #ffffff;
+--color-out-of-palette-comet: #6a5a48;
+--color-out-of-palette-green: #28ad4e;
+--color-primary: var(--color-primary-500);
+--color-primary-100: #d8bbca;
+--color-primary-200: #bf8da6;
+--color-primary-300: #a55f82;
+--color-primary-400: #913d68;
+--color-primary-50: #f0e4ea;
+--color-primary-500: #7e1b4d;
+--color-primary-600: #761846;
+--color-primary-700: #6b143d;
+--color-primary-800: #611034;
+--color-primary-900: #4e0825;
+--color-primary-A100: #ff83ae;
+--color-primary-A200: #ff508d;
+--color-primary-A400: #ff1d6c;
+--color-primary-A700: #ff035b;
+--color-warn: var(--color-warn-500);
 --color-warn-100: #fbd1bb;
 --color-warn-200: #f8b38e;
 --color-warn-300: #f59460;
 --color-warn-400: #f27d3e;
+--color-warn-50: #fdede4;
 --color-warn-500: #f0661c;
 --color-warn-600: #ee5e19;
 --color-warn-700: #ec5314;
 --color-warn-800: #e94911;
 --color-warn-900: #dc3709;
---color-warn-A700: #ffa28f;
---color-warn-A400: #ffb7a8;
---color-warn-A200: #ffe1db;
 --color-warn-A100: #ffffff;
---color-warn: var(--color-warn-500);
---color-out-of-palette-green: #28ad4e;
---color-out-of-palette-comet: #6a5a48;
---color-neutral-iron: #e4dbd1;
---color-neutral-alabaster: #f5f5f7;
---color-neutral-white: #ffffff;
---color-neutral-silver: #f8f8f8;
---color-neutral-gray-light: #f0f0f0;
---color-neutral-black: #000000;
---color-neutral-gray-dark: #616161;
+--color-warn-A200: #ffe1db;
+--color-warn-A400: #ffb7a8;
+--color-warn-A700: #ffa28f;
+--radius-10: 10px;
+--radius-2: 2px;
+--radius-25: 25px;
+--radius-5: 5px;
 --spacing-0: 0px;
 --spacing-1: 1px;
---spacing-5: 5px;
 --spacing-10: 10px;
 --spacing-20: 20px;
 --spacing-30: 30px;
 --spacing-40: 40px;
---radius-2: 2px;
---radius-5: 5px;
---radius-10: 10px;
---radius-25: 25px;
+--spacing-5: 5px;
 /* --- END THEME Auto-generated --- */
 }