@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

package/src/assets/scss/theme.scss

@@ -0,0 +1,326 @@
+:root:not([data-theme="dark"]) {
+  --ad-other-focus: var(--ad-other-focus-day);
+  --ad-other-modal-overlay: var(--ad-other-modal-overlay-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);
+  --bg-base-secondary: var(--bg-base-secondary-day);
+  --bg-control-flat-heavy: var(--bg-control-flat-heavy-day);
+  --bg-control-flat-medium: var(--bg-control-flat-medium-day);
+  --bg-control-flat: var(--bg-control-flat-day);
+  --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: 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);
+  --constant-on-text-primary: var(--constant-on-text-primary-day);
+  --on-border-control: var(--on-border-control-day);
+  --on-border-heavy: var(--on-border-heavy-day);
+  --on-border-medium: var(--on-border-medium-day);
+  --on-border-muted: var(--on-border-muted-day);
+  --on-border-primary: var(--on-border-primary-day);
+  --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: 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-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;
+}
+
+@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;
+  }
+}

package/src/assets/scss/typography.scss

@@ -0,0 +1,218 @@
+:root {
+  --font-family: "PTRootUIWebVF", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-mono: "JetBrainsMonoVF", ui-monospace, monospace;
+
+  /* line-heights */
+  --line-height-xxl: 40px;
+  --line-height-xl: 32px;
+  --line-height-l: 24px;
+  --line-height-m: 20px;
+  --line-height-s: 16px;
+
+  /* font-sizes */
+  --font-size-3xl: 36px;
+  --font-size-2xl: 24px;
+  --font-size-xl: 18px;
+  --font-size-l: 16px;
+  --font-size-m: 14px;
+  --font-size-m-code: 13px;
+  --font-size-s: 12px;
+  --font-size-xs: 11px;
+}
+
+:root[data-os="mac"] {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --font-weight-normal: 425;
+  --font-weight-bold: 625;
+  --font-weight-extra-bold: 700;
+}
+
+/* For non macos users font weights are different and nor antialiased */
+:root:not([data-os="mac"]) {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+
+  --font-weight-normal: 400;
+  --font-weight-bold: 600;
+  --font-weight-extra-bold: 700;
+}
+
+body {
+  /* paragraphs-text-m  */
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-l) {
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-xxl);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.016em; // -1.6%
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-m) {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-xl);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.016em; // -1.6%
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-s) {
+  font-size: var(--font-size-xl);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.01em; // -1%
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-l-bold) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-l) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-m-bold) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-m) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-s-bold) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-s) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-code-m) {
+  font-size: var(--font-size-m-code);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.paragraphs-code-s) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.ui-text-l-ui-bold) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-l-ui) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-m-ui-bold) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-m-ui) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-s-ui-bold) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-s-ui) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-xs-ui-bold) {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-xs-ui) {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-code-m-ui) {
+  font-size: var(--font-size-m-code);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.ui-code-s-ui) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}

package/src/assets/scss/vars.scss

@@ -0,0 +1,8 @@
+:root {
+  --shadow-small: 0px 2px 10px 0px rgba(48, 57, 64, 0.08);
+  --shadow-medium: 0px 8px 24px 0px rgba(48, 57, 64, 0.12);
+  --shadow-raised: 0px 2px 6px 0px rgba(48, 57, 64, 0.08);
+
+  --color-change-transition-duration: 0.15s;
+  --interaction-transition-duration: 0.1s;
+}

package/src/components/ArrowButton/index.tsx

@@ -0,0 +1,36 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export interface ArrowButtonProps {
+  isOpened?: boolean;
+  iconSize?: "m" | "xs" | "s";
+  buttonSize?: "m" | "xs" | "s";
+  className?: string;
+  icon?: string;
+}
+
+export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
+  isOpened,
+  buttonSize = "m",
+  iconSize = "xs",
+  className,
+  icon = allureIcons.lineArrowsChevronDown,
+  ...rest
+}) => {
+  return (
+    <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])} {...rest}>
+      <SvgIcon
+        id={icon}
+        size={iconSize}
+        className={clsx(
+          styles["arrow-button-icon"],
+          isOpened && styles["arrow-button-icon--opened"],
+          styles[`icon-size-${iconSize}`],
+          className,
+        )}
+      />
+    </button>
+  );
+};

package/src/components/ArrowButton/styles.scss

@@ -0,0 +1,35 @@
+.arrow-button {
+  background: transparent;
+  border: none;
+  padding: 8px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--on-icon-secondary);
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+    color: var(--on-icon-primary);
+  }
+}
+
+.arrow-button-s {
+  padding: 0 4px;
+}
+
+.arrow-button-m {
+  padding: 6px 6px;
+}
+
+.icon-size-m {
+  width: 15px;
+  height: 15px;
+}
+
+.arrow-button-icon {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.arrow-button-icon--opened {
+  transform: rotate(0);
+}

package/src/components/BaseLayout/index.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "preact/hooks";
+import Modal from "@/components/Modal";
+import SideNav from "@/components/SideNav/SideNav";
+import { fetchStats } from "@/stores";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+export const BaseLayout = ({ children }) => {
+  const { testResultId } = route.value.params;
+  const testResult = testResultStore.value;
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+  return (
+    <div className={styles.layout}>
+      <SideNav />
+      {children}
+      <Modal testResult={testResult.data?.[testResultId]} />
+    </div>
+  );
+};