@allurereport/web-classic 3.0.0-beta.9 → 3.0.1

package/src/assets/scss/theme.scss

@@ -1,9 +1,6 @@
 :root:not([data-theme="dark"]) {
   --ad-other-focus: var(--ad-other-focus-day);
   --ad-other-modal-overlay: var(--ad-other-modal-overlay-day);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-day);
-  --bg-alpha-capella: var(--bg-alpha-capella-day);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-day);
   --bg-base-modal: var(--bg-base-modal-day);
   --bg-base-neutral: var(--bg-base-neutral-day);
   --bg-base-primary: var(--bg-base-primary-day);
@@ -14,18 +11,68 @@
   --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-day);
   --bg-control-secondary-medium: var(--bg-control-secondary-medium-day);
   --bg-control-secondary: var(--bg-control-secondary-day);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-day);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-day);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-day);
-  --bg-support-atlas: var(--bg-support-atlas-day);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-day);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-day);
-  --bg-support-capella: var(--bg-support-capella-day);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-day);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-day);
-  --bg-support-castor: var(--bg-support-castor-day);
-  --bg-support-rau: var(--bg-support-rau-day);
-  --bg-support-skat: var(--bg-support-skat-day);
+  --bg-support-aldebaran: var(--aldebaran-day-darken-1);
+  --bg-support-aldebaran-heavy: var(--aldebaran-day-darken-4);
+  --bg-support-aldebaran-medium: var(--aldebaran-day-darken-2);
+  --bg-support-antares: var(--antares-day-darken-1);
+  --bg-support-antares-heavy: var(--antares-day-darken-4);
+  --bg-support-antares-medium: var(--antares-day-darken-2);
+  --bg-support-atlas: var(--atlas-day-darken-1);
+  --bg-support-atlas-heavy: var(--atlas-day-darken-4);
+  --bg-support-atlas-medium: var(--atlas-day-darken-2);
+  --bg-support-betelgeuse: var(--betelgeuse-day-darken-1);
+  --bg-support-betelgeuse-heavy: var(--betelgeuse-day-darken-4);
+  --bg-support-betelgeuse-medium: var(--betelgeuse-day-darken-2);
+  --bg-support-capella: var(--capella-day-darken-1);
+  --bg-support-capella-heavy: var(--capella-day-darken-4);
+  --bg-support-capella-medium: var(--capella-day-darken-2);
+  --bg-support-castor: var(--castor-day-darken-1);
+  --bg-support-castor-heavy: var(--castor-day-darken-4);
+  --bg-support-castor-medium: var(--castor-day-darken-2);
+  --bg-support-gliese: var(--gliese-day-darken-1);
+  --bg-support-gliese-heavy: var(--gliese-day-darken-4);
+  --bg-support-gliese-medium: var(--gliese-day-darken-2);
+  --bg-support-mirach: var(--mirach-day-darken-1);
+  --bg-support-mirach-heavy: var(--mirach-day-darken-4);
+  --bg-support-mirach-medium: var(--mirach-day-darken-2);
+  --bg-support-rau: var(--rau-day-darken-1);
+  --bg-support-rau-heavy: var(--rau-day-darken-4);
+  --bg-support-rau-medium: var(--rau-day-darken-2);
+  --bg-support-rigel: var(--rigel-day-darken-1);
+  --bg-support-rigel-heavy: var(--rigel-day-darken-4);
+  --bg-support-rigel-medium: var(--rigel-day-darken-2);
+  --bg-support-sirius: var(--sirius-day-darken-1);
+  --bg-support-sirius-heavy: var(--sirius-day-darken-4);
+  --bg-support-sirius-medium: var(--sirius-day-darken-2);
+  --bg-support-skat: var(--skat-day-darken-1);
+  --bg-support-skat-heavy: var(--skat-day-darken-4);
+  --bg-support-skat-medium: var(--skat-day-darken-2);
+  --bg-dashboard-neutral: rgb(206 211 222 / 100%);
+  --bg-dashboard-neutral-medium: rgb(180 188 205 / 100%);
+  --bg-dashboard-atlas: var(--atlas-day-base);
+  --bg-dashboard-capella: var(--capella-day-base);
+  --bg-dashboard-skat: var(--skat-day-base);
+  --bg-dashboard-betelgeuse: var(--betelgeuse-day-base);
+  --bg-dashboard-antares: var(--antares-day-base);
+  --bg-dashboard-castor: var(--castor-day-base);
+  --bg-dashboard-aldebaran: var(--aldebaran-day-base);
+  --bg-dashboard-gliese: var(--gliese-day-base);
+  --bg-dashboard-aldebaran-medium: var(--aldebaran-day-darken-1);
+  --bg-dashboard-castor-medium: var(--castor-day-darken-1);
+  --bg-dashboard-atlas-medium: var(--atlas-day-darken-1);
+  --bg-dashboard-capella-medium: var(--capella-day-darken-1);
+  --bg-dashboard-skat-medium: var(--skat-day-darken-1);
+  --bg-dashboard-betelgeuse-medium: var(--betelgeuse-day-darken-1);
+  --bg-dashboard-antares-medium: var(--antares-day-darken-1);
+  --bg-dashboard-gliese-medium: var(--gliese-day-darken-1);
+  --bg-dashboard-mirach: var(--mirach-day-base);
+  --bg-dashboard-mirach-medium: var(--mirach-day-darken-1);
+  --bg-dashboard-rigel: var(--rigel-day-base);
+  --bg-dashboard-rigel-medium: var(--rigel-day-darken-1);
+  --bg-dashboard-sirius: var(--sirius-day-base);
+  --bg-dashboard-sirius-medium: var(--sirius-day-darken-1);
+  --bg-dashboard-rau: var(--rau-day-base);
+  --bg-dashboard-rau-medium: var(--rau-day-darken-1);
   --constant-bg-base-modal: var(--constant-bg-base-modal-day);
   --constant-on-border-heavy: var(--constant-on-border-heavy-day);
   --constant-on-icon-primary: var(--constant-on-icon-primary-day);
