From f26f74c35fd6e842de3a149f7d795c20d9670574 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sun, 14 Aug 2022 14:00:18 +0700
Subject: [PATCH] added horizon theme

---
 public/images/horizon_bg.svg                  | 188 ++++++++++++++++++
 .../bars/SubmitBar/styles.module.scss         |   2 +-
 .../charts/BasicCurveChart/index.tsx          |  27 ++-
 .../charts/StatsGraphCard/index.tsx           |  12 +-
 .../editors/EditorButtons/index.tsx           |   2 +-
 .../editors/EditorPublicSwitch/index.tsx      |   2 +-
 .../editors/EditorUploadButton/index.tsx      |   2 +-
 src/components/input/Button/index.tsx         |   1 +
 .../input/Button/styles.module.scss           |   6 +-
 .../node/NodeTitle/styles.module.scss         |   6 +-
 src/components/tags/Tag/index.tsx             |  10 +-
 .../tags/TagAutocompleteRow/index.tsx         |  13 +-
 .../TagAutocompleteRow/styles.module.scss     |   2 +-
 src/components/tags/TagWrapper/index.tsx      |  27 ++-
 .../tags/TagWrapper/styles.module.scss        |  51 ++---
 src/containers/main/Header/styles.module.scss |   8 +-
 src/containers/tags/TagInput/index.tsx        |  17 +-
 src/layouts/BorisLayout/styles.module.scss    |   3 +-
 src/styles/_colors.scss                       |  87 ++++----
 src/styles/_global.scss                       |  15 +-
 src/styles/_mixins.scss                       |  12 +-
 src/styles/themes/_default.scss               |  82 ++++++++
 src/styles/themes/_horizon.scss               |  92 +++++++++
 23 files changed, 523 insertions(+), 144 deletions(-)
 create mode 100644 public/images/horizon_bg.svg
 create mode 100644 src/styles/themes/_default.scss
 create mode 100644 src/styles/themes/_horizon.scss

