flush to develop (#380)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
Co-authored-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com>
Co-authored-by: Andrey Sobolev <haiodo@gmail.com>

packages/theme/styles/_colors.scss

@@ -25,6 +25,8 @@
   --primary-button-outline: rgba(87, 132, 255, .3);
   --primary-button-border: rgba(255, 255, 255, .09);
 
+  --duotone-color: rgba(126, 134, 158, .25);
+
   --trans-primary-button-color: #fff;
   --trans-primary-button-bg: #4474F6;
   --trans-primary-button-border: transparent;

packages/theme/styles/_layouts.scss

@@ -131,6 +131,9 @@ table {
   flex-direction: row-reverse;
   align-items: center;
 }
+.flex-reverse {
+  flex-direction: row-reverse;
+}
 .flex-col {
   display: flex;
   flex-direction: column;
@@ -146,6 +149,25 @@ table {
   align-items: stretch;
 }
 
+.safari-gap-1 {
+  & > * { margin-right: .25rem; }
+  & > *:last-child { margin-right: 0; }
+  &.reverse {
+    flex-direction: row-reverse;
+    & > :last-child { margin-right: .25rem; }
+    & > :first-child { margin-right: 0; }
+  }
+}
+.safari-gap-2 {
+  & > * { margin-right: .5rem; }
+  & > *:last-child { margin-right: 0; }
+  &.reverse {
+    flex-direction: row-reverse;
+    & > :last-child { margin-right: .5rem; }
+    & > :first-child { margin-right: 0; }
+  }
+}
+
 /* --------- */
 .sm-tool-icon {
   display: flex;
@@ -170,10 +192,13 @@ table {
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
 .step-tb75 + .step-tb75 { margin-top: .75rem; }
 
+.ml-1 { margin-left: .25rem; }
 .ml-2 { margin-left: .5rem; }
+.ml-3 { margin-left: .75rem; }
 .mr-1 { margin-right: .25rem; }
 .mr-4 { margin-right: 1rem; }
 .mr-8 { margin-right: 2rem; }
+.mt-2 { margin-top: .5rem; }
 .mt-5 { margin-top: 1.25rem; }
 .mb-1 { margin-bottom: .25rem; }