@allurereport/web-awesome 3.0.0-beta.10

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,9 @@
+: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;
+  --footer-header-sizes: 105px;
+}

package/src/assets/svg/line-alerts-alert-circle.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+  <g clip-path="url(#a)">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".56"
+          stroke-width="1.5"
+          d="M8 5.333V8m0 2.666h.006M14.666 8A6.667 6.667 0 1 1 1.333 8a6.667 6.667 0 0 1 13.333 0Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="currentColor" d="M0 0h16v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/svg/line-general-eye.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".56"
+        stroke-width="1.5"
+        d="M1.613 8.475c-.09-.144-.136-.216-.161-.326a.782.782 0 0 1 0-.298c.025-.111.07-.183.161-.327C2.363 6.336 4.597 3.333 8 3.333c3.404 0 5.637 3.003 6.387 4.191.09.144.136.216.162.327.019.083.019.214 0 .298-.026.11-.071.182-.162.326-.75 1.188-2.983 4.191-6.387 4.191-3.403 0-5.636-3.003-6.387-4.19Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".56"
+        stroke-width="1.5" d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
+</svg>

package/src/assets/svg/line-icon-bomb-2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+  <g clip-path="url(#a)">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".56"
+          stroke-width="1.5"
+          d="m9.566 3.1 1.3-1.3a1.607 1.607 0 0 1 2.267 0L14.2 2.867a1.6 1.6 0 0 1 0 2.266l-1.3 1.3m1.766-5.1-1 1m-.333 6.334a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="currentColor" d="M0 0h16v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>

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: 4px 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,43 @@
+import { Loadable, PageLoader } from "@allurereport/web-components";
+import { Footer } from "@/components/Footer";
+import MainReport from "@/components/MainReport";
+import TestResult from "@/components/TestResult";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import { treeStore } from "@/stores/tree";
+import * as styles from "./styles.scss";
+
+export type BaseLayoutProps = {
+  testResultId?: string;
+};
+
+export const BaseLayout = () => {
+  const { id: testResultId } = route.value;
+
+  const content = testResultId ? (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderData={(testResult) => (
+        <>
+          <div className={styles.wrapper} key={testResult?.id}>
+            <TestResult testResult={testResult} />
+            <Footer />
+          </div>
+        </>
+      )}
+    />
+  ) : (
+    <div className={styles.wrapper}>
+      <Loadable source={treeStore} renderLoader={() => <PageLoader />} renderData={() => <MainReport />} />
+      <Footer />
+    </div>
+  );
+
+  return (
+    <div className={styles.layout} data-testid="base-layout">
+      {content}
+    </div>
+  );
+};