@@ -38,80 +85,242 @@
   --on-icon-hint: var(--on-icon-hint-day);
   --on-icon-primary: var(--on-icon-primary-day);
   --on-icon-secondary: var(--on-icon-secondary-day);
-  --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-day);
-  --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-day);
   --on-support-aldebaran: var(--on-support-aldebaran-day);
+  --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-day);
+  --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-day);
   --on-support-atlas: var(--on-support-atlas-day);
+  --on-support-atlas-heavy: var(--atlas-day-darken-6);
+  --on-support-atlas-medium: var(--atlas-day-darken-5);
   --on-support-capella: var(--on-support-capella-day);
+  --on-support-capella-heavy: var(--capella-day-darken-6);
+  --on-support-capella-medium: var(--capella-day-darken-5);
   --on-support-castor: var(--on-support-castor-day);
-  --on-support-sirius: var(--on-support-sirius-day);
+  --on-support-castor-heavy: var(--castor-day-darken-6);
+  --on-support-castor-medium: var(--castor-day-darken-5);
+  --on-support-gliese: var(--gliese-day-darken-3);
+  --on-support-gliese-heavy: var(--gliese-day-darken-6);
+  --on-support-gliese-medium: var(--gliese-day-darken-5);
+  --on-support-sirius: var(--sirius-day-darken-3);
+  --on-support-sirius-heavy: var(--sirius-day-darken-6);
+  --on-support-sirius-medium: var(--sirius-day-darken-5);
+  --on-support-rau: var(--rau-day-darken-3);
+  --on-support-mirach: var(--mirach-day-darken-3);
+  --on-support-mirach-heavy: var(--mirach-day-darken-6);
+  --on-support-mirach-medium: var(--mirach-day-darken-5);
+  --on-support-rau: var(--rau-day-darken-3);
+  --on-support-rau-heavy: var(--rau-day-darken-6);
+  --on-support-rau-medium: var(--rau-day-darken-5);
+  --on-support-rigel: var(--rigel-day-darken-3);
+  --on-support-rigel-heavy: var(--rigel-day-darken-6);
+  --on-support-rigel-medium: var(--rigel-day-darken-5);
+  --on-support-antares: var(--antares-day-darken-3);
+  --on-support-betelgeuse: var(--betelgeuse-day-darken-3);
+  --on-support-skat: var(--skat-day-darken-3);
+  --on-support-skat-heavy: var(--skat-day-darken-6);
+  --on-support-skat-medium: var(--skat-day-darken-5);
   --on-text-hint: var(--on-text-hint-day);
   --on-text-primary: var(--on-text-primary-day);
   --on-text-secondary: var(--on-text-secondary-day);
 