diff --git a/public/images/horizon_bg.svg b/public/images/horizon_bg.svg
new file mode 100644
index 00000000..95df8cb8
--- /dev/null
+++ b/public/images/horizon_bg.svg
@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 507.99998 285.75"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2 (dc2aeda, 2022-05-15)"
+   sodipodi:docname="horizon_bg.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#13151a"
+     bordercolor="#eeeeee"
+     borderopacity="0.09019608"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#13151a"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="0.32038579"
+     inkscape:cx="995.67463"
+     inkscape:cy="413.56391"
+     inkscape:window-width="1440"
+     inkscape:window-height="847"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="spiro"
+       id="path-effect22459"
+       is_visible="true"
+       lpeversion="1" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect22457"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00159091"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="spiro"
+       id="path-effect22453"
+       is_visible="true"
+       lpeversion="1" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect22451"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00159091"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="spiro"
+       id="path-effect21147"
+       is_visible="true"
+       lpeversion="1" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect21145"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00159091"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+    <inkscape:path-effect
+       effect="spiro"
+       id="path-effect21129"
+       is_visible="true"
+       lpeversion="1" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect21127"
+       is_visible="true"
+       lpeversion="1"
+       steps="1"
+       threshold="0.00159091"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false" />
+  </defs>
+  <g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="opacity:0.306533;fill:none;fill-opacity:0.0;stroke:#f09483;stroke-width:0.529167;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m -13.404023,359.4513 c 64.752445,-26.42007 139.249563,-28.10487 205.130213,-4.63917 17.17853,6.11873 33.94284,13.98099 48.16696,25.39217 24.06989,19.30988 39.7075,47.78064 64.53703,66.10345 12.33252,9.10072 27.0801,15.5127 42.40445,15.793 12.12872,0.22185 24.06879,-3.38017 35.04591,-8.54328 14.47903,-6.81024 27.50588,-16.28693 40.72351,-25.30447 13.21763,-9.01754 26.90269,-17.71868 42.10997,-22.69468 7.471,-2.4446 15.25629,-3.97051 22.4878,-7.05225 8.77914,-3.74126 16.47728,-9.67405 23.31233,-16.33382 3.72388,-3.62838 7.2232,-7.49008 11.09816,-10.95665 3.87496,-3.46657 8.18025,-6.56048 13.05911,-8.35747 1.40252,-0.51658 2.84552,-0.92324 4.31139,-1.21504"
+       id="path21125"
+       inkscape:path-effect="#path-effect21127;#path-effect21129"
+       inkscape:original-d="m -13.404023,359.4513 c 68.133202,-2.06182 136.158393,-10.45894 204.402453,-4.7075 62.22161,5.44918 93.70365,108.93578 155.8362,107.35695 35.46729,5.17317 100.22908,-56.62492 136.91234,-63.20503 18.42654,-0.0161 36.84231,-34.39739 55.23584,-37.25263"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:1;fill:none;fill-opacity:0.0;stroke:#ffffff;stroke-width:0.529167;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:0.0437158"
+       d="m -35.273744,-47.631054 c 27.8655193,-4.467571 55.290606,-11.677849 81.750254,-21.492806 15.108431,-5.60433 29.937018,-12.066452 45.465584,-16.371897 29.838726,-8.273076 61.605496,-8.314922 92.062946,-2.734829 25.41219,4.655753 49.95769,13.118239 75.07848,19.151569 30.01569,7.208953 60.83017,10.944213 90.55978,19.254504 24.82787,6.940109 48.947,17.076176 74.53082,20.247291 4.92348,0.610266 9.89777,0.958382 14.84751,0.621896 7.64276,-0.519559 15.06749,-2.655026 22.56137,-4.243575 7.49388,-1.588548 15.30482,-2.630251 22.78002,-0.955997 5.87184,1.315142 11.2334,4.236509 16.75844,6.620201 14.94531,6.447916 31.54085,9.026402 47.73802,7.417166"
+       id="path22455"
+       inkscape:path-effect="#path-effect22457;#path-effect22459"
+       inkscape:original-d="m -35.273744,-47.631054 c 25.108892,-9.876725 51.314867,-15.821372 77.764663,-20.684129 17.126021,-3.062627 32.648966,-11.286932 48.735268,-17.040746 30.538763,-6.040552 61.924273,-2.500492 92.778853,-2.874657 25.71357,3.727857 48.7024,18.445058 75.07848,19.151569 30.2774,5.857757 61.34056,8.682511 90.55978,19.254504 28.2425,4.27256 53.37486,22.628403 82.66504,20.043603 20.61259,4.722435 39.75385,-12.566395 59.40326,-1.432633 17.92226,8.58434 37.90914,7.998127 57.14788,11.096012" />
+    <g
+       id="g30558">
+      <path
+         d="M -13.404 359.451 C 13.702 348.392 42.5156 341.666 71.6899 339.306 C 88.3449 337.959 105.117 338.034 121.757 339.537 C 145.599 341.691 169.168 346.777 191.726 354.812 C 199.411 357.549 207.012 360.635 214.34 364.232 C 223.395 368.675 232.032 373.898 239.893 380.204 C 252.921 390.656 263.478 403.791 274.36 416.548 C 283.583 427.361 293.039 437.902 304.43 446.308 C 316.763 455.408 331.51 461.82 346.835 462.101 C 349.392 462.148 351.94 462.024 354.473 461.752 C 363.955 460.734 373.218 457.632 381.881 453.557 C 396.36 446.747 409.386 437.271 422.604 428.253 C 423.554 427.605 424.507 426.958 425.463 426.314 C 429.725 423.442 434.043 420.628 438.452 417.985 C 445.286 413.887 452.337 410.198 459.736 407.336 C 461.378 406.701 463.037 406.107 464.714 405.558 C 470.586 403.637 476.653 402.283 482.492 400.295 C 484.082 399.754 485.654 399.166 487.202 398.506 C 491.404 396.715 495.358 394.423 499.089 391.788 C 503.152 388.919 506.951 385.644 510.514 382.172 C 514.238 378.544 517.737 374.682 521.612 371.216 C 525.487 367.749 529.793 364.655 534.671 362.858 C 536.074 362.342 537.517 361.935 538.983 361.643"
+         style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:1.0;stroke-width:0.529167px;opacity:0.306533"
+         id="path30526" />
+      <path
+         d="M -13.4045 359.443 C 13.7016 348.384 42.5151 341.658 71.6894 339.298 C 88.3444 337.95 105.117 338.025 121.756 339.529 C 145.598 341.682 169.167 346.768 191.726 354.803 C 199.41 357.54 207.012 360.626 214.34 364.223 C 223.394 368.666 232.031 373.889 239.893 380.195 C 252.92 390.646 263.478 403.781 274.36 416.538 C 283.583 427.351 293.039 437.892 304.43 446.298 C 316.763 455.398 331.51 461.81 346.835 462.091 C 349.391 462.137 351.94 462.014 354.473 461.742 C 363.955 460.724 373.217 457.622 381.88 453.548 C 396.359 446.738 409.386 437.261 422.604 428.244 C 423.554 427.596 424.507 426.949 425.463 426.305 C 429.725 423.433 434.043 420.62 438.452 417.976 C 445.286 413.878 452.337 410.189 459.737 407.327 C 461.378 406.693 463.037 406.098 464.714 405.55 C 470.586 403.628 476.653 402.274 482.492 400.286 C 484.082 399.745 485.654 399.157 487.202 398.498 C 491.404 396.707 495.358 394.414 499.089 391.78 C 503.153 388.911 506.951 385.636 510.514 382.164 C 514.238 378.536 517.737 374.674 521.612 371.208 C 525.487 367.741 529.793 364.648 534.672 362.851 C 536.074 362.334 537.517 361.927 538.983 361.636"
+         style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9999811104355556;stroke-width:0.529167px;opacity:0.30654669811358026"
+         id="path30528" />
+      <path
+         d="M -13.4109 359.323 C 13.6953 348.265 42.5085 341.54 71.6819 339.177 C 88.3364 337.828 105.108 337.901 121.748 339.403 C 145.589 341.554 169.158 346.638 191.716 354.671 C 199.401 357.408 207.002 360.493 214.331 364.089 C 223.385 368.531 232.023 373.753 239.884 380.058 C 252.913 390.508 263.472 403.64 274.355 416.394 C 283.58 427.205 293.037 437.744 304.429 446.147 C 316.762 455.246 331.509 461.657 346.833 461.938 C 349.39 461.985 351.939 461.862 354.471 461.591 C 363.953 460.574 373.216 457.473 381.879 453.401 C 396.358 446.594 409.385 437.122 422.604 428.108 C 423.554 427.46 424.507 426.814 425.462 426.17 C 429.725 423.299 434.043 420.486 438.452 417.843 C 445.286 413.747 452.338 410.058 459.737 407.197 C 461.379 406.562 463.037 405.968 464.715 405.419 C 470.587 403.498 476.653 402.145 482.492 400.158 C 484.082 399.617 485.655 399.029 487.202 398.37 C 491.404 396.58 495.359 394.289 499.089 391.656 C 503.153 388.788 506.952 385.515 510.515 382.044 C 514.24 378.417 517.739 374.557 521.615 371.092 C 525.49 367.627 529.796 364.534 534.675 362.737 C 536.077 362.221 537.52 361.814 538.986 361.522"
+         style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9996977669688889;stroke-width:0.529167px;opacity:0.3067521698172839"
+         id="path30530" />
+      <path
+         d="M -13.439 358.8 C 13.6682 347.751 42.4796 341.025 71.6495 338.653 C 88.3021 337.298 105.072 337.363 121.709 338.857 C 145.549 340.998 169.117 346.073 191.676 354.098 C 199.361 356.832 206.963 359.915 214.292 363.508 C 223.347 367.947 231.985 373.165 239.849 379.465 C 252.881 389.907 263.446 403.028 274.336 415.771 C 283.565 426.571 293.028 437.1 304.422 445.496 C 316.758 454.587 331.505 460.993 346.828 461.279 C 349.384 461.326 351.933 461.204 354.465 460.934 C 363.946 459.922 373.208 456.829 381.871 452.765 C 396.351 445.973 409.38 436.519 422.601 427.52 C 423.552 426.873 424.505 426.227 425.461 425.585 C 429.724 422.719 434.043 419.91 438.453 417.269 C 445.288 413.177 452.34 409.491 459.739 406.631 C 461.381 405.997 463.04 405.403 464.717 404.855 C 470.589 402.935 476.656 401.583 482.495 399.6 C 484.085 399.06 485.657 398.474 487.205 397.816 C 491.407 396.031 495.361 393.745 499.092 391.117 C 503.156 388.256 506.956 384.989 510.521 381.524 C 514.247 377.904 517.748 374.05 521.625 370.589 C 525.502 367.129 529.808 364.04 534.687 362.246 C 536.09 361.73 537.533 361.324 538.999 361.032"
+         style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.99846994528;stroke-width:0.529167px;opacity:0.3076425472"
+         id="path30532" />
+      <path
+         d="M -13.5146 357.393 C 13.5952 346.366 42.4018 339.639 71.5624 337.241 C 88.2096 335.872 104.972 335.914 121.606 337.388 C 145.44 339.5 169.008 344.552 191.569 352.556 C 199.254 355.282 206.857 358.358 214.187 361.944 C 223.244 366.373 231.885 371.581 239.754 377.869 C 252.795 388.288 263.377 401.38 274.283 414.092 C 283.526 424.866 293.003 435.367 304.403 443.743 C 316.747 452.812 331.494 459.205 346.813 459.502 C 349.369 459.552 351.916 459.433 354.449 459.165 C 363.927 458.165 373.188 455.093 381.851 451.053 C 396.332 444.302 409.367 434.896 422.595 425.936 C 423.546 425.291 424.5 424.649 425.456 424.009 C 429.722 421.155 434.043 418.357 438.455 415.725 C 445.293 411.645 452.346 407.963 459.746 405.108 C 461.388 404.475 463.046 403.882 464.724 403.335 C 470.596 401.418 476.662 400.069 482.501 398.098 C 484.091 397.561 485.664 396.979 487.211 396.325 C 491.413 394.551 495.367 392.28 499.099 389.668 C 503.165 386.823 506.966 383.573 510.536 380.124 C 514.265 376.521 517.772 372.683 521.652 369.236 C 525.533 365.79 529.842 362.712 534.721 360.923 C 536.124 360.409 537.567 360.004 539.033 359.713"
+         style="fill:none;stroke:#f09483;fill-opacity:0.0;stroke-opacity:0.9951642715022222;stroke-width:0.529167px;opacity:0.3100397170765432"
+         id="path30534" />
+      <path
+         d="M -13.674 354.426 C 13.4414 343.447 42.2378 336.716 71.3786 334.264 C 88.0145 332.864 104.763 332.858 121.389 334.29 C 145.211 336.341 168.777 341.345 191.342 349.304 C 199.028 352.015 206.633 355.076 213.966 358.646 C 223.026 363.056 231.673 368.242 239.553 374.502 C 252.613 384.875 263.231 397.906 274.171 410.552 C 283.444 421.271 292.949 431.713 304.365 440.046 C 316.725 449.068 331.469 455.435 346.781 455.757 C 349.336 455.811 351.882 455.697 354.413 455.437 C 363.888 454.462 373.145 451.434 381.809 447.444 C 396.292 440.777 409.34 431.474 422.583 422.595 C 423.535 421.957 424.489 421.32 425.447 420.686 C 429.717 417.857 434.043 415.082 438.459 412.467 C 445.303 408.413 452.359 404.743 459.759 401.897 C 461.401 401.266 463.06 400.675 464.737 400.13 C 470.61 398.22 476.676 396.879 482.515 394.931 C 484.105 394.401 485.677 393.826 487.224 393.182 C 491.425 391.431 495.38 389.192 499.114 386.612 C 503.182 383.801 506.989 380.586 510.566 377.172 C 514.304 373.604 517.821 369.801 521.71 366.384 C 525.599 362.966 529.913 359.912 534.793 358.134 C 536.196 357.623 537.639 357.22 539.105 356.93"
+         style="fill:none;stroke:#f09584;fill-opacity:0.0;stroke-opacity:0.9881940222222222;stroke-width:0.529167px;opacity:0.31509432098765433"
+         id="path30536" />
+      <path
+         d="M -13.9639 349.03 C 13.1616 338.139 41.9396 331.401 71.0444 328.85 C 87.6598 327.394 104.383 327.302 120.994 328.656 C 144.795 330.597 168.358 335.512 190.929 343.39 C 198.618 346.074 206.225 349.108 213.564 352.649 C 222.631 357.023 231.288 362.171 239.189 368.38 C 252.282 378.669 262.965 391.589 273.969 404.116 C 283.295 414.733 292.853 425.069 304.295 433.324 C 316.684 442.262 331.426 448.58 346.724 448.947 C 349.276 449.008 351.821 448.904 354.349 448.656 C 363.816 447.728 373.066 444.779 381.733 440.881 C 396.219 434.367 409.29 425.25 422.56 416.521 C 423.514 415.893 424.47 415.267 425.43 414.643 C 429.709 411.861 434.044 409.128 438.467 406.543 C 445.321 402.537 452.382 398.887 459.784 396.058 C 461.426 395.431 463.085 394.844 464.762 394.302 C 470.636 392.405 476.701 391.077 482.54 389.173 C 484.129 388.655 485.702 388.094 487.248 387.465 C 491.448 385.758 495.403 383.576 499.141 381.054 C 503.213 378.306 507.031 375.156 510.622 371.804 C 514.375 368.301 517.911 364.561 521.815 361.196 C 525.718 357.832 530.042 354.82 534.924 353.062 C 536.328 352.557 537.771 352.158 539.236 351.87"
+         style="fill:none;stroke:#f09686;fill-opacity:0.0;stroke-opacity:0.97551912448;stroke-width:0.529167px;opacity:0.3242857552"
+         id="path30538" />
+      <path
+         d="M -14.4412 340.145 C 12.7008 329.397 41.4485 322.649 70.4941 319.935 C 87.0757 318.386 103.756 318.151 120.343 319.379 C 144.11 321.138 167.667 325.908 190.249 333.652 C 197.942 336.29 205.554 339.279 212.902 342.773 C 221.98 347.088 230.654 352.172 238.588 358.298 C 251.737 368.45 262.526 381.185 273.636 393.516 C 283.05 403.967 292.693 414.127 304.179 422.254 C 316.616 431.053 331.353 437.291 346.63 437.731 C 349.178 437.805 351.719 437.717 354.244 437.49 C 363.697 436.638 372.938 433.82 381.607 430.073 C 396.098 423.811 409.208 415.001 422.522 406.518 C 423.479 405.908 424.439 405.299 425.402 404.692 C 429.695 401.986 434.044 399.322 438.479 396.788 C 445.351 392.859 452.421 389.244 459.824 386.443 C 461.466 385.821 463.126 385.24 464.803 384.704 C 470.678 382.828 476.742 381.522 482.581 379.69 C 484.17 379.192 485.742 378.654 487.288 378.051 C 491.486 376.416 495.44 374.328 499.185 371.901 C 503.265 369.258 507.1 366.213 510.715 362.964 C 514.492 359.568 518.06 355.932 521.988 352.654 C 525.915 349.376 530.255 346.435 535.14 344.71 C 536.544 344.215 537.987 343.822 539.451 343.537"
+         style="fill:none;stroke:#f09988;fill-opacity:0.0;stroke-opacity:0.9546461557688889;stroke-width:0.529167px;opacity:0.33942217070617287"
+         id="path30540" />
+      <path
+         d="M -15.1735 326.515 C 11.994 315.988 40.6952 309.224 69.6499 306.261 C 86.1798 304.569 102.795 304.115 119.345 305.148 C 143.058 306.629 166.608 311.174 189.207 318.714 C 196.905 321.282 204.524 324.203 211.886 327.623 C 220.981 331.849 229.682 336.834 237.667 342.833 C 250.901 352.773 261.854 365.227 273.124 377.256 C 282.673 387.452 292.449 397.343 304.002 405.273 C 316.513 413.858 331.243 419.974 346.485 420.528 C 349.028 420.62 351.563 420.558 354.082 420.361 C 363.515 419.627 372.74 417.009 381.414 413.494 C 395.914 407.619 409.081 399.28 422.464 391.174 C 423.426 390.592 424.391 390.009 425.358 389.429 C 429.674 386.839 434.045 384.28 438.498 381.823 C 445.397 378.015 452.479 374.451 459.886 371.693 C 461.529 371.081 463.188 370.509 464.866 369.982 C 470.742 368.138 476.805 366.866 482.643 365.144 C 484.233 364.676 485.803 364.173 487.349 363.611 C 491.544 362.085 495.498 360.142 499.253 357.861 C 503.345 355.378 507.205 352.495 510.856 349.403 C 514.671 346.171 518.288 342.695 522.253 339.55 C 526.218 336.405 530.581 333.572 535.471 331.899 C 536.876 331.418 538.319 331.035 539.782 330.755"
+         style="fill:none;stroke:#f19c8d;fill-opacity:0.0;stroke-opacity:0.9226283440355556;stroke-width:0.529167px;opacity:0.36264047322469134"
+         id="path30542" />
+      <path
+         d="M -16.2383 306.693 C 10.9661 296.488 39.5997 289.7 68.4222 286.374 C 84.8768 284.474 101.397 283.702 117.893 284.453 C 141.529 285.528 165.067 289.749 187.69 296.989 C 195.397 299.456 203.027 302.278 210.409 305.592 C 219.528 309.687 228.268 314.529 236.327 320.342 C 249.685 329.976 260.877 342.019 272.38 353.611 C 282.125 363.435 292.094 372.934 303.745 380.577 C 316.362 388.853 331.082 394.791 346.275 395.508 C 348.809 395.628 351.335 395.603 353.847 395.452 C 363.251 394.888 372.453 392.562 381.133 389.383 C 395.646 384.071 408.898 376.418 422.38 368.86 C 423.349 368.317 424.321 367.773 425.296 367.231 C 429.644 364.81 434.047 362.406 438.526 360.061 C 445.464 356.427 452.564 352.939 459.976 350.243 C 461.619 349.645 463.28 349.086 464.957 348.572 C 470.836 346.775 476.897 345.552 482.734 343.99 C 484.323 343.565 485.893 343.114 487.438 342.611 C 491.629 341.244 495.582 339.511 499.352 337.444 C 503.461 335.193 507.358 332.546 511.062 329.682 C 514.932 326.689 518.619 323.444 522.638 320.493 C 526.657 317.542 531.056 314.866 535.951 313.267 C 537.359 312.808 538.801 312.439 540.263 312.167"
+         style="fill:none;stroke:#f1a193;fill-opacity:0.0;stroke-opacity:0.87606556768;stroke-width:0.529167px;opacity:0.3964063232"
+         id="path30544" />
+      <path
+         d="M -17.724 279.04 C 9.53206 269.282 38.0714 262.461 66.7095 258.629 C 83.059 256.44 99.4475 255.224 115.868 255.58 C 139.396 256.089 162.918 259.857 185.575 266.681 C 193.293 269.005 200.939 271.69 208.348 274.856 C 217.501 278.768 226.295 283.411 234.457 288.965 C 247.989 298.17 259.514 309.641 271.342 320.622 C 281.361 329.927 291.598 338.881 303.385 346.124 C 316.153 353.968 330.857 359.657 345.981 360.604 C 348.504 360.761 351.018 360.788 353.519 360.7 C 362.882 360.374 372.051 358.455 380.741 355.746 C 395.272 351.219 408.642 344.521 422.262 337.729 C 423.242 337.241 424.224 336.751 425.208 336.261 C 429.601 334.078 434.049 331.888 438.564 329.7 C 445.558 326.309 452.683 322.927 460.101 320.317 C 461.746 319.738 463.407 319.197 465.085 318.703 C 470.967 316.97 477.025 315.815 482.861 314.478 C 484.45 314.114 486.018 313.735 487.561 313.314 C 491.747 312.169 495.7 310.729 499.49 308.959 C 503.623 307.033 507.571 304.714 511.349 302.169 C 515.295 299.509 519.081 296.588 523.175 293.907 C 527.27 291.226 531.718 288.769 536.622 287.274 C 538.032 286.844 539.474 286.496 540.934 286.234"
+         style="fill:none;stroke:#f2a99b;fill-opacity:0.0;stroke-opacity:0.8111043555555556;stroke-width:0.529167px;opacity:0.4435141358024691"
+         id="path30546" />
+      <path
+         d="M -19.7289 241.721 C 7.5968 232.568 36.0088 225.702 64.3981 221.186 C 80.6058 218.608 96.8161 216.792 113.134 216.615 C 136.518 216.362 160.017 219.517 182.72 225.779 C 190.454 227.912 198.12 230.411 205.567 233.377 C 214.766 237.042 223.633 241.416 231.935 246.62 C 245.7 255.247 257.674 265.946 269.942 276.102 C 280.33 284.708 290.928 292.926 302.9 299.629 C 315.87 306.889 330.553 312.243 345.585 313.499 C 348.092 313.708 350.591 313.804 353.076 313.802 C 362.384 313.796 371.51 312.427 380.213 310.351 C 394.767 306.884 408.296 301.476 422.104 295.717 C 423.097 295.303 424.092 294.886 425.09 294.468 C 429.544 292.603 434.051 290.704 438.617 288.727 C 445.684 285.664 452.844 282.425 460.271 279.931 C 461.916 279.378 463.579 278.862 465.256 278.393 C 471.143 276.748 477.198 275.686 483.033 274.65 C 484.621 274.368 486.187 274.086 487.728 273.776 C 491.907 272.931 495.859 271.887 499.677 270.518 C 503.841 269.029 507.859 267.155 511.736 265.04 C 515.786 262.829 519.704 260.344 523.901 258.028 C 528.098 255.712 532.612 253.55 537.528 252.195 C 538.941 251.805 540.382 251.485 541.839 251.236"
+         style="fill:none;stroke:#f4b2a6;fill-opacity:0.0;stroke-opacity:0.7234378869688889;stroke-width:0.529167px;opacity:0.507087080928395"
+         id="path30548" />
+      <path
+         d="M -22.3619 192.71 C 5.05524 184.351 33.3001 177.427 61.3625 172.013 C 77.384 168.922 93.3603 166.32 109.545 165.444 C 132.737 164.188 156.208 166.539 178.971 172.063 C 186.725 173.945 194.418 176.199 201.915 178.903 C 211.174 182.243 220.136 186.264 228.622 191.01 C 242.694 198.876 255.257 208.561 268.103 217.635 C 278.976 225.322 290.05 232.572 302.263 238.568 C 315.498 245.061 330.155 249.974 345.065 251.636 C 347.551 251.913 350.029 252.1 352.495 252.211 C 361.73 252.626 370.8 251.979 379.518 250.735 C 394.104 248.659 407.843 244.945 421.895 240.542 C 422.906 240.226 423.919 239.905 424.935 239.581 C 429.468 238.136 434.055 236.617 438.685 234.918 C 445.85 232.286 453.055 229.233 460.493 226.893 C 462.14 226.374 463.804 225.891 465.482 225.454 C 471.375 223.924 477.426 222.984 483.258 222.344 C 484.846 222.17 486.409 222.016 487.947 221.851 C 492.116 221.4 496.067 220.876 499.921 220.034 C 504.128 219.119 508.237 217.828 512.245 216.278 C 516.43 214.658 520.523 212.745 524.853 210.908 C 529.184 209.072 533.786 207.297 538.717 206.126 C 540.135 205.79 541.575 205.505 543.028 205.274"
+         style="fill:none;stroke:#f6bfb5;fill-opacity:0.0;stroke-opacity:0.60830599168;stroke-width:0.529167px;opacity:0.5905770832000001"
+         id="path30550" />
+      <path
+         d="M -25.7422 129.789 C 1.79228 122.448 29.8225 115.449 57.4653 108.883 C 73.2478 105.134 88.9236 101.521 104.936 99.7472 C 127.884 97.2046 151.317 98.5235 174.157 103.1 C 181.938 104.659 189.666 106.6 197.226 108.967 C 206.562 111.891 215.647 115.458 224.368 119.614 C 238.835 126.506 252.155 134.889 265.742 142.573 C 277.237 149.081 288.921 155.089 301.446 160.174 C 315.021 165.683 329.644 170.031 344.398 172.215 C 346.856 172.578 349.307 172.882 351.748 173.137 C 360.891 174.094 369.887 174.373 378.627 174.197 C 393.253 173.908 407.26 172.369 421.628 169.707 C 422.661 169.516 423.697 169.318 424.736 169.115 C 429.371 168.208 434.059 167.178 438.773 165.835 C 446.064 163.756 453.326 160.944 460.778 158.8 C 462.428 158.326 464.094 157.884 465.772 157.49 C 471.673 156.107 477.717 155.323 483.548 155.192 C 485.135 155.157 486.694 155.167 488.228 155.188 C 492.385 155.242 496.334 155.386 500.236 155.22 C 504.496 155.043 508.723 154.5 512.898 153.676 C 517.257 152.813 521.574 151.636 526.076 150.414 C 530.58 149.193 535.292 147.916 540.244 146.981 C 541.667 146.713 543.107 146.474 544.555 146.266"
+         style="fill:none;stroke:#f8d0c8;fill-opacity:0.0;stroke-opacity:0.4604951499022222;stroke-width:0.529167px;opacity:0.6977648219654322"
+         id="path30552" />
+      <path
+         d="M -29.9995 50.5431 C -2.31717 44.4858 25.4428 37.3925 52.5571 29.3753 C 68.0385 24.7976 83.3359 19.912 99.1324 17.0074 C 121.771 12.8444 145.158 12.8634 168.095 16.2469 C 175.91 17.3995 183.68 18.9443 191.321 20.8877 C 200.754 23.2874 209.994 26.2834 219.011 29.6977 C 233.975 35.361 248.247 42.1037 262.768 48.0374 C 275.047 53.06 287.501 57.5034 300.416 61.4436 C 314.419 65.7134 329 69.3485 343.557 72.1893 C 345.981 72.6622 348.399 73.1131 350.808 73.5502 C 359.834 75.1884 368.738 76.6343 377.504 77.8031 C 392.181 79.7648 406.526 80.964 421.291 80.4956 C 422.353 80.462 423.418 80.4196 424.485 80.368 C 429.249 80.1385 434.065 79.7241 438.884 78.8311 C 446.332 77.4486 453.667 74.9384 461.138 73.0429 C 462.79 72.6235 464.458 72.2341 466.137 71.8937 C 472.048 70.6966 478.084 70.109 483.912 70.6194 C 485.498 70.7583 487.052 70.9748 488.582 71.231 C 492.723 71.9215 496.671 72.9064 500.631 73.5915 C 504.96 74.3443 509.334 74.7434 513.721 74.8326 C 518.299 74.9242 522.897 74.674 527.617 74.2267 C 532.337 73.7795 537.19 73.1296 542.166 72.4928 C 543.597 72.3097 545.036 72.1285 546.478 71.9499"
+         style="fill:none;stroke:#fbe5e1;fill-opacity:0.0;stroke-opacity:0.2743384923022222;stroke-width:0.529167px;opacity:0.8327597312987656"
+         id="path30554" />
+      <path
+         d="M -35.2737 -47.6311 C -7.40822 -52.0986 20.0169 -59.3089 46.4765 -69.1239 C 61.5849 -74.7282 76.4135 -81.1903 91.9421 -85.4958 C 114.198 -91.6665 137.527 -93.2579 160.585 -91.3527 C 168.441 -90.7036 176.265 -89.6486 184.005 -88.2306 C 193.559 -86.4803 202.99 -84.1919 212.375 -81.6969 C 227.954 -77.5553 243.407 -72.8441 259.084 -69.079 C 272.334 -65.8966 285.74 -63.3912 299.14 -60.8702 C 313.675 -58.1358 328.202 -55.3831 342.515 -51.7285 C 344.897 -51.1202 347.274 -50.4869 349.643 -49.8245 C 358.524 -47.3421 367.314 -44.4507 376.113 -41.6154 C 390.853 -36.8659 405.617 -32.2739 420.874 -30.0253 C 421.971 -29.8635 423.071 -29.7139 424.174 -29.5772 C 429.098 -28.967 434.072 -28.6188 439.022 -28.9553 C 446.664 -29.4749 454.089 -31.6104 461.583 -33.1989 C 463.239 -33.5499 464.91 -33.8742 466.59 -34.1484 C 472.512 -35.1152 478.539 -35.4592 484.363 -34.1549 C 485.949 -33.7998 487.497 -33.3276 489.021 -32.7804 C 493.142 -31.3013 497.088 -29.2747 501.121 -27.5347 C 505.535 -25.6307 510.092 -24.0641 514.74 -22.8431 C 519.589 -21.5693 524.537 -20.6716 529.525 -20.1594 C 534.513 -19.647 539.541 -19.5203 544.548 -19.7883 C 545.987 -19.8653 547.425 -19.975 548.859 -20.1175"
+         style="fill:none;stroke:#ffffff;fill-opacity:0.0;stroke-opacity:0.04371579999999997;stroke-width:0.529167px;opacity:1.0"
+         id="path30556" />
+    </g>
+  </g>
+</svg>
diff --git a/src/components/bars/SubmitBar/styles.module.scss b/src/components/bars/SubmitBar/styles.module.scss
index 8c605dc6..e9755f9c 100644
--- a/src/components/bars/SubmitBar/styles.module.scss
+++ b/src/components/bars/SubmitBar/styles.module.scss
@@ -14,7 +14,7 @@
 }
 
 .button {
-  background: $danger_gradient;
+  background: $flow_gradient;
   width: $bar_height;
   height: $bar_height;
   border-radius: $bar_height * 0.5;
diff --git a/src/components/charts/BasicCurveChart/index.tsx b/src/components/charts/BasicCurveChart/index.tsx
index 33c8b85f..e86b4973 100644
--- a/src/components/charts/BasicCurveChart/index.tsx
+++ b/src/components/charts/BasicCurveChart/index.tsx
@@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         (acc, val, index) => [
           ...acc,
           index === 0
-            ? { x: borderGap, y: height - (val / max) * (height - gap * 2) - gap }
+            ? {
+                x: borderGap,
+                y: height - (val / max) * (height - gap * 2) - gap,
+              }
             : {
                 x: ((width - borderGap) / (items.length - 1)) * index,
                 y: height - (val / max) * (height - gap * 2) - gap,
               },
         ],
-        []
+        [],
       ),
