@allurereport/web-summary 3.0.0-beta.11

package/src/assets/scss/palette.scss

@@ -0,0 +1,393 @@
+:root {
+    --gray-25: #FCFCFDFF;
+    --gray-50: #F8FAFCFF;
+    --gray-75: #F3F6F9FF;
+    --gray-100: #EEF2F6FF;
+    --gray-150: #E9EDF3FF;
+    --gray-200: #E3E8EFFF;
+    --gray-250: #D8DFE7FF;
+    --gray-300: #CDD5DFFF;
+    --gray-350: #B3BDC9FF;
+    --gray-400: #9AA4B2FF;
+    --gray-450: #818C9CFF;
+    --gray-500: #697586FF;
+    --gray-550: #5A6576FF;
+    --gray-600: #4B5565FF;
+    --gray-650: #414B5CFF;
+    --gray-700: #364152FF;
+    --gray-750: #2B3546FF;
+    --gray-800: #202939FF;
+    --gray-900: #121926FF;
+    --gray-950: #0D121CFF;
+    --gray-1000: #000512FF;
+    --gray-0: #FFFFFFFF;
+    --brand-green-25: #F6FEFAFF;
+    --brand-green-50: #EEFCF5FF;
+    --brand-green-100: #D2F9E6FF;
+    --brand-green-200: #A6F2CFFF;
+    --brand-green-300: #6CE5B4FF;
+    --brand-green-400: #36CE94FF;
+    --brand-green-500: #16B67BFF;
+    --brand-green-600: #0B9363FF;
+    --brand-green-700: #0B7553FF;
+    --brand-green-800: #0C5A41FF;
+    --brand-green-900: #0C4B37FF;
+    --gray-alpha-day-25: #69699B05;
+    --gray-alpha-day-50: #16599C08;
+    --gray-alpha-day-75: #0F4A850D;
+    --gray-alpha-day-100: #0C457E12;
+    --gray-alpha-day-150: #0B377A17;
+    --gray-alpha-day-200: #002F701C;
+    --gray-alpha-day-250: #0B376A29;
+    --gray-alpha-day-300: #052E6133;
+    --gray-alpha-day-350: #02234B4D;
+    --gray-alpha-day-400: #031C3F66;
+    --gray-alpha-day-450: #03193A80;
+    --gray-alpha-day-500: #01153296;
+    --gray-alpha-day-550: #01132DA6;
+    --gray-alpha-day-600: #011128B5;
+    --gray-alpha-day-650: #021027BF;
+    --gray-alpha-day-700: #010D23C9;
+    --gray-alpha-day-750: #031026D6;
+    --gray-alpha-day-800: #020B1DE0;
+    --gray-alpha-day-900: #000714ED;
+    --gray-alpha-day-950: #00060FF2;
+    --gray-alpha-night-25: #FCFCFDFF;
+    --gray-alpha-night-50: #FBFCFEFC;
+    --gray-alpha-night-75: #F7FAFDFA;
+    --gray-alpha-night-100: #F5FAFFF5;
+    --gray-alpha-night-150: #F6F9FEF2;
+    --gray-alpha-night-200: #F6F9FEED;
+    --gray-alpha-night-250: #F0F7FFE3;
+    --gray-alpha-night-300: #ECF5FDDB;
+    --gray-alpha-night-350: #E8F2FCC2;
+    --gray-alpha-night-400: #E2EFFDA6;
+    --gray-alpha-night-450: #DDEBFD8C;
+    --gray-alpha-night-500: #D5E6FB73;
+    --gray-alpha-night-550: #D7E7FE5E;
+    --gray-alpha-night-600: #CEDFF84D;
+    --gray-alpha-night-650: #CDE1FE40;
+    --gray-alpha-night-700: #BED7F836;
+    --gray-alpha-night-750: #BCD6FB26;
+    --gray-alpha-night-800: #AECBF917;
+    --gray-alpha-night-900: #AECBF90A;
+    --gray-alpha-night-950: #AECBF908;
+    --gray-850: #171F2EFF;
+    --gray-neutral-25: #F9FBFCFF;
+    --gray-neutral-50: #F6F8FAFF;
+    --gray-neutral-75: #F1F5F7FF;
+    --gray-neutral-100: #EDF1F5FF;
+    --gray-neutral-150: #E8EDF1FF;
+    --gray-neutral-200: #DFE4EAFF;
+    --gray-neutral-250: #D8DEE4FF;
+    --gray-neutral-300: #C3CBD4FF;
+    --gray-neutral-350: #ADB7C2FF;
+    --gray-neutral-400: #95A0ADFF;
+    --gray-neutral-450: #727D8CFF;
+    --gray-neutral-500: #677281FF;
+    --gray-neutral-550: #5D6876FF;
+    --gray-neutral-600: #525D6BFF;
+    --gray-neutral-650: #485260FF;
+    --gray-neutral-700: #3E4755FF;
+    --gray-neutral-750: #353D4AFF;
+    --gray-neutral-800: #2C343FFF;
+    --gray-neutral-850: #242A34FF;
+    --gray-neutral-900: #1B2129FF;
+    --gray-neutral-950: #14191FFF;
+    --gray-neutral-1000: #11151AFF;
+    --gray-neutral-0: #FFFFFFFF;
+    --gray-neutral-alpha-day-25: #36799B08;
+    --gray-neutral-alpha-day-50: #1D4F810A;
+    --gray-neutral-alpha-day-75: #1658790F;
+    --gray-neutral-alpha-day-100: #1D4F8114;
+    --gray-neutral-alpha-day-150: #1A4C751A;
+    --gray-neutral-alpha-day-200: #092F5D21;
+    --gray-neutral-alpha-day-250: #0B305629;
+    --gray-neutral-alpha-day-300: #05264D3D;
+    --gray-neutral-alpha-day-350: #07254654;
+    --gray-neutral-alpha-day-400: #031C3A6B;
+    --gray-neutral-alpha-day-450: #0316308F;
+    --gray-neutral-alpha-day-500: #02132C99;
+    --gray-neutral-alpha-day-550: #021227A3;
+    --gray-neutral-alpha-day-600: #011228AD;
+    --gray-neutral-alpha-day-650: #010F23B8;
+    --gray-neutral-alpha-day-700: #010C1EC2;
+    --gray-neutral-alpha-day-750: #030C1CCC;
+    --gray-neutral-alpha-day-800: #010A18D4;
+    --gray-neutral-alpha-day-900: #020912E6;
+    --gray-neutral-alpha-day-950: #02080DED;
+    --gray-neutral-alpha-night-25: #FBFDFEFC;
+    --gray-neutral-alpha-night-50: #FAFCFFFA;
+    --gray-neutral-alpha-night-75: #F6FBFEF7;
+    --gray-neutral-alpha-night-100: #F6FAFEF5;
+    --gray-neutral-alpha-night-150: #F5FAFFF0;
+    --gray-neutral-alpha-night-200: #F5F9FFE8;
+    --gray-neutral-alpha-night-250: #F2F7FDE3;
+    --gray-neutral-alpha-night-300: #ECF4FDD1;
+    --gray-neutral-alpha-night-350: #E3EFFDBD;
+    --gray-neutral-alpha-night-400: #DEECFCA6;
+    --gray-neutral-alpha-night-450: #D2E4FE80;
+    --gray-neutral-alpha-night-500: #D1E5FF73;
+    --gray-neutral-alpha-night-550: #CCE0FA69;
+    --gray-neutral-alpha-night-600: #C6DDFB5C;
+    --gray-neutral-alpha-night-650: #C5DCFC4F;
+    --gray-neutral-alpha-night-700: #BFD6FD42;
+    --gray-neutral-alpha-night-750: #BDD4FF36;
+    --gray-neutral-alpha-night-800: #AECAF42B;
+    --gray-neutral-alpha-night-900: #9EBFF012;
+    --gray-neutral-alpha-night-950: #769AC108;
+    --gray-neutral-alpha-day-850: #000714DB;
+    --gray-neutral-alpha-night-850: #AFC5F31F;
+    --capella-day-base: #EB5C46FF;
+    --capella-day-darken-1: #E8452CFF;
+    --capella-day-darken-2: #DF3319FF;
+    --capella-day-darken-3: #CF2F17FF;
+    --capella-day-darken-4: #C62E16FF;
+    --capella-day-darken-5: #BA2B15FF;
+    --capella-day-darken-6: #A52612FF;
+    --capella-night-base: #FF8C7AFF;
+    --capella-night-darken-1: #FF6B55FF;
+    --capella-night-darken-2: #F66751FF;
+    --capella-night-darken-3: #FF4B2FFF;
+    --capella-night-darken-4: #F44C32FF;
+    --capella-night-darken-5: #E8452CFF;
+    --capella-night-darken-6: #DF3319FF;
+    --capella-night-darken-7: #C62E16FF;
+    --capella-day-darken-1-8: #E8452C14;
+    --capella-night-darken-5-12: #E8452C1F;
+    --capella-day-darken-1-16: #E8452C29;
+    --capella-day-darken-1-24: #E8452C3D;
+    --capella-night-darken-5-20: #E8452C33;
+    --capella-night-darken-5-28: #E8452C47;
+    --gliese-day-base: #EB4672FF;
+    --gliese-day-darken-1: #E82B5EFF;
+    --gliese-day-darken-2: #DF194EFF;
+    --gliese-day-darken-3: #CF1648FF;
+    --gliese-day-darken-4: #C61645FF;
+    --gliese-day-darken-5: #BB1440FF;
+    --gliese-day-darken-6: #A61139FF;
+    --gliese-day-darken-1-8: #E82B5E14;
+    --gliese-day-darken-1-16: #E82B5E29;
+    --gliese-day-darken-1-24: #E82B5E3D;
+    --gliese-night-base: #FF7A9EFF;
+    --gliese-night-darken-1: #FF5582FF;
+    --gliese-night-darken-2: #F6517DFF;
+    --gliese-night-darken-3: #FF2F66FF;
+    --gliese-night-darken-4: #F43265FF;
+    --gliese-night-darken-5: #E82C5EFF;
+    --gliese-night-darken-6: #DF194EFF;
+    --gliese-night-darken-7: #C61645FF;
+    --gliese-night-darken-5-12: #E82C5E1F;
+    --gliese-night-darken-5-20: #E82C5E33;
+    --gliese-night-darken-5-28: #E82C5E47;
+    --antares-day-base: #EB468BFF;
+    --antares-day-darken-1: #E82C7AFF;
+    --antares-day-darken-2: #DF196BFF;
+    --antares-day-darken-3: #CF1764FF;
+    --antares-day-darken-4: #C6165FFF;
+    --antares-day-darken-5: #BA155AFF;
+    --antares-day-darken-6: #A51250FF;
+    --antares-day-darken-1-8: #E82C7A14;
+    --antares-day-darken-1-16: #E82C7A29;
+    --antares-day-darken-1-24: #E82C7A3D;
+    --antares-night-base: #FF7AB1FF;
+    --antares-night-darken-1: #FF559CFF;
+    --antares-night-darken-2: #F65195FF;
+    --antares-night-darken-3: #FF2F86FF;
+    --antares-night-darken-4: #F43283FF;
+    --antares-night-darken-5: #E82C7AFF;
+    --antares-night-darken-6: #DF196BFF;
+    --antares-night-darken-7: #C6165FFF;
+    --antares-night-darken-5-12: #E82C7A1F;
+    --antares-night-darken-5-20: #E82C7A33;
+    --antares-night-darken-5-28: #E82C7A47;
+    --atlas-day-base: #EB9B46FF;
+    --atlas-day-darken-1: #E88D2CFF;
+    --atlas-day-darken-2: #DF7F19FF;
+    --atlas-day-darken-3: #CF7617FF;
+    --atlas-day-darken-4: #C67116FF;
+    --atlas-day-darken-5: #BA6A15FF;
+    --atlas-day-darken-6: #A55E12FF;
+    --atlas-day-darken-1-8: #E88D2C14;
+    --atlas-day-darken-1-16: #E88D2C29;
+    --atlas-day-darken-1-24: #E88D2C3D;
+    --atlas-night-base: #FFBF7AFF;
+    --atlas-night-darken-1: #FFAD55FF;
+    --atlas-night-darken-2: #F6A651FF;
+    --atlas-night-darken-3: #FF9A2FFF;
+    --atlas-night-darken-4: #F49632FF;
+    --atlas-night-darken-5: #E88D2CFF;
+    --atlas-night-darken-6: #DF7F19FF;
+    --atlas-night-darken-7: #C67116FF;
+    --atlas-night-darken-5-12: #E88D2C1F;
+    --atlas-night-darken-5-20: #E88D2C33;
+    --atlas-night-darken-5-28: #E88D2C47;
+    --rigel-day-base: #EBC746FF;
+    --rigel-day-darken-1: #E8BF2CFF;
+    --rigel-day-darken-2: #DFB419FF;
+    --rigel-day-darken-3: #CFA717FF;
+    --rigel-day-darken-4: #C6A016FF;
+    --rigel-day-darken-5: #BA9615FF;
+    --rigel-day-darken-6: #A58512FF;
+    --rigel-day-darken-1-8: #E8BF2C14;
+    --rigel-day-darken-1-16: #E8BF2C29;
+    --rigel-day-darken-1-24: #E8BF2C3D;
+    --rigel-night-base: #FFE27AFF;
+    --rigel-night-darken-1: #FFDA55FF;
+    --rigel-night-darken-2: #F6D251FF;
+    --rigel-night-darken-3: #FFD22FFF;
+    --rigel-night-darken-4: #F4CA32FF;
+    --rigel-night-darken-5: #E8BF2CFF;
+    --rigel-night-darken-6: #DFB419FF;
+    --rigel-night-darken-7: #C6A016FF;
+    --rigel-night-darken-5-12: #E8BF2C1F;
+    --rigel-night-darken-5-20: #E8BF2C33;
+    --rigel-night-darken-5-28: #E8BF2C47;
+    --castor-day-base: #09A232FF;
+    --castor-day-darken-1: #099337FF;
+    --castor-day-darken-2: #098632FF;
+    --castor-day-darken-3: #087D2FFF;
+    --castor-day-darken-4: #098632FF;
+    --castor-day-darken-5: #07702AFF;
+    --castor-day-darken-6: #066425FF;
+    --castor-day-darken-1-8: #09933714;
+    --castor-day-darken-1-16: #09933729;
+    --castor-day-darken-1-24: #0993373D;
+    --castor-night-base: #40DD75FF;
+    --castor-night-darken-1: #28D963FF;
+    --castor-night-darken-2: #22C258FF;
+    --castor-night-darken-3: #40BF6AFF;
+    --castor-night-darken-4: #39AC60FF;
+    --castor-night-darken-5: #29A352FF;
+    --castor-night-darken-6: #259349FF;
+    --castor-night-darken-7: #218341FF;
+    --castor-night-darken-5-12: #29A3521F;
+    --castor-night-darken-5-20: #29A35233;
+    --castor-night-darken-5-28: #29A35247;
+    --mirach-day-base: #09A284FF;
+    --mirach-day-darken-1: #099378FF;
+    --mirach-day-darken-2: #09866DFF;
+    --mirach-day-darken-3: #087D65FF;
+    --mirach-day-darken-4: #087761FF;
+    --mirach-day-darken-5: #07705BFF;
+    --mirach-day-darken-6: #066451FF;
+    --mirach-day-darken-1-8: #09937814;
+    --mirach-day-darken-1-16: #09937829;
+    --mirach-day-darken-1-24: #0993783D;
+    --mirach-night-base: #40DDBEFF;
+    --mirach-night-darken-1: #28D9B6FF;
+    --mirach-night-darken-2: #22C2A2FF;
+    --mirach-night-darken-3: #40BFA6FF;
+    --mirach-night-darken-4: #39AC95FF;
+    --mirach-night-darken-5: #29A38BFF;
+    --mirach-night-darken-6: #25937DFF;
+    --mirach-night-darken-7: #21836FFF;
+    --mirach-night-darken-5-12: #29A38B1F;
+    --mirach-night-darken-5-20: #29A38B33;
+    --mirach-night-darken-5-28: #29A38B47;
+    --aldebaran-day-base: #497CEBFF;
+    --aldebaran-day-darken-1: #2C67E8FF;
+    --aldebaran-day-darken-2: #1958DFFF;
+    --aldebaran-day-darken-3: #1751CFFF;
+    --aldebaran-day-darken-4: #164EC6FF;
+    --aldebaran-day-darken-5: #1549BAFF;
+    --aldebaran-day-darken-6: #1241A5FF;
+    --aldebaran-day-darken-1-8: #2C67E814;
+    --aldebaran-day-darken-1-16: #2C67E829;
+    --aldebaran-day-darken-1-24: #2C67E83D;
+    --aldebaran-night-base: #99BDFFFF;
+    --aldebaran-night-darken-1: #70A2FFFF;
+    --aldebaran-night-darken-2: #518AF6FF;
+    --aldebaran-night-darken-3: #4788FFFF;
+    --aldebaran-night-darken-4: #3276F4FF;
+    --aldebaran-night-darken-5: #2C6DE8FF;
+    --aldebaran-night-darken-6: #195EDFFF;
+    --aldebaran-night-darken-7: #1654C6FF;
+    --aldebaran-night-darken-5-12: #2C6DE81F;
+    --aldebaran-night-darken-5-20: #2C6DE833;
+    --aldebaran-night-darken-5-28: #2C6DE847;
+    --sirius-day-base: #49A7EBFF;
+    --sirius-day-darken-1: #2C99E8FF;
+    --sirius-day-darken-2: #198CDFFF;
+    --sirius-day-darken-3: #1782CFFF;
+    --sirius-day-darken-4: #167DC6FF;
+    --sirius-day-darken-5: #1575BAFF;
+    --sirius-day-darken-6: #1268A5FF;
+    --sirius-day-darken-1-8: #2C99E814;
+    --sirius-day-darken-1-16: #2C99E829;
+    --sirius-day-darken-1-24: #2C99E83D;
+    --sirius-night-base: #99D4FFFF;
+    --sirius-night-darken-1: #70C4FFFF;
+    --sirius-night-darken-2: #51B0F6FF;
+    --sirius-night-darken-3: #47B3FFFF;
+    --sirius-night-darken-4: #32A3F4FF;
+    --sirius-night-darken-5: #2C99E8FF;
+    --sirius-night-darken-6: #198CDFFF;
+    --sirius-night-darken-7: #167DC6FF;
+    --sirius-night-darken-5-12: #2C99E81F;
+    --sirius-night-darken-5-20: #2C99E833;
+    --sirius-night-darken-5-28: #2C99E847;
+    --betelgeuse-day-base: #8C49EBFF;
+    --betelgeuse-day-darken-1: #7A2CE8FF;
+    --betelgeuse-day-darken-2: #6B19DFFF;
+    --betelgeuse-day-darken-3: #6417CFFF;
+    --betelgeuse-day-darken-4: #5F16C6FF;
+    --betelgeuse-day-darken-5: #5A15BAFF;
+    --betelgeuse-day-darken-6: #5012A5FF;
+    --betelgeuse-day-darken-1-8: #7A2CE814;
+    --betelgeuse-day-darken-1-16: #7A2CE829;
+    --betelgeuse-day-darken-1-24: #7A2CE83D;
+    --betelgeuse-night-base: #C399FFFF;
+    --betelgeuse-night-darken-1: #AC70FFFF;
+    --betelgeuse-night-darken-2: #9551F6FF;
+    --betelgeuse-night-darken-3: #9447FFFF;
+    --betelgeuse-night-darken-4: #8332F4FF;
+    --betelgeuse-night-darken-5: #7A2CE8FF;
+    --betelgeuse-night-darken-6: #6B19DFFF;
+    --betelgeuse-night-darken-7: #5F16C6FF;
+    --betelgeuse-night-darken-5-12: #7A2CE81F;
+    --betelgeuse-night-darken-5-20: #7A2CE833;
+    --betelgeuse-night-darken-5-28: #7A2CE847;
+    --skat-day-base: #C246EBFF;
+    --skat-day-darken-1: #B92CE8FF;
+    --skat-day-darken-2: #AE19DFFF;
+    --skat-day-darken-3: #A117CFFF;
+    --skat-day-darken-4: #9A16C6FF;
+    --skat-day-darken-5: #9115BAFF;
+    --skat-day-darken-6: #8112A5FF;
+    --skat-day-darken-1-8: #B92CE814;
+    --skat-day-darken-1-16: #B92CE829;
+    --skat-day-darken-1-24: #B92CE83D;
+    --skat-night-base: #E599FFFF;
+    --skat-night-darken-1: #DB70FFFF;
+    --skat-night-darken-2: #CC51F6FF;
+    --skat-night-darken-3: #D147FFFF;
+    --skat-night-darken-4: #C432F4FF;
+    --skat-night-darken-5: #B82CE8FF;
+    --skat-night-darken-6: #AE19DFFF;
+    --skat-night-darken-7: #9A16C6FF;
+    --skat-night-darken-5-12: #B82CE81F;
+    --skat-night-darken-5-20: #B82CE833;
+    --skat-night-darken-5-28: #B82CE847;
+    --rau-day-base: #8592ADFF;
+    --rau-day-darken-1: #7281A1FF;
+    --rau-day-darken-2: #637395FF;
+    --rau-day-darken-3: #5C6A8AFF;
+    --rau-day-darken-4: #586684FF;
+    --rau-day-darken-5: #535F7CFF;
+    --rau-day-darken-6: #49546EFF;
+    --rau-day-darken-1-8: #7281A114;
+    --rau-day-darken-1-16: #7281A129;
+    --rau-day-darken-1-24: #7281A13D;
+    --rau-night-base: #B8C4E0FF;
+    --rau-night-darken-1: #9CACD3FF;
+    --rau-night-darken-2: #8899BFFF;
+    --rau-night-darken-3: #7F95C7FF;
+    --rau-night-darken-4: #7287B3FF;
+    --rau-night-darken-5: #7281A1FF;
+    --rau-night-darken-6: #637395FF;
+    --rau-night-darken-7: #586684FF;
+    --rau-night-darken-5-12: #7281A11F;
+    --rau-night-darken-5-20: #7281A133;
+    --rau-night-darken-5-28: #7281A147;
+}