+  --bg-alpha-aldebaran: var(--aldebaran-day-darken-1-8);
+  --bg-alpha-aldebaran-heavy: var(--aldebaran-day-darken-1-24);
+  --bg-alpha-aldebaran-medium: var(--aldebaran-day-darken-1-16);
+  --bg-alpha-antares: var(--antares-day-darken-1-8);
+  --bg-alpha-antares-heavy: var(--antares-day-darken-1-24);
+  --bg-alpha-antares-medium: var(--antares-day-darken-1-16);
+  --bg-alpha-atlas: var(--atlas-day-darken-1-8);
+  --bg-alpha-atlas-heavy: var(--atlas-day-darken-1-24);
+  --bg-alpha-atlas-medium: var(--atlas-day-darken-1-16);
+  --bg-alpha-betelgeuse: var(--betelgeuse-day-darken-1-8);
+  --bg-alpha-betelgeuse-heavy: var(--betelgeuse-day-darken-1-24);
+  --bg-alpha-betelgeuse-medium: var(--betelgeuse-day-darken-1-16);
+  --bg-alpha-capella: var(--capella-day-darken-1-8);
+  --bg-alpha-capella-heavy: var(--capella-day-darken-1-24);
+  --bg-alpha-capella-medium: var(--capella-day-darken-1-16);
+  --bg-alpha-castor: var(--castor-day-darken-1-8);
+  --bg-alpha-castor-heavy: var(--castor-day-darken-1-24);
+  --bg-alpha-castor-medium: var(--castor-day-darken-1-16);
+  --bg-alpha-gliese: var(--gliese-day-darken-1-8);
+  --bg-alpha-gliese-heavy: var(--gliese-day-darken-1-24);
+  --bg-alpha-gliese-medium: var(--gliese-day-darken-1-16);
+  --bg-alpha-mirach: var(--mirach-day-darken-1-8);
+  --bg-alpha-mirach-heavy: var(--mirach-day-darken-1-24);
+  --bg-alpha-mirach-medium: var(--mirach-day-darken-1-16);
+  --bg-alpha-rau: var(--rau-day-darken-1-8);
+  --bg-alpha-rau-heavy: var(--rau-day-darken-1-24);
+  --bg-alpha-rau-medium: var(--rau-day-darken-1-16);
+  --bg-alpha-rigel: var(--rigel-day-darken-1-8);
+  --bg-alpha-rigel-heavy: var(--rigel-day-darken-1-24);
+  --bg-alpha-rigel-medium: var(--rigel-day-darken-1-16);
+  --bg-alpha-sirius: var(--sirius-day-darken-1-8);
+  --bg-alpha-sirius-heavy: var(--sirius-day-darken-1-24);
+  --bg-alpha-sirius-medium: var(--sirius-day-darken-1-16);
+  --bg-alpha-skat: var(--skat-day-darken-1-8);
+  --bg-alpha-skat-heavy: var(--skat-day-darken-1-24);
+  --bg-alpha-skat-medium: var(--skat-day-darken-1-16);
+
   color-scheme: light;
 }
 