-    [height, width, items, gap]
+    [height, width, items, gap],
   );
 
   if (!points.length) {
@@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
       {...props}
       width="100%"
       height="100%"
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 ${width} ${height * 1.05}`}
       preserveAspectRatio="none"
     >
       <defs>
         <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
         </filter>
+
+        <filter id="brighter">
+          <feComponentTransfer>
+            <feFuncR type="linear" slope="3" />
+            <feFuncG type="linear" slope="3" />
+            <feFuncB type="linear" slope="3" />
+          </feComponentTransfer>
+        </filter>
       </defs>
 
       <path
         d={makeBezierCurve(points)}
         fill="none"
         x={0}
-        y={0}
+        y={gap / 2}
+        opacity={0.5}
         stroke={stroke}
         strokeWidth={2}
         strokeLinecap="round"
@@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         fill="none"
         x={0}
         y={0}
+        opacity={0.3}
         stroke={stroke}
         strokeWidth={2}
         strokeLinecap="round"
@@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         fill="none"
         x={0}
         y={0}
-        stroke={lighten(stroke, 0.1)}
+        stroke={stroke}
+        opacity={1}
         strokeWidth={1}
         strokeLinecap="round"
+        filter="url(#brighter)"
       />
     </svg>
   );
diff --git a/src/components/charts/StatsGraphCard/index.tsx b/src/components/charts/StatsGraphCard/index.tsx
index 6a727876..ce17e6c7 100644
--- a/src/components/charts/StatsGraphCard/index.tsx
+++ b/src/components/charts/StatsGraphCard/index.tsx
@@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
   right?: string | number;
 }
 
-const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
+const StatsGraphCard: VFC<StatsGraphCardProps> = ({
+  total,
+  title,
+  data,
+  left,
+  right,
+}) => (
   <StatsCard
     title={title}
     total={total}
-    background={<BasicCurveChart items={data} />}
+    background={
+      <BasicCurveChart items={data} stroke={'var(--color_primary)'} />
+    }
     className={styles.card}
   >
     <div className={styles.content}>
diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx
index 7857774f..2ffb1e72 100644
--- a/src/components/editors/EditorButtons/index.tsx
+++ b/src/components/editors/EditorButtons/index.tsx
@@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
         <Button
           title={isTablet ? undefined : 'Сохранить'}
           iconRight="check"
-          color={values.is_promoted ? 'danger' : 'info'}
+          color={values.is_promoted ? 'flow' : 'lab'}
           disabled={isSubmitting}
           type="submit"
         />
diff --git a/src/components/editors/EditorPublicSwitch/index.tsx b/src/components/editors/EditorPublicSwitch/index.tsx
index 5830a0b6..9ecd89fa 100644
--- a/src/components/editors/EditorPublicSwitch/index.tsx
+++ b/src/components/editors/EditorPublicSwitch/index.tsx
@@ -19,7 +19,7 @@ const EditorPublicSwitch: FC<IProps> = () => {
 
   return (
     <Button
-      color={values.is_promoted ? 'danger' : 'info'}
+      color={values.is_promoted ? 'flow' : 'lab'}
       type="button"
       size="giant"
       label={
diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx
index 7353c196..a4e07a22 100644
--- a/src/components/editors/EditorUploadButton/index.tsx
+++ b/src/components/editors/EditorUploadButton/index.tsx
@@ -39,7 +39,7 @@ const EditorUploadButton: FC<IProps> = ({
     [type, uploadFiles],
   );
 
-  const color = values.is_promoted ? 'danger' : 'info';
+  const color = values.is_promoted ? 'flow' : 'lab';
 
   return (
     <Button
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index a03528d7..9c7075ee 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -27,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
     | 'outline'
     | 'link'
     | 'gray'
+    | 'flow'
     | 'lab'
     | 'outline-white'
     | 'flat';
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index acaa6a55..5e98344b 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -244,7 +244,11 @@
 }
 
 .lab {
-  background: $color_lab;
+  background: $lab_gradient;
+}
+
+.flow {
+  background: $flow_gradient;
 }
 
 .flat {
diff --git a/src/components/node/NodeTitle/styles.module.scss b/src/components/node/NodeTitle/styles.module.scss
index 4a3ec9c6..dd30b4bd 100644
--- a/src/components/node/NodeTitle/styles.module.scss
+++ b/src/components/node/NodeTitle/styles.module.scss
@@ -96,16 +96,16 @@
     opacity: 1;
 
     svg {
-      fill: $color_danger;
+      fill: $color_like;
     }
 
     .like_count {
-      color: $color_danger;
+      color: $color_like;
     }
   }
 
   &:hover {
-    fill: $color_danger;
+    fill: $color_like;
     animation: pulse 0.75s infinite;
 
     .like_count {
diff --git a/src/components/tags/Tag/index.tsx b/src/components/tags/Tag/index.tsx
index 02adb8c8..fe3eea23 100644
--- a/src/components/tags/Tag/index.tsx
+++ b/src/components/tags/Tag/index.tsx
@@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import { ITag } from '~/types';
 
-const getTagFeature = (tag: Partial<ITag>) => {
-  if (tag?.title?.substr(0, 1) === '/') return 'green';
-
-  return '';
-};
-
 interface IProps {
   tag: Partial<ITag>;
   size?: 'normal' | 'big';
@@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
     onDelete(tag.ID!);
   }, [onDelete, tag]);
 
+  const isAlbumTag = tag?.title?.substr(0, 1) === '/';
+
   return (
     <TagWrapper
-      feature={getTagFeature(tag)}
+      color={isAlbumTag ? 'primary' : undefined}
       size={size}
       deletable={deletable}
       hoverable={hoverable}
diff --git a/src/components/tags/TagAutocompleteRow/index.tsx b/src/components/tags/TagAutocompleteRow/index.tsx
index 6e49cea0..67c32a6f 100644
--- a/src/components/tags/TagAutocompleteRow/index.tsx
+++ b/src/components/tags/TagAutocompleteRow/index.tsx
@@ -9,16 +9,23 @@ import styles from './styles.module.scss';
 interface IProps {
   selected: boolean;
   title: string;
-  type: string;
+  type: 'enter' | 'right' | 'tag';
   onSelect: (val: string) => void;
 }
 
-const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
+const TagAutocompleteRow: FC<IProps> = ({
+  selected,
+  type,
+  title,
+  onSelect,
+}) => {
   const onClick = useCallback(() => onSelect(title), [title, onSelect]);
 
   return (
     <div
-      className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
+      className={classNames(styles.row, styles[type], {
+        [styles.selected]: selected,
+      })}
       onClick={onClick}
     >
       <Icon icon={type} size={16} />
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
index 1e4afcb2..21e17077 100644
--- a/src/components/tags/TagAutocompleteRow/styles.module.scss
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -23,7 +23,7 @@ $row_height: 26px;
   }
 
   &.right {
-    color: lighten($color_primary, 4%);
+    color: $color_primary;
     opacity: 1;
   }
 
diff --git a/src/components/tags/TagWrapper/index.tsx b/src/components/tags/TagWrapper/index.tsx
index ded9d919..df0e2714 100644
--- a/src/components/tags/TagWrapper/index.tsx
+++ b/src/components/tags/TagWrapper/index.tsx
@@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 
 interface IProps {
-  feature?: string;
   size?: string;
+  color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
   deletable?: boolean;
   hoverable?: boolean;
   editing?: boolean;
@@ -19,8 +19,8 @@ interface IProps {
 }
 
 const TagWrapper: FC<IProps> = ({
+  color = 'default',
   children,
-  feature,
   size,
   deletable,
   hoverable,
@@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
 }) => {
   const canBeDeleted = deletable && !editing && !hasInput;
   const onDeletePress = useCallback(
-    event => {
+    (event) => {
       if (!onDelete) {
         return;
       }
@@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
       event.stopPropagation();
       onDelete();
     },
-    [onDelete]
+    [onDelete],
   );
 
   return (
     <div
-      className={classNames(styles.tag, feature, size, {
-        is_hoverable: hoverable,
-        is_editing: editing,
-        deletable: canBeDeleted,
-        input: hasInput,
-        clickable: onClick,
-      })}
+      className={classNames(
+        styles.tag,
+        size && styles[`size-${size}`],
+        styles[`color-${color}`],
+        {
+          [styles.hoverable]: hoverable,
+          [styles.editing]: editing,
+          [styles.deletable]: canBeDeleted,
+          [styles.input]: hasInput,
+          [styles.clickable]: onClick,
+        },
+      )}
       onClick={onClick}
     >
       <div className={styles.hole} />
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index 3aa61676..bf3670d0 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -25,39 +25,37 @@ $big: 1.2;
     z-index: 40;
   }
 
-  &:global(.big) {
-    height: $tag_height * $big;
-    font: $font_16_semibold;
-    border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
-
-    .hole {
-      width: $tag_height * $big;
-      height: $tag_height * $big;
-    }
-  }
-
-  &:global(.is_hoverable) {
+  &.hoverable {
     cursor: pointer;
   }
 
-  &:global(.is_editing) {
+  &.editing {
     cursor: pointer;
-    background-color: lighten($content_bg_light, 10%);
+    background-color: $content_bg;
   }
 
-  &:global(.red) {
+  &.input {
+    color: transparent !important;
+    min-width: 100px;
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  &.color-danger {
     background: $danger_gradient;
   }
 
-  &:global(.blue) {
+  &.color-info {
     background: $info_gradient;
   }
 
-  &:global(.green) {
+  &.color-primary {
     background: $primary_gradient;
   }
 
-  &:global(.black) {
+  &.color-black {
     background: transparentize(black, 0.7);
     box-shadow: none;
     color: $gray_75;
@@ -68,13 +66,15 @@ $big: 1.2;
     }
   }
 
-  &:global(.input) {
-    color: transparent !important;
-    min-width: 100px;
-  }
+  &.size-big {
+    height: $tag_height * $big;
+    font: $font_16_semibold;
+    border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
 
-  &:global(.clickable) {
-    cursor: pointer;
+    .hole {
+      width: $tag_height * $big;
+      height: $tag_height * $big;
+    }
   }
 
   input {
@@ -124,7 +124,8 @@ $big: 1.2;
 }
 
 button.delete {
-  box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
+  box-shadow: inset transparentize(white, 0.95) 1px 0,
+    transparentize(black, 0.7) -1px 0;
   width: 24px;
   height: $tag_height;
   z-index: 24;
diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss
index 0d0ef597..33f225bc 100644
--- a/src/containers/main/Header/styles.module.scss
+++ b/src/containers/main/Header/styles.module.scss
@@ -86,7 +86,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: $color_danger;
+    color: $color_link;
   }
 
   &::before {
@@ -109,7 +109,7 @@
     width: 6px;
     height: 6px;
     border-radius: 4px;
-    background: lighten($color_danger, 10%);
+    background: $color_link;
     right: 12px;
     top: 6px;
     transition: opacity 0.5s;
@@ -123,11 +123,11 @@
   }
 
   &.lab::after {
-    background: lighten($color_lab, 10%);
+    background: $color_lab;
   }
 
   &.boris::after {
-    background: lighten($color_primary, 10%);
+    background: $color_primary;
   }
 
   @include tablet {
diff --git a/src/containers/tags/TagInput/index.tsx b/src/containers/tags/TagInput/index.tsx
index 69fd59fc..d667d97a 100644
--- a/src/containers/tags/TagInput/index.tsx
+++ b/src/containers/tags/TagInput/index.tsx
@@ -19,13 +19,8 @@ const placeholder = 'Добавить';
 const prepareInput = (input: string): string[] => {
   return input
     .split(',')
-    .map((title: string) =>
-      title
-        .trim()
-        .substring(0, 64)
-        .toLowerCase(),
-    )
-    .filter(el => el.length > 0);
+    .map((title: string) => title.trim().substring(0, 64).toLowerCase())
+    .filter((el) => el.length > 0);
 };
 
 interface IProps {
@@ -88,7 +83,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
 
   const onFocus = useCallback(() => setFocused(true), []);
   const onBlur = useCallback(
-    event => {
+    (event) => {
       if (!wrapper.current || !ref.current) {
         return;
       }
@@ -122,9 +117,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
     [onAppend, setInput],
   );
 
-  const feature = useMemo(() => (input?.substr(0, 1) === '/' ? 'green' : ''), [
-    input,
-  ]);
+  const isAlbumTag = useMemo(() => input?.substr(0, 1) === '/', [input]);
 
   useEffect(() => {
     if (!focused) return;
@@ -138,7 +131,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
       <TagWrapper
         title={input || placeholder}
         hasInput={true}
-        feature={feature}
+        color={isAlbumTag ? 'primary' : undefined}
       >
         <input
           type="text"
diff --git a/src/layouts/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss
index 5ed15ae2..a1c1a6e3 100644
--- a/src/layouts/BorisLayout/styles.module.scss
+++ b/src/layouts/BorisLayout/styles.module.scss
@@ -19,8 +19,7 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: 50% 0 no-repeat url('../../sprites/boris_bg.svg');
-  background-size: cover;
+  background: $boris_background;
 }
 
 .header {
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 3cb61030..8fb17eb8 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -1,58 +1,45 @@
-// palette (use inside)
-$yellow: #ffd60f;
-$dark_blue: #592071;
-$blue: #582cd0;
-$green: #00d2b9;
-$wisegreen: #007962;
-$olive: #6cb337;
-$red: #ff3344;
-$orange: #ff7549;
-$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
-$soft_blue: #3c75ff;
-$brown: #23201f;
-
 // main definitions (move to --vars)
-$color_primary: $wisegreen;
-$color_danger: $red;
-$color_online: $olive;
-$color_offline: $red;
-$color_link: $red;
-$color_flow: $red;
-$color_lab: $blue;
+$color_primary: var(--color_primary);
+$color_danger: var(--color_danger);
+$color_online: var(--color_online);
+$color_offline: var(--color_offline);
+$color_link: var(--color_link);
+$color_flow: var(--color_flow);
+$color_lab: var(--color_lab);
+$color_boris: var(--color_boris);
+$color_like: var(--color_like);
 
 // gradients (move to --vars)
-$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
-$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
-$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
-$primary_gradient: linear-gradient(
-  170deg,
-  $lightgreen -50%,
-  $color_primary 150%
-);
-$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
-$global_loader_gradient: linear-gradient(
-  90deg,
-  $dark_blue,
-  $soft_blue,
-  $dark_blue
-);
+$danger_gradient: var(--danger_gradient);
+$info_gradient: var(--info_gradient);
+$warning_gradient: var(--warning_gradient);
+$primary_gradient: var(--primary_gradient);
+$magic_gradient: var(--magic_gradient);
+$global_loader_gradient: var(--global_loader_gradient);
+$flow_gradient: var(--flow_gradient);
+$lab_gradient: var(--lab_gradient);
 
 // backgrounds (move to --vars)
-$content_bg: $brown;
-$content_bg_dark: darken($brown, 2%);
-$content_bg_darker: darken($brown, 4%);
-$content_bg_light: lighten($brown, 2%);
-$content_bg_lighter: lighten($brown, 4%);
-$content_bg_lightest: lighten($brown, 6%);
+$content_bg: var(--content_bg);
+$content_bg_dark: var(--content_bg_dark);
+$content_bg_darker: var(--content_bg_darker);
+$content_bg_light: var(--content_bg_light);
+$content_bg_lighter: var(--content_bg_lighter);
+$content_bg_lightest: var(--content_bg_lightest);
 
-$content_bg_success: transparentize($wisegreen, 0.7);
-$content_bg_info: transparentize($blue, 0.5);
-$content_bg_danger: transparentize($red, 0.5);
-$content_bg_backdrop: transparentize($content_bg, 0.2);
+$content_bg_success: var(--content_bg_success);
+$content_bg_info: var(--content_bg_info);
+$content_bg_danger: var(--content_bg_danger);
+$content_bg_backdrop: var(--content_bg_backdrop);
 
 // white shades (move to --vars)
-$white: white;
-$gray_25: mix($content_bg, white, 25%);
-$gray_50: mix($content_bg, white, 50%);
-$gray_75: mix($content_bg, white, 75%);
-$gray_90: mix($content_bg, white, 92%);
+$white: var(--white);
+$gray_25: var(--gray_25);
+$gray_50: var(--gray_50);
+$gray_75: var(--gray_75);
+$gray_90: var(--gray_90);
+
+// global
+$page_background: var(--page-background);
+$page_background_top: var(--page-background-top);
+$boris_background: var(--boris-background);
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 9af9a1b8..26856c82 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,3 +1,6 @@
+@use './themes/default' as theme_default;
+@use './themes/horizon' as theme_horizon;
+
 @import 'src/styles/variables';
 @import 'photoswipe/dist/photoswipe';
 @import 'photoswipe/dist/default-skin/default-skin';
@@ -10,6 +13,9 @@
 @import 'swiper/css/zoom';
 @import 'swiper/css/navigation';
 
+@include theme_default.apply();
+@include theme_horizon.apply();
+
 html {
   min-height: 100vh;
   box-sizing: border-box;
@@ -17,7 +23,7 @@ html {
 
 body {
   min-height: 100vh;
-  background: url('../../src/sprites/noise.png') $content_bg;
+  background: $page_background;
   color: $white;
   font: $font_16_regular;
   -webkit-font-smoothing: antialiased;
@@ -32,8 +38,7 @@ body {
     top: 0;
     left: 0;
     z-index: -1;
-    background: url('../../src/sprites/noise_top.png') 0% 0%;
-    background-size: 600px 600px;
+    background: $page_background_top;
     pointer-events: none;
   }
 
@@ -68,7 +73,7 @@ body {
 }
 
 .done {
-  background-color: $green;
+  background-color: $color_primary;
 }
 
 h2 {
@@ -76,7 +81,7 @@ h2 {
 }
 
 .username {
-  color: $color_primary;
+  color: $color_link;
   font-weight: 600;
 }
 
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index e33470eb..307babfc 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -266,29 +266,25 @@
 
   [data-popper-placement*='bottom'] & {
     border-width: 0 10px 10px 10px;
-    border-color: transparent transparent lighten($content_bg_light, 6%)
-      transparent;
+    border-color: transparent transparent $content_bg_lightest transparent;
     top: -10px;
   }
 
   [data-popper-placement*='top'] & {
     border-width: 10px 10px 0 10px;
-    border-color: lighten($content_bg_light, 6%) transparent transparent
-      transparent;
+    border-color: $content_bg_lightest transparent transparent transparent;
     bottom: -10px;
   }
 
   [data-popper-placement*='right'] & {
     border-width: 10px 10px 10px 0;
-    border-color: transparent lighten($content_bg_light, 6%) transparent
-      transparent;
+    border-color: transparent $content_bg_lightest transparent transparent;
     left: -10px;
   }
 
   [data-popper-placement*='left'] & {
     border-width: 10px 0 10px 10px;
-    border-color: transparent transparent transparent
-      lighten($content_bg_light, 6%);
+    border-color: transparent transparent transparent $content_bg_lightest;
     right: -10px;
   }
 }
diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss
new file mode 100644
index 00000000..4012cd42
--- /dev/null
+++ b/src/styles/themes/_default.scss
@@ -0,0 +1,82 @@
+// palette (use inside)
+
+$_yellow: #ffd60f;
+$_dark_blue: #592071;
+$_blue: #582cd0;
+$_green: #00d2b9;
+$_wisegreen: #007962;
+$_olive: #6cb337;
+$_red: #ff3344;
+$_orange: #ff7549;
+$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
+$_soft_blue: #3c75ff;
+$_brown: #23201f;
+
+@mixin apply {
+  :root {
+    // main definitions (move to --vars)
+    --color_primary: #{$_wisegreen};
+    --color_danger: #{$_red};
+    --color_online: #{$_olive};
+    --color_offline: #{$_red};
+    --color_link: #{$_red};
+    --color_like: #{$_red};
+    --color_flow: #{$_red};
+    --color_lab: #{$_blue};
+    --color_boris: #{$_wisegreen};
+
+    // gradients (move to --vars)
+    --danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
+    --info_gradient: linear-gradient(170deg, #{$_blue}, #{$_dark_blue});
+    --warning_gradient: linear-gradient(
+      165deg,
+      #{$_yellow} -50%,
+      #{$_red} 150%
+    );
+    --primary_gradient: linear-gradient(
+      170deg,
+      #{$_lightgreen} -50%,
+      #{$_wisegreen} 150%
+    );
+    --magic_gradient: linear-gradient(
+      260deg,
+      #{$_soft_blue} -50%,
+      #7b2653 150%
+    );
+    --global_loader_gradient: linear-gradient(
+      90deg,
+      #{$_dark_blue},
+      #{$_soft_blue},
+      #{$_dark_blue}
+    );
+    --flow_gradient: var(--danger_gradient);
+    --lab_gradient: var(--info_gradient);
+
+    // backgrounds (move to --vars)
+    --content_bg: #{$_brown};
+    --content_bg_dark: #{darken($_brown, 2%)};
+    --content_bg_darker: #{darken($_brown, 4%)};
+    --content_bg_light: #{lighten($_brown, 2%)};
+    --content_bg_lighter: #{lighten($_brown, 4%)};
+    --content_bg_lightest: #{lighten($_brown, 6%)};
+
+    --content_bg_success: #{transparentize($_wisegreen, 0.7)};
+    --content_bg_info: #{transparentize($_blue, 0.5)};
+    --content_bg_danger: #{transparentize($_red, 0.5)};
+    --content_bg_backdrop: #{transparentize($_brown, 0.2)};
+
+    // white shades (move to --vars)
+    --white: white;
+    --gray_25: #{transparentize(white, 0.25)};
+    --gray_50: #{transparentize(white, 0.5)};
+    --gray_75: #{transparentize(white, 0.75)};
+    --gray_90: #{transparentize(white, 0.95)};
+
+    // page background
+    --page-background: url('../../../src/sprites/noise.png') 0% 0% #{$_brown};
+    --page-background-top: 600px 600px url('../../../src/sprites/noise_top.png')
+      0% 0%;
+    --boris-background: 50% 0 / cover no-repeat
+      url('../../sprites/boris_bg.svg');
+  }
+}
diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss
new file mode 100644
index 00000000..061f7110
--- /dev/null
+++ b/src/styles/themes/_horizon.scss
@@ -0,0 +1,92 @@
+// palette (use inside)
+
+$_yellow: #ffd60f;
+$_dark_blue: #592071;
+$_blue: #582cd0;
+$_green: #00d2b9;
+$_wisegreen: #007962;
+$_olive: #6cb337;
+$_red: #ff3344;
+$_orange: #ff7549;
+$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
+$_soft_blue: #7693d6;
+
+$_cold: #1c1e26;
+$_accent: #e95678;
+$_mandarine: #f09483;
+$_lemon: #fab795;
+$_ocean: #25b0bc;
+
+@mixin apply {
+  :root.theme_horizon {
+    // main definitions (move to --vars)
+    --color_primary: #{$_accent};
+    --color_danger: #{$_red};
+    --color_online: #{$_ocean};
+    --color_offline: #{$_mandarine};
+    --color_link: #{$_ocean};
+    --color_like: #{$_lemon};
+    --color_flow: #{$_red};
+    --color_lab: #{$_blue};
+    --color_boris: #{$_wisegreen};
+
+    // gradients (move to --vars)
+    --danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
+    --info_gradient: linear-gradient(170deg, #{$_ocean}, #{$_soft_blue});
+
+    --warning_gradient: linear-gradient(
+      165deg,
+      #{$_yellow} -50%,
+      #{$_red} 150%
+    );
+
+    --primary_gradient: linear-gradient(
+      170deg,
+      #{$_mandarine} -150%,
+      #{$_accent} 100%
+    );
+
+    --magic_gradient: linear-gradient(
+      260deg,
+      #{$_accent} -50%,
+      #{$_orange} 150%
+    );
+
+    --global_loader_gradient: linear-gradient(
+      90deg,
+      #{$_lemon},
+      #{$_accent},
+      #{$_mandarine}
+    );
+    --flow_gradient: var(--primary_gradient);
+    --lab_gradient: var(--info_gradient);
+
+    // backgrounds (move to --vars)
+    --content_bg: #{$_cold};
+    --content_bg_dark: #{darken($_cold, 2%)};
+    --content_bg_darker: #{darken($_cold, 4%)};
+    --content_bg_light: #{lighten($_cold, 2%)};
+    --content_bg_lighter: #{lighten($_cold, 4%)};
+    --content_bg_lightest: #{lighten($_cold, 6%)};
+
+    --content_bg_success: #{transparentize($_accent, 0.7)};
+    --content_bg_info: #{transparentize($_lemon, 0.7)};
+    --content_bg_danger: #{transparentize($_red, 0.5)};
+    --content_bg_backdrop: #{transparentize($_cold, 0.2)};
+
+    // white shades (move to --vars)
+    --white: white;
+    --gray_25: #{transparentize(white, 0.25)};
+    --gray_50: #{transparentize(white, 0.5)};
+    --gray_75: #{transparentize(white, 0.75)};
+    --gray_90: #{transparentize(white, 0.95)};
+
+    // page background
+    --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
+        $_cold,
+        4%
+      )} fixed;
+    --page-background-top: none;
+    --boris-background: linear-gradient(#{$_ocean} -200%, transparent 50%);
+  }
+}