package/src/assets/scss/theme.scss

@@ -0,0 +1,119 @@
+: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);
+  --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-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);
+  --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-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-atlas: var(--on-support-atlas-day);
+  --on-support-capella: var(--on-support-capella-day);
+  --on-support-castor: var(--on-support-castor-day);
+  --on-support-sirius: var(--on-support-sirius-day);
+  --on-text-hint: var(--on-text-hint-day);
+  --on-text-primary: var(--on-text-primary-day);
+  --on-text-secondary: var(--on-text-secondary-day);
+  --scrollbar-color: var(--gray-300);
+
+  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);
+
+  --scrollbar-color: var(--gray-400);
+  color-scheme: dark;
+}

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/EmptyPlaceholder/index.tsx

@@ -0,0 +1,24 @@
+import { SvgIcon, Text, allureIcons } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export type EmptyPlaceholderProps = {
+  label: string;
+};
+
+export const EmptyPlaceholder: FunctionalComponent<EmptyPlaceholderProps> = ({ label }) => {
+  return (
+    <div className={styles["empty-placeholder"]}>
+      <div className={styles["empty-placeholder-wrapper"]}>
+        <SvgIcon
+          size={"m"}
+          width={"32px"}
+          height={"32px"}
+          id={allureIcons.lineDevCodeSquare}
+          className={styles["empty-placeholder-icon"]}
+        />
+        <Text className={styles["empty-placeholder-text"]}>{label}</Text>
+      </div>
+    </div>
+  );
+};