-:root[data-theme="dark"] {
-  --ad-other-focus: var(--ad-other-focus-night);
-  --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
-  --bg-alpha-capella-heavy: var(--bg-alpha-capella-heavy-night);
-  --bg-alpha-capella-medium: var(--bg-alpha-capella-medium-night);
-  --bg-alpha-capella: var(--bg-alpha-capella-night);
-  --bg-alpha-castor-heavy: var(--bg-alpha-castor-heavy-night);
-  --bg-base-modal: var(--bg-base-modal-night);
-  --bg-base-neutral: var(--bg-base-neutral-night);
-  --bg-base-primary: var(--bg-base-primary-night);
-  --bg-base-secondary: var(--bg-base-secondary-night);
-  --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
-  --bg-control-flat-medium: var(--bg-control-flat-medium-night);
-  --bg-control-flat: var(--bg-control-flat-night);
-  --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
-  --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
-  --bg-control-secondary: var(--bg-control-secondary-night);
-  --bg-support-aldebaran-heavy: var(--bg-support-aldebaran-heavy-night);
-  --bg-support-aldebaran-medium: var(--bg-support-aldebaran-medium-night);
-  --bg-support-aldebaran: var(--bg-support-aldebaran-night);
-  --bg-support-atlas-heavy: var(--bg-support-atlas-heavy-night);
-  --bg-support-atlas-medium: var(--bg-support-atlas-medium-night);
-  --bg-support-atlas: var(--bg-support-atlas-night);
-  --bg-support-capella-heavy: var(--bg-support-capella-heavy-night);
-  --bg-support-capella-medium: var(--bg-support-capella-medium-night);
-  --bg-support-capella: var(--bg-support-capella-night);
-  --bg-support-castor-heavy: var(--bg-support-castor-heavy-night);
-  --bg-support-castor-medium: var(--bg-support-castor-medium-night);
-  --bg-support-castor: var(--bg-support-castor-night);
-  --bg-support-rau: var(--bg-support-rau-night);
-  --bg-support-skat: var(--bg-support-skat-night);
-  --constant-bg-base-modal: var(--constant-bg-base-modal-night);
-  --constant-bg-base-primary: var(--constant-bg-base-primary-night);
-  --constant-on-border-heavy: var(--constant-on-border-heavy-night);
-  --constant-on-icon-primary: var(--constant-on-icon-primary-night);
-  --constant-on-text-primary: var(--constant-on-text-primary-night);
-  --on-border-control: var(--on-border-control-night);
-  --on-border-heavy: var(--on-border-heavy-night);
-  --on-border-medium: var(--on-border-medium-night);
-  --on-border-muted: var(--on-border-muted-night);
-  --on-border-primary: var(--on-border-primary-night);
-  --on-icon-hint: var(--on-icon-hint-night);
-  --on-icon-primary: var(--on-icon-primary-night);
-  --on-icon-secondary: var(--on-icon-secondary-night);
-  --on-support-aldebaran-heavy: var(--on-support-aldebaran-heavy-night);
-  --on-support-aldebaran-medium: var(--on-support-aldebaran-medium-night);
-  --on-support-aldebaran: var(--on-support-aldebaran-night);
-  --on-support-atlas-heavy: var(--on-support-atlas-heavy-night);
-  --on-support-atlas-medium: var(--on-support-atlas-medium-night);
-  --on-support-atlas: var(--on-support-atlas-night);
-  --on-support-capella-heavy: var(--on-support-capella-heavy-night);
-  --on-support-capella-medium: var(--on-support-capella-medium-night);
-  --on-support-capella: var(--on-support-capella-night);
-  --on-support-castor-heavy: var(--on-support-castor-heavy-night);
-  --on-support-castor-medium: var(--on-support-castor-medium-night);
-  --on-support-castor: var(--on-support-castor-night);
-  --on-support-sirius: var(--on-support-sirius-night);
-  --on-text-hint: var(--on-text-hint-night);
-  --on-text-primary: var(--on-text-primary-night);
-  --on-text-secondary: var(--on-text-secondary-night);
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="auto"],
+  :root[data-theme="dark"] {
+    --ad-other-focus: var(--ad-other-focus-night);
+    --ad-other-modal-overlay: var(--ad-other-modal-overlay-night);
+    --bg-base-modal: var(--bg-base-modal-night);
+    --bg-base-neutral: var(--bg-base-neutral-night);
+    --bg-base-primary: var(--bg-base-primary-night);
+    --bg-base-secondary: var(--bg-base-secondary-night);
+    --bg-control-flat-heavy: var(--bg-control-flat-heavy-night);
+    --bg-control-flat-medium: var(--bg-control-flat-medium-night);
+    --bg-control-flat: var(--bg-control-flat-night);
+    --bg-control-secondary-heavy: var(--bg-control-secondary-heavy-night);
+    --bg-control-secondary-medium: var(--bg-control-secondary-medium-night);
+    --bg-control-secondary: var(--bg-control-secondary-night);
+    --bg-support-aldebaran-heavy: var(--aldebaran-night-darken-7);
+    --bg-support-aldebaran-medium: var(--aldebaran-night-darken-6);
+    --bg-support-aldebaran: var(--aldebaran-night-darken-5);
+    --bg-support-antares-heavy: var(--antares-night-darken-7);
+    --bg-support-antares-medium: var(--antares-night-darken-6);
+    --bg-support-antares: var(--antares-night-darken-4);
+    --bg-support-atlas-heavy: var(--atlas-night-darken-7);
+    --bg-support-atlas-medium: var(--atlas-night-darken-6);
+    --bg-support-atlas: var(--atlas-night-darken-4);
+    --bg-support-betelgeuse-heavy: var(--betelgeuse-night-darken-7);
+    --bg-support-betelgeuse-medium: var(--betelgeuse-night-darken-6);
+    --bg-support-betelgeuse: var(--betelgeuse-night-darken-5);
+    --bg-support-capella-heavy: var(--capella-night-darken-7);
+    --bg-support-capella-medium: var(--capella-night-darken-6);
+    --bg-support-capella: var(--capella-night-darken-4);
+    --bg-support-castor-heavy: var(--castor-night-darken-7);
+    --bg-support-castor-medium: var(--castor-night-darken-6);
+    --bg-support-castor: var(--castor-night-darken-5);
+    --bg-support-gliese-heavy: var(--gliese-night-darken-7);
+    --bg-support-gliese-medium: var(--gliese-night-darken-6);
+    --bg-support-gliese: var(--gliese-night-darken-4);
+    --bg-support-mirach-heavy: var(--mirach-night-darken-7);
+    --bg-support-mirach-medium: var(--mirach-night-darken-6);
+    --bg-support-mirach: var(--mirach-night-darken-5);
+    --bg-support-rau-heavy: var(--rau-night-darken-7);
+    --bg-support-rau-medium: var(--rau-night-darken-6);
+    --bg-support-rau: var(--rau-night-darken-5);
+    --bg-support-rigel-heavy: var(--rigel-night-darken-7);
+    --bg-support-rigel-medium: var(--rigel-night-darken-6);
+    --bg-support-rigel: var(--rigel-night-darken-4);
+    --bg-support-sirius-heavy: var(--sirius-night-darken-7);
+    --bg-support-sirius-medium: var(--sirius-night-darken-6);
+    --bg-support-sirius: var(--sirius-night-darken-5);
+    --bg-support-skat-heavy: var(--skat-night-darken-7);
+    --bg-support-skat-medium: var(--skat-night-darken-6);
+    --bg-support-skat: var(--skat-night-darken-5);
+    --bg-dashboard-neutral: rgb(207 214 229 / 100%);
+    --bg-dashboard-neutral-medium: rgb(177 188 213 / 100%);
+    --bg-dashboard-atlas: var(--atlas-night-darken-1);
+    --bg-dashboard-capella: var(--capella-night-darken-1);
+    --bg-dashboard-skat: var(--skat-night-darken-2);
+    --bg-dashboard-betelgeuse: var(--betelgeuse-night-darken-2);
+    --bg-dashboard-antares: var(--antares-night-darken-1);
+    --bg-dashboard-castor: var(--castor-night-darken-3);
+    --bg-dashboard-aldebaran: var(--aldebaran-night-darken-2);
+    --bg-dashboard-gliese: var(--gliese-night-darken-1);
+    --bg-dashboard-mirach: var(--mirach-night-darken-3);
+    --bg-dashboard-mirach-medium: var(--mirach-night-darken-4);
+    --bg-dashboard-rigel: var(--rigel-night-darken-1);
+    --bg-dashboard-rigel-medium: var(--rigel-night-darken-3);
+    --bg-dashboard-sirius: var(--sirius-night-darken-2);
+    --bg-dashboard-sirius-medium: var(--sirius-night-darken-4);
+    --bg-dashboard-rau: var(--rau-night-darken-2);
+    --bg-dashboard-rau-medium: var(--rau-night-darken-4);
+    --constant-bg-base-modal: var(--constant-bg-base-modal-night);
+    --constant-bg-base-primary: var(--constant-bg-base-primary-night);
+    --constant-on-border-heavy: var(--constant-on-border-heavy-night);
+    --constant-on-icon-primary: var(--constant-on-icon-primary-night);
+    --constant-on-text-primary: var(--constant-on-text-primary-night);
+    --on-border-control: var(--on-border-control-night);
+    --on-border-heavy: var(--on-border-heavy-night);
+    --on-border-medium: var(--on-border-medium-night);
+    --on-border-muted: var(--on-border-muted-night);
+    --on-border-primary: var(--on-border-primary-night);
+    --on-icon-hint: var(--on-icon-hint-night);
+    --on-icon-primary: var(--on-icon-primary-night);
+    --on-icon-secondary: var(--on-icon-secondary-night);
+    --on-support-aldebaran-heavy: var(--aldebaran-night-darken-3);
+    --on-support-aldebaran-medium: var(--aldebaran-night-darken-1);
+    --on-support-aldebaran: var(--aldebaran-night-base);
+    --on-support-antares-heavy: var(--antares-night-darken-5);
+    --on-support-antares-medium: var(--antares-night-darken-2);
+    --on-support-antares: var(--antares-night-base);
+    --on-support-atlas-heavy: var(--atlas-night-darken-5);
+    --on-support-atlas-medium: var(--atlas-night-darken-2);
+    --on-support-atlas: var(--atlas-night-base);
+    --on-support-betelgeuse-heavy: var(--betelgeuse-night-darken-3);
+    --on-support-betelgeuse-medium: var(--betelgeuse-night-darken-1);
+    --on-support-betelgeuse: var(--betelgeuse-night-base);
+    --on-support-capella-heavy: var(--capella-night-darken-5);
+    --on-support-capella-medium: var(--capella-night-darken-2);
+    --on-support-capella: var(--capella-night-base);
+    --on-support-castor-heavy: var(--castor-night-darken-2);
+    --on-support-castor-medium: var(--castor-night-darken-1);
+    --on-support-castor: var(--castor-night-base);
+    --on-support-gliese-heavy: var(--gliese-night-darken-5);
+    --on-support-gliese-medium: var(--gliese-night-darken-2);
+    --on-support-gliese: var(--gliese-night-base);
+    --on-support-mirach-heavy: var(--mirach-night-darken-2);
+    --on-support-mirach-medium: var(--mirach-night-darken-1);
+    --on-support-mirach: var(--mirach-night-base);
+    --on-support-rau-heavy: var(--rau-night-darken-3);
+    --on-support-rau-medium: var(--rau-night-darken-1);
+    --on-support-rau: var(--rau-night-base);
+    --on-support-rigel-heavy: var(--rigel-night-darken-5);
+    --on-support-rigel-medium: var(--rigel-night-darken-2);
+    --on-support-rigel: var(--rigel-night-base);
+    --on-support-sirius-heavy: var(--sirius-night-darken-3);
+    --on-support-sirius-medium: var(--sirius-night-darken-1);
+    --on-support-sirius: var(--sirius-night-base);
+    --on-support-skat-heavy: var(--skat-night-darken-3);
+    --on-support-skat-medium: var(--skat-night-darken-1);
+    --on-support-skat: var(--skat-night-base);
+    --on-text-hint: var(--on-text-hint-night);
+    --on-text-primary: var(--on-text-primary-night);
+    --on-text-secondary: var(--on-text-secondary-night);
+
+    --bg-alpha-aldebaran-heavy: var(--aldebaran-night-darken-5-28);
+    --bg-alpha-aldebaran-medium: var(--aldebaran-night-darken-5-20);
+    --bg-alpha-aldebaran: var(--aldebaran-night-darken-5-12);
+    --bg-alpha-antares-heavy: var(--antares-night-darken-4-28);
+    --bg-alpha-antares-medium: var(--antares-night-darken-4-20);
+    --bg-alpha-antares: var(--antares-night-darken-4-12);
+    --bg-alpha-atlas-heavy: var(--atlas-night-darken-4-28);
+    --bg-alpha-atlas-medium: var(--atlas-night-darken-4-20);
+    --bg-alpha-atlas: var(--atlas-night-darken-4-12);
+    --bg-alpha-betelgeuse-heavy: var(--betelgeuse-night-darken-5-28);
+    --bg-alpha-betelgeuse-medium: var(--betelgeuse-night-darken-5-20);
+    --bg-alpha-betelgeuse: var(--betelgeuse-night-darken-5-12);
+    --bg-alpha-capella-heavy: var(--capella-night-darken-4-28);
+    --bg-alpha-capella-medium: var(--capella-night-darken-4-20);
+    --bg-alpha-capella: var(--capella-night-darken-4-12);
+    --bg-alpha-castor-heavy: var(--castor-night-darken-5-28);
+    --bg-alpha-castor-medium: var(--castor-night-darken-5-20);
+    --bg-alpha-castor: var(--castor-night-darken-5-12);
+    --bg-alpha-gliese-heavy: var(--gliese-night-darken-4-28);
+    --bg-alpha-gliese-medium: var(--gliese-night-darken-4-20);
+    --bg-alpha-gliese: var(--gliese-night-darken-4-12);
+    --bg-alpha-mirach-heavy: var(--mirach-night-darken-5-28);
+    --bg-alpha-mirach-medium: var(--mirach-night-darken-5-20);
+    --bg-alpha-mirach: var(--mirach-night-darken-5-12);
+    --bg-alpha-rau-heavy: var(--rau-night-darken-5-28);
+    --bg-alpha-rau-medium: var(--rau-night-darken-5-20);
+    --bg-alpha-rau: var(--rau-night-darken-5-12);
+    --bg-alpha-rigel-heavy: var(--rigel-night-darken-4-28);
+    --bg-alpha-rigel-medium: var(--rigel-night-darken-4-20);
+    --bg-alpha-rigel: var(--rigel-night-darken-4-12);
+    --bg-alpha-sirius-heavy: var(--sirius-night-darken-5-28);
+    --bg-alpha-sirius-medium: var(--sirius-night-darken-5-20);
+    --bg-alpha-sirius: var(--sirius-night-darken-5-12);
+    --bg-alpha-skat-heavy: var(--skat-night-darken-5-28);
+    --bg-alpha-skat-medium: var(--skat-night-darken-5-20);
+    --bg-alpha-skat: var(--skat-night-darken-5-12);
 
-  color-scheme: dark;
+    color-scheme: dark;
+  }
 }