package/src/components/EmptyPlaceholder/styles.scss

@@ -0,0 +1,25 @@
+.empty-placeholder {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  min-height: 720px;
+  align-items: center;
+}
+
+.empty-placeholder-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.empty-placeholder-icon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 16px;
+  flex: 1 1 auto;
+}
+
+.empty-placeholder-text {
+  color: var(--on-text-secondary);
+  flex: 1 1 auto;
+}

package/src/components/Footer/index.tsx

@@ -0,0 +1,21 @@
+import { ReportLogoFull, Text } from "@allurereport/web-components";
+import cx from "clsx";
+import { type FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export type FooterProps = {
+  className?: string;
+};
+
+export const Footer: FunctionalComponent<FooterProps> = ({ className }) => {
+  return (
+    <footer className={cx(styles.footer, className)}>
+      <a className={styles.link} href="https://allurereport.org" target={"_blank"} rel="noreferrer">
+        <Text type="paragraph" size="m" className={styles["logo-label"]}>
+          Powered by
+        </Text>
+        <ReportLogoFull className={styles.logo} />
+      </a>
+    </footer>
+  );
+};

package/src/components/Footer/styles.scss

@@ -0,0 +1,23 @@
+.footer {
+  display: block;
+}
+
+.logo-label {
+  color: var(--on-text-secondary);
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.logo {
+  margin-left: 8px;
+}
+
+.version {
+  color: var(--on-text-hint);
+}
+
+.link {
+  text-decoration: none;
+}

package/src/components/Header/index.tsx

@@ -0,0 +1,15 @@
+import { ReportLogo } from "@allurereport/web-components";
+import { type FunctionalComponent } from "preact";
+import { LanguagePicker } from "@/components/LanguagePicker";
+import { ThemeButton } from "@/components/ThemeButton";
+import * as styles from "./styles.scss";
+
+export const Header: FunctionalComponent = () => {
+  return (
+    <header class={styles.header}>
+      <ReportLogo className={styles.logo} />
+      <ThemeButton />
+      <LanguagePicker />
+    </header>
+  );
+};

package/src/components/Header/styles.scss

@@ -0,0 +1,8 @@
+.header {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  margin-right: auto;
+}

package/src/components/LanguagePicker/index.tsx

@@ -0,0 +1,40 @@
+import { DropdownButton, Menu } from "@allurereport/web-components";
+import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
+import { currentLocale } from "@/stores";
+import { setLocale } from "@/stores/locale";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
+  key: key as LangLocale,
+  value: full,
+}));
+
+export const LanguagePicker = () => {
+  const locale = currentLocale.value;
+  const handleSelect = (selectedOption: LangLocale) => {
+    setLocale(selectedOption);
+  };
+
+  return (
+    <Menu
+      size="s"
+      menuTrigger={({ isOpened, onClick }) => (
+        <DropdownButton
+          style="ghost"
+          size="s"
+          text={(LANG_LOCALE[locale] && LANG_LOCALE[locale].short) || LANG_LOCALE.en.short}
+          isExpanded={isOpened}
+          onClick={onClick}
+        />
+      )}
+    >
+      <Menu.Section>
+        {langPickerOptions.map(({ key, value }) => (
+          <Menu.ItemWithCheckmark onClick={() => handleSelect(key)} key={key} isChecked={locale === key}>
+            {value}
+          </Menu.ItemWithCheckmark>
+        ))}
+      </Menu.Section>
+    </Menu>
+  );
+};