package/src/components/Behaviors/BehaviorsList.tsx

@@ -1,6 +1,6 @@
 import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
-import type { AllureAwesomeStatus } from "types";
+import type { ClassicStatus } from "types";
 import Tree from "@/components/Tree/Tree";
 import {
   behaviorsStore,
@@ -18,7 +18,7 @@ export const BehaviorsList = () => {
   const { t } = useI18n("empty");
 
   useEffect(() => {
-    setBehaviorsStatus(currentTab.value as AllureAwesomeStatus);
+    setBehaviorsStatus(currentTab.value as ClassicStatus);
   }, [currentTab.value]);
 
   return (
@@ -58,7 +58,7 @@ export const BehaviorsList = () => {
 
         return (
           <div className={styles["tree-list"]}>
-            <Tree tree={filteredBehaviors.value} statusFilter={currentTab.value as AllureAwesomeStatus} root />
+            <Tree tree={filteredBehaviors.value} statusFilter={currentTab.value as ClassicStatus} root />
           </div>
         );
       }}

package/src/components/Categories/CategoriesList.tsx

@@ -1,6 +1,6 @@
 import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
 import { useEffect } from "preact/hooks";
-import type { AllureAwesomeStatus } from "types";
+import type { ClassicStatus } from "types";
 import Tree from "@/components/Tree/Tree";
 import {
   categoriesStore,
@@ -18,7 +18,7 @@ export const CategoriesList = () => {
   const { t } = useI18n("empty");
 
   useEffect(() => {
-    setCategoriesStatus(currentTab.value as AllureAwesomeStatus);
+    setCategoriesStatus(currentTab.value as ClassicStatus);
   }, [currentTab.value]);
 
   return (
@@ -58,7 +58,7 @@ export const CategoriesList = () => {
 
         return (
           <div className={styles["tree-list"]}>
-            <Tree tree={filteredCategories.value} statusFilter={currentTab.value as AllureAwesomeStatus} root />
+            <Tree tree={filteredCategories.value} statusFilter={currentTab.value as ClassicStatus} root />
           </div>
         );
       }}

package/src/components/Footer/FooterLogo.tsx

@@ -1,5 +1,4 @@
-import { Text } from "@allurereport/web-components";
-import { ReportLogoFull } from "../ReportLogoFull";
+import { ReportLogoFull, Text } from "@allurereport/web-components";
 import * as styles from "./styles.scss";
 
 export const FooterLogo = () => {

package/src/components/Footer/FooterVersion.tsx

@@ -1,7 +1,7 @@
 import { getReportOptions } from "@allurereport/web-commons";
 import { Text } from "@allurereport/web-components";
 import { useEffect, useState } from "preact/hooks";
-import type { AllureAwesomeReportOptions } from "types";
+import type { ClassicReportOptions } from "types";
 import { currentLocaleIso } from "@/stores";
 import * as styles from "./styles.scss";
 
@@ -9,7 +9,7 @@ export const FooterVersion = () => {
   const [createdAt, setCreatedAt] = useState<number | null>(null);
 
   useEffect(() => {
-    const reportOptions = getReportOptions<AllureAwesomeReportOptions>();
+    const reportOptions = getReportOptions<ClassicReportOptions>();
     if (reportOptions?.createdAt) {
       setCreatedAt(Number(reportOptions.createdAt));
     }

package/src/components/HeaderActions/HeaderActions.tsx

@@ -1,11 +1,10 @@
-import { statusesList } from "@allurereport/core-api";
+import { capitalize, statusesList } from "@allurereport/core-api";
 import { Counter, Loadable, SearchBox } from "@allurereport/web-components";
 import { SortBy } from "@/components/HeaderActions/SortBy";
 import { Tab } from "@/components/Tabs";
 import { statsStore } from "@/stores";
 import { useI18n } from "@/stores/locale";
 import { setTreeQuery, treeFiltersStore } from "@/stores/tree";
-import { capitalize } from "@/utils/capitalize";
 import { Filters } from "./Filters";
 import * as styles from "./styles.scss";
 

package/src/components/Modal/index.tsx

@@ -4,7 +4,7 @@ import { signal } from "@preact/signals";
 import type { FunctionalComponent, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import Prism from "prismjs";
-import type { AllureAwesomeTestResult } from "types";
+import type { ClassicTestResult } from "types";
 import { Attachment } from "@/components/TestResult/TestResultSteps/attachment";
 import { attachmentType, downloadAttachment, openAttachmentInNewTab } from "@/utils/attachments";
 import * as styles from "./styles.scss";
@@ -76,7 +76,7 @@ const ModalGallery: FunctionalComponent<ModalGalleryProps> = ({ attachments = []
 };
 
 export type ModalProps = {
-  testResult: AllureAwesomeTestResult;
+  testResult: ClassicTestResult;
 };
 
 const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {

package/src/components/Overview/Overview.module.scss

@@ -0,0 +1,29 @@
+.overview {
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.overview-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(50% - 12px)), 1fr));
+}
+
+.overview-grid-item {
+  padding: 4px;
+  width: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overview-grid-item-pie-chart-wrapper-squeezer {
+  width: 50%;
+}