@formixru/b2b-ui 1.0.0

package/src/variables.scss

@@ -0,0 +1,1295 @@
+/* stylelint-disable length-zero-no-unit, scss/dollar-variable-empty-line-before, order/order */
+
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+
+$dark: false !default;
+
+// https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+@function get-relative-luminance($color) {
+    /* stylelint-disable number-max-precision, scss/dollar-variable-pattern */
+    $RsRGB: math.div(color.channel($color, "red", $space: rgb), 255);
+    $GsRGB: math.div(color.channel($color, "green", $space: rgb), 255);
+    $BsRGB: math.div(color.channel($color, "blue", $space: rgb), 255);
+
+    $R: math.div($RsRGB, 12.92);
+    $G: math.div($GsRGB, 12.92);
+    $B: math.div($BsRGB, 12.92);
+
+    @if $RsRGB > 0.03928 {
+        $R: math.pow(math.div($RsRGB + 0.055, 1.055), 2.4);
+    }
+
+    @if $GsRGB > 0.03928 {
+        $G: math.pow(math.div($GsRGB + 0.055, 1.055), 2.4);
+    }
+
+    @if $BsRGB > 0.03928 {
+        $B: math.pow(math.div($BsRGB + 0.055, 1.055), 2.4);
+    }
+
+    @return 0.2126 * $R + 0.7152 * $G + 0.0722 * $B;
+
+    /* eslint-enable number-max-precision, scss/dollar-variable-pattern */
+}
+
+// https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+@function get-contrast-ratio($light, $dark) {
+    @return math.div(get-relative-luminance($light) + 0.05, get-relative-luminance($dark) + 0.05);
+}
+
+@function get-offset-color($color, $is-light-color) {
+    $offset: 0.05;
+    $modifier: 1; // Для тёмного фона мы делаем цвет более светлым
+    $light-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
+    $dark-color: $color;
+
+    @if $is-light-color {
+        $modifier: -1; // Для светлого фона мы делаем цвет более тёмным
+        $light-color: $color;
+        $dark-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
+    }
+    // Если < 2 - контраста недостаточно, если > 2 - получается слишком чёрный/белый цвет, а нам нужно сохранить изначальный оттенок
+    @while get-contrast-ratio($light-color, $dark-color) < 2 {
+        $offset: $offset + 0.05;
+
+        @if $is-light-color {
+            $dark-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
+        } @else {
+            $light-color: color.adjust($color, $lightness: math.percentage($offset * $modifier));
+        }
+    }
+
+    @return color.adjust($color, $lightness: math.percentage($offset * $modifier));
+}
+
+@function is-light-color($color) {
+    $r: color.channel($color, "red", $space: rgb);
+    $g: color.channel($color, "green", $space: rgb);
+    $b: color.channel($color, "blue", $space: rgb);
+    $luminance: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+
+    @return $luminance >= 128;
+}
+
+@function autocolor($color, $background, $autocorrect: true) {
+    @if meta.type-of($background) == 'list' {
+        @if color.alpha(list.nth($background, 2)) > 0.5 {
+            $background: list.nth($background, 2);
+        } @else {
+            $background: list.nth($background, 1);
+        }
+    }
+    $is-light-color: is-light-color($background);
+
+    @if meta.type-of($color) == 'map' {
+        $c: map.get($color, 'dark');
+
+        @if $dark and $c != $color-white and map.get($color, 'light') != $background {
+            $c: map.get($color, 'light');
+        }
+
+        @if $is-light-color {
+            $c: map.get($color, 'light');
+
+            @if $dark and $c != $color-black and map.get($color, 'dark') != $background {
+                $c: map.get($color, 'dark');
+            }
+        }
+        // Корректируем слишком схожие цвета. Коэффициент 1.5 выбран, чтобы быть максимально толерантным к решениям дизайнеров и т. п., но есть возможность вообще выключить автоматическую корректировку
+        @if $autocorrect {
+            $min-ratio: 1.5;
+            $ratio: get-contrast-ratio($background, $c);
+
+            @if $ratio < $min-ratio {
+                @if $ratio < 1 {
+                    @if get-contrast-ratio($c, $background) < $min-ratio {
+                        $c: get-offset-color($c, $is-light-color);
+                    }
+                } @else {
+                    $c: get-offset-color($c, $is-light-color);
+                }
+            }
+        }
+
+        @return $c;
+    }
+
+    @return $color;
+}
+
+@function alphagrey($grey, $background) {
+    $offset: 0;
+    // https://www.viget.com/articles/equating-color-and-transparency/
+    $alpha: math.div((color.channel($grey, "red", $space: rgb) - 255), (0 - 255));
+
+    @if $background == white {
+        $alpha: math.div((color.channel($grey, "red", $space: rgb) - 0), (255 - 0));
+    }
+
+    @if $dark and $background == black {
+        $offset: 0.075;
+    } @else if not $dark and $background == white {
+        $offset: 0.025;
+    }
+
+    @return color.change($background, $alpha: $alpha - $offset);
+}
+
+/********** Основные **********/
+
+$color-primary: #0e81c9 !default;
+
+@if $dark {
+    $color-primary: #1091e1 !default;
+}
+
+$color-primary-80: color.scale($color-primary, $lightness: 85%) !default;
+$color-primary-70: color.scale($color-primary, $lightness: 20%) !default;
+$color-primary-60: color.scale($color-primary, $lightness: 10%) !default;
+$color-primary-40: color.scale($color-primary, $lightness: -15%) !default;
+$color-primary-30: color.scale($color-primary, $lightness: -25%) !default;
+$color-primary-20: color.scale($color-primary, $lightness: -35%) !default;
+
+@if $dark {
+    $color-primary-80: color.scale($color-primary, $lightness: -55%) !default;
+    $color-primary-70: color.scale($color-primary, $lightness: -45%) !default;
+    $color-primary-60: color.scale($color-primary, $lightness: -35%) !default;
+    $color-primary-40: color.scale($color-primary, $lightness: 20%) !default;
+    $color-primary-30: color.scale($color-primary, $lightness: 40%) !default;
+    $color-primary-20: color.scale($color-primary, $lightness: 65%) !default;
+}
+
+$color-secondary: #1c2225 !default;
+
+@if $dark {
+    $color-secondary: #3e4549 !default;
+}
+
+$color-secondary-80: color.scale($color-secondary, $lightness: 85%) !default;
+$color-secondary-70: color.scale($color-secondary, $lightness: 20%) !default;
+$color-secondary-60: color.scale($color-secondary, $lightness: 10%) !default;
+$color-secondary-40: color.scale($color-secondary, $lightness: -15%) !default;
+$color-secondary-30: color.scale($color-secondary, $lightness: -25%) !default;
+$color-secondary-20: color.scale($color-secondary, $lightness: -35%) !default;
+
+@if $dark {
+    $color-secondary-80: color.scale($color-secondary, $lightness: -55%) !default;
+    $color-secondary-70: color.scale($color-secondary, $lightness: -45%) !default;
+    $color-secondary-60: color.scale($color-secondary, $lightness: -35%) !default;
+    $color-secondary-40: color.scale($color-secondary, $lightness: 20%) !default;
+    $color-secondary-30: color.scale($color-secondary, $lightness: 40%) !default;
+    $color-secondary-20: color.scale($color-secondary, $lightness: 65%) !default;
+}
+
+$color-grey: #888888 !default;
+$color-grey-100: #ffffff !default;
+$color-grey-90: #f3f3f3 !default;
+$color-grey-80: #dbdbdb !default;
+$color-grey-70: #bbbbbb !default;
+$color-grey-40: #727272 !default;
+$color-grey-20: #333333 !default;
+$color-grey-0: #0a0a0a !default;
+
+@if $dark {
+    // При добавлении !default возникает ошибка, поэтому пока что без него
+    $color-grey: #8c8c8c;
+    $color-grey-100: #080808;
+    $color-grey-90: #262626;
+    $color-grey-80: #565656;
+    $color-grey-70: #666666;
+    $color-grey-40: #a4a4a4;
+    $color-grey-20: #b6b6b6;
+    $color-grey-0: #e6e6e6;
+
+    // Были получены так:
+    // $color-grey: color.scale(#bbbbbb, $lightness: -25%);
+    // $color-grey-100: color.scale(#0a0a0a, $lightness: -25%);
+    // $color-grey-90: color.scale(#333333, $lightness: -25%);
+    // $color-grey-80: color.scale(#727272, $lightness: -25%);
+    // $color-grey-70: color.scale(#888888, $lightness: -25%);
+    // $color-grey-40: color.scale(#dbdbdb, $lightness: -25%);
+    // $color-grey-20: color.scale(#f3f3f3, $lightness: -25%);
+    // $color-grey-0: color.scale(#ffffff, $lightness: -10%);
+}
+
+$color-grey-alpha: alphagrey($color-grey, black) !default;
+$color-grey-alpha-90: alphagrey($color-grey-90, black) !default;
+$color-grey-alpha-80: alphagrey($color-grey-80, black) !default;
+$color-grey-alpha-70: alphagrey($color-grey-70, black) !default;
+$color-grey-alpha-40: alphagrey($color-grey-40, black) !default;
+$color-grey-alpha-20: alphagrey($color-grey-20, black) !default;
+
+$color-grey-alpha-i: alphagrey($color-grey-70, white) !default;
+$color-grey-alpha-i-90: alphagrey($color-grey-20, white) !default;
+$color-grey-alpha-i-80: alphagrey($color-grey-40, white) !default;
+$color-grey-alpha-i-70: alphagrey($color-grey, white) !default;
+$color-grey-alpha-i-40: alphagrey($color-grey-80, white) !default;
+$color-grey-alpha-i-20: alphagrey($color-grey-90, white) !default;
+
+@if $dark {
+    $color-grey-alpha: alphagrey($color-grey, white) !default;
+    $color-grey-alpha-90: alphagrey($color-grey-90, white) !default;
+    $color-grey-alpha-80: alphagrey($color-grey-80, white) !default;
+    $color-grey-alpha-70: alphagrey($color-grey-70, white) !default;
+    $color-grey-alpha-40: alphagrey($color-grey-40, white) !default;
+    $color-grey-alpha-20: alphagrey($color-grey-20, white) !default;
+
+    $color-grey-alpha-i: alphagrey($color-grey-70, black) !default;
+    $color-grey-alpha-i-90: alphagrey($color-grey-20, black) !default;
+    $color-grey-alpha-i-80: alphagrey($color-grey-40, black) !default;
+    $color-grey-alpha-i-70: alphagrey($color-grey, black) !default;
+    $color-grey-alpha-i-40: alphagrey($color-grey-80, black) !default;
+    $color-grey-alpha-i-20: alphagrey($color-grey-90, black) !default;
+}
+
+$color-black: $color-grey-0 !default;
+$color-white: $color-grey-100 !default;
+
+@if $dark {
+    $color-black: $color-grey-100 !default;
+    $color-white: $color-grey-0 !default;
+}
+
+$color-error: #d70909 !default;
+$color-warning: #ff8f00 !default;
+$color-success: #4bb250 !default;
+
+$bg-color-primary: $color-grey-100 !default;
+$bg-color-secondary: $color-grey-90 !default;
+$bg-color-tertiary: $color-grey-100 !default;
+$bg-color-dark: $color-black !default;
+$bg-color-info: $color-primary !default;
+
+@if $dark {
+    $bg-color-tertiary: #212223 !default;
+}
+
+$backdrop-color: rgba($color-black, 30%) !default;
+
+@if $dark {
+    $backdrop-color: rgba($color-black, 75%) !default;
+}
+
+$font-color-primary: $color-grey-20 !default;
+$font-color-secondary: $color-grey-40 !default;
+$font-color-tertiary: $color-grey-70 !default;
+$font-color-action: $color-primary !default;
+$font-color-inverted: $color-grey-100 !default;
+$font-color-error: $color-error !default;
+
+@if $dark {
+    $font-color-primary: $color-grey-0 !default;
+    $font-color-tertiary: $color-grey-80 !default;
+}
+
+$font-family: 'PT Sans', system-ui !default;
+
+$font-size: 16px !default;
+$font-size-3xs: 8px !default; // Надо будет избавиться от этого размера
+$font-size-2xs: 10px !default;
+$font-size-xs: 12px !default;
+$font-size-s: 14px !default;
+$font-size-l: 20px !default;
+$font-size-xl: 24px !default;
+$font-size-2xl: 28px !default;
+
+$line-height: 1.4 !default;
+$line-height-s: 1.2 !default;
+$line-height-l: 1.6 !default;
+
+$font-h1-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-xl, 'line-height': $line-height-s) !default;
+$font-h1-desktop: ('font-size': $font-size-2xl) !default;
+
+$font-h2-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$font-h2-desktop: ('font-size': $font-size-xl) !default;
+
+$font-h3-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$font-h3-desktop: () !default;
+
+$font-h4-mobile: ('font-style': normal, 'font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;
+$font-h4-desktop: () !default;
+
+$font: ('font-size': $font-size, 'line-height': $line-height) !default;
+
+$radius: 4px * 2 !default;
+$radius-s: 4px !default;
+$radius-l: 10000px !default;
+
+$shadow: 0 2px 16px 0 rgba($color-black, 10%) !default;
+$shadow-s: 0 2px 8px 0 rgba($color-black, 10%) !default;
+
+@if $dark {
+    $shadow: none !default;
+    $shadow-s: none !default;
+}
+
+/********** Цвета для кастомного скроллбара **********/
+
+$custom-scroll-color: $color-primary !default;
+$custom-scroll-track-color: $color-grey-90 !default;
+
+/********** Общие токены для таблиц **********/
+
+$table-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+$table-border-width: 1px !default;
+$table-border-color: transparent !default;
+$table-radius: $radius !default;
+$table-shadow: $shadow !default;
+
+$table-header-bg: $color-grey-40 !default;
+$table-header-color: $color-white !default;
+$table-header-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
+$table-header-small-font: ('font-size': $font-size-xs) !default;
+$table-header-icon-bg: $color-grey-20 !default;
+$table-header-icon-color: $color-white !default;
+
+$table-resizer-active-color: $color-grey !default;
+$table-resizer-color: color.change($table-resizer-active-color, $alpha: 0.25) !default;
+
+$table-line-bg: $bg-color-tertiary !default;
+$table-line-even-bg: $color-grey-90 !default;
+
+// .table-sort
+
+$table-sort-color: $color-grey-70 !default;
+$table-sort-selected-color: $color-white !default;
+
+// .table-settings
+
+$table-settings-item-bg: $color-grey-90 !default;
+
+$table-settings-icon-color: $color-grey-40 !default;
+
+$table-settings-dnd-color: $color-grey-70 !default;
+
+$table-settings-pin-color: $color-grey-70 !default;
+$table-settings-pin-selected-color: $color-primary !default;
+
+/********** Стили визуального редактора (.wysiwyg) **********/
+
+$wysiwyg-color: $font-color-secondary !default;
+$wysiwyg-font: $font !default;
+
+$wysiwyg-link-color: $color-primary !default;
+$wysiwyg-link-active-color: $color-primary-40 !default;
+
+$wysiwyg-h1-color: $font-color-primary !default;
+$wysiwyg-h1-mobile-font: $font-h1-mobile !default;
+$wysiwyg-h1-desktop-font: $font-h1-desktop !default;
+
+$wysiwyg-h2-color: $font-color-primary !default;
+$wysiwyg-h2-mobile-font: $font-h2-mobile !default;
+$wysiwyg-h2-desktop-font: $font-h2-desktop !default;
+
+$wysiwyg-h3-color: $font-color-primary !default;
+$wysiwyg-h3-mobile-font: $font-h3-mobile !default;
+$wysiwyg-h3-desktop-font: $font-h3-desktop !default;
+
+$wysiwyg-h4-color: $font-color-primary !default;
+$wysiwyg-h4-mobile-font: $font-h4-mobile !default;
+$wysiwyg-h4-desktop-font: $font-h4-desktop !default;
+
+$wysiwyg-image-radius: $radius !default;
+
+$wysiwyg-table-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+$wysiwyg-table-radius: $radius !default;
+$wysiwyg-table-header-bg: $color-grey-40 !default;
+$wysiwyg-table-header-color: $color-white !default;
+$wysiwyg-table-header-font: ('font-weight': bold) !default;
+$wysiwyg-table-separator-color: $color-grey-80 !default;
+$wysiwyg-table-separator-width: 1px !default;
+$wysiwyg-table-zebra-bg: $bg-color-tertiary !default;
+$wysiwyg-table-zebra-td-bg: $color-grey-90 !default;
+$wysiwyg-table-zebra-shadow: $shadow !default;
+
+$wysiwyg-alert-bg: $color-grey-40 !default;
+$wysiwyg-alert-warning-bg: $color-primary !default;
+$wysiwyg-alert-color: $color-white !default;
+$wysiwyg-alert-radius: $radius !default;
+$wysiwyg-alert-link-color: $wysiwyg-alert-color !default;
+$wysiwyg-alert-active-link-color: $color-primary-40 !default;
+
+/********** Встроенные изображения (.image) **********/
+
+$image-bg: $bg-color-secondary !default;
+$image-fill: $bg-color-tertiary !default;
+$image-line: $color-grey-0 !default;
+$image-primary: $color-primary !default;
+
+/********** Ссылка (.link) **********/
+
+// Primary
+
+$link-color: $font-color-primary !default;
+$link-active-color: $color-primary-40 !default;
+
+// Secondary (.link_alt)
+
+$link-alt-color: $color-primary !default;
+$link-alt-active-color: $color-primary-40 !default;
+
+// Grey (.link_grey)
+
+$link-grey-color: $font-color-secondary !default;
+$link-grey-active-color: $color-primary-40 !default;
+
+// Inverted (.link_inverted)
+
+$link-inverted-color: $font-color-inverted !default;
+$link-inverted-active-color: $color-primary-40 !default;
+
+/********** Кнопка (.button) **********/
+
+// Primary
+
+$button-bg: $color-primary !default;
+$button-border-width: 1px !default;
+$button-border-color: $color-primary !default;
+$button-radius: $radius-l !default;
+$button-color: $color-white !default;
+$button-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
+$button-height: 4px * 12 !default;
+$button-min-width: 4px * 38 !default;
+$button-padding: 0 4px * 7 !default;
+
+$button-disabled-bg: rgba($color-primary, 35%) !default;
+$button-disabled-border-color: rgba($color-primary, 35%) !default;
+$button-disabled-color: $color-white !default;
+
+$button-active-bg: $color-primary-40 !default;
+$button-active-border-color: $color-primary-40 !default;
+$button-active-color: $color-white !default;
+
+$button-icon-size: 4px * 6 !default;
+$button-icon-space-before: 4px * 2 !default;
+$button-icon-space-after: 4px * 2 !default;
+
+$button-small-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;
+$button-small-height: 4px * 10 !default;
+$button-small-min-width: 4px * 18 !default;
+$button-small-padding: 0 4px * 4 !default;
+
+$button-square-radius: $radius !default;
+
+$button-wide-min-width: 4px * 52 !default;
+$button-small-wide-min-width: 4px * 32 !default;
+
+// Secondary (.button_alt)
+
+$button-alt-bg: transparent !default;
+$button-alt-border-width: 1px !default;
+$button-alt-border-color: $color-primary !default;
+$button-alt-color: $color-primary !default;
+
+$button-alt-disabled-bg: transparent !default;
+$button-alt-disabled-border-color: rgba($color-primary, 35%) !default;
+$button-alt-disabled-color: rgba($color-primary, 35%) !default;
+
+$button-alt-active-bg: $color-primary-40 !default;
+$button-alt-active-border-color: $color-primary-40 !default;
+$button-alt-active-color: $color-white !default;
+
+// Ghost (.button_ghost)
+
+$button-ghost-bg: $color-grey-90 !default;
+$button-ghost-border-width: 1px !default;
+$button-ghost-border-color: $color-grey-90 !default;
+$button-ghost-color: $color-primary !default;
+
+$button-ghost-disabled-bg: $color-grey-90 !default;
+$button-ghost-disabled-border-color: $color-grey-90 !default;
+$button-ghost-disabled-color: rgba($color-primary, 35%) !default;
+
+$button-ghost-active-bg: $color-primary-80 !default;
+$button-ghost-active-border-color: $color-primary-80 !default;
+$button-ghost-active-color: $color-primary !default;
+
+// Grey (.button_grey)
+
+$button-grey-bg: $color-grey-40 !default;
+$button-grey-border-width: 1px !default;
+$button-grey-border-color: $color-grey-40 !default;
+$button-grey-color: $color-white !default;
+
+$button-grey-disabled-bg: $color-grey-80 !default;
+$button-grey-disabled-border-color: $color-grey-80 !default;
+$button-grey-disabled-color: $color-white !default;
+
+$button-grey-active-bg: $color-primary-40 !default;
+$button-grey-active-border-color: $color-primary-40 !default;
+$button-grey-active-color: $color-white !default;
+
+// Inverted (.button_inverted)
+
+$button-inverted-bg: transparent !default;
+$button-inverted-border-width: 1px !default;
+$button-inverted-border-color: $color-white !default;
+$button-inverted-color: $color-white !default;
+
+$button-inverted-disabled-bg: transparent !default;
+$button-inverted-disabled-border-color: rgba($color-white, 50%) !default;
+$button-inverted-disabled-color: rgba($color-white, 50%) !default;
+
+$button-inverted-active-bg: $color-white !default;
+$button-inverted-active-border-color: $color-white !default;
+$button-inverted-active-color: $color-primary !default;
+
+/********** Поле ввода (.input) **********/
+
+$input-bg: $bg-color-tertiary !default;
+$input-border-width: 1px !default;
+$input-border-color: $color-grey-80 !default;
+$input-radius: $radius !default;
+$input-color: $font-color-primary !default;
+$input-font: ('font-size': $font-size, 'line-height': $line-height-s, 'font-family': $font-family) !default;
+$input-placeholder-color: rgba($input-color, 50%) !default;
+$input-height: 4px * 12 !default;
+$input-padding-x: 4px * 4 !default;
+$input-padding-y: 4px * 3 !default;
+
+$input-filled-border-color: $color-primary !default;
+
+$input-active-bg: $input-bg !default;
+$input-active-border-color: $color-primary !default;
+$input-active-outline-color: $input-active-border-color !default;
+$input-active-color: $input-color !default;
+
+$input-disabled-bg: rgba($color-primary-20, 7%) !default;
+$input-disabled-border-color: $color-grey-90 !default;
+$input-disabled-color: rgba($input-color, 50%) !default;
+$input-disabled-placeholder-color: rgba($input-color, 25%) !default;
+
+$input-error-bg: $input-bg !default;
+$input-error-border-color: $color-error !default;
+$input-error-color: $input-color !default;
+
+$input-small-font: () !default;
+$input-small-height: 4px * 10 !default;
+$input-small-padding-x: 4px * 4 !default;
+$input-small-padding-y: 4px !default;
+
+$input-textarea-font: ('line-height': $line-height) !default;
+$input-textarea-min-height: 4px * 36 !default;
+
+$input-textarea-small-min-height: 4px * 18 !default;
+
+/********** Поле ввода с подсказкамми (.suggest-input) **********/
+
+$suggest-input-item-height: 4px * 10 !default;
+$suggest-input-item-color: $color-grey-20 !default;
+$suggest-input-item-font: ('font-size': $font-size, 'line-height': $line-height) !default;
+$suggest-input-item-mark-color: inherit !default;
+$suggest-input-item-mark-font: ('font-weight': bold) !default;
+
+$suggest-input-item-active-bg: $color-grey-90 !default;
+$suggest-input-item-active-color: $font-color-action !default;
+
+$suggest-input-list-bg: $bg-color-primary !default;
+$suggest-input-list-radius: $input-radius !default;
+$suggest-input-list-shadow: $shadow-s !default;
+
+$suggest-input-not-found-color: $color-grey-20 !default;
+$suggest-input-not-found-font: ('font-style': italic, 'font-size': $font-size, 'line-height': $line-height) !default;
+
+$suggest-input-clear-color: $color-grey-70 !default;
+$suggest-input-clear-active-color: $color-grey-40 !default;
+
+/********** Поле ввода даты (.date-input) **********/
+
+$date-input-icon-color: $color-grey-70 !default;
+$date-input-disabled-icon-color: $color-grey-80 !default;
+$date-input-icon-size: 4px * 6 !default;
+$date-input-small-icon-size: 4px * 5 !default;
+
+$date-input-bg: $bg-color-primary !default;
+$date-input-radius: $input-radius !default;
+$date-input-shadow: $shadow-s !default;
+$date-input-color: $font-color-primary !default;
+$date-input-disabled-color: $font-color-tertiary !default;
+
+$date-input-title-color: $date-input-color !default;
+$date-input-weekday-color: $font-color-secondary !default;
+
+$date-input-arrow-color: $color-grey-40 !default;
+$date-input-arrow-active-bg: $color-grey-90 !default;
+
+$date-input-solid-bg: $color-primary !default;
+$date-input-solid-color: $font-color-inverted !default;
+
+$date-input-light-bg: $color-primary-80 !default;
+$date-input-light-color: $date-input-color !default;
+
+$date-input-outline-bg: $color-primary-80 !default;
+$date-input-outline-border-color: $color-primary !default;
+$date-input-outline-color: $date-input-color !default;
+
+/********** Чекбокс (.checkbox) **********/
+
+$checkbox-bg: $input-bg !default;
+$checkbox-border-width: $input-border-width !default;
+$checkbox-border-color: $color-grey-70 !default;
+$checkbox-radius: 2px !default;
+$checkbox-size: 16px !default;
+
+$checkbox-disabled-bg: $input-disabled-bg !default;
+$checkbox-disabled-border-color: $input-disabled-border-color !default;
+
+$checkbox-active-bg: $color-grey-90 !default;
+$checkbox-active-border-color: $color-grey !default;
+
+$checkbox-check-color: $color-success !default;
+
+$checkbox-label-color: $font-color-secondary !default;
+$checkbox-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$checkbox-disabled-label-color: $input-disabled-color !default;
+
+/********** Радикнопка (.radio) **********/
+
+$radio-bg: $input-bg !default;
+$radio-border-width: $input-border-width !default;
+$radio-border-color: $color-grey-70 !default;
+$radio-size: 16px !default;
+
+$radio-disabled-bg: $input-disabled-bg !default;
+$radio-disabled-border-color: $input-disabled-border-color !default;
+
+$radio-active-bg: $color-grey-90 !default;
+$radio-active-border-color: $color-grey !default;
+
+$radio-dot-color: $color-success !default;
+
+$radio-label-color: $font-color-secondary !default;
+$radio-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$radio-disabled-label-color: $input-disabled-color !default;
+
+/********** Выпадающий список (.select) **********/
+
+$select-bg: $input-bg !default;
+$select-border-width: $input-border-width !default;
+$select-border-color: $input-border-color !default;
+$select-radius: $input-radius !default;
+$select-color: $input-color !default;
+$select-font: $input-font !default;
+$select-placeholder-color: $input-placeholder-color !default;
+$select-height: $input-height !default;
+$select-padding: $input-padding-x !default;
+
+$select-active-bg: $input-active-bg !default;
+$select-active-border-color: $input-active-border-color !default;
+$select-active-color: $input-active-color !default;
+
+$select-disabled-bg: $input-disabled-bg !default;
+$select-disabled-border-color: $input-disabled-border-color !default;
+$select-disabled-color: $input-disabled-color !default;
+
+$select-error-bg: $input-error-bg !default;
+$select-error-border-color: $input-error-border-color !default;
+$select-error-color: $input-error-color !default;
+
+$select-small-font: $input-small-font !default;
+$select-small-height: $input-small-height !default;
+$select-small-padding: $input-small-padding-x !default;
+
+/********** Выбор времени (.time-select) **********/
+
+$time-select-dash-color: $color-grey-40 !default;
+
+/********** Выбор файла (.file-input) **********/
+
+$file-input-bg: $input-bg !default;
+$file-input-border-width: $input-border-width !default;
+$file-input-border-color: $input-border-color !default;
+$file-input-radius: $input-radius !default;
+$file-input-dragover-bg: $color-grey-90 !default;
+$file-input-dragover-border-color: $file-input-dragover-bg !default;
+
+$file-input-descr-font: ('font-size': $font-size-s, 'line-height': $line-height) !default;
+$file-input-descr-color: $font-color-secondary !default;
+
+$file-input-file-bg: $color-grey-90 !default;
+$file-input-file-radius: $file-input-radius !default;
+$file-input-dragover-file-bg: $color-grey-80 !default;
+
+$file-input-file-name-color: $font-color-secondary !default;
+$file-input-file-name-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$file-input-file-error-color: $color-error !default;
+$file-input-file-error-font: ('font-style': italic, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
+
+$file-input-remove-color: $color-grey-70 !default;
+$file-input-remove-active-color: $color-primary-40 !default;
+
+/********** Выбор цвета (.color-input) **********/
+
+$color-input-radius: $radius-l !default;
+$color-input-border-width: 2px !default;
+$color-input-border-color: $color-grey-80 !default;
+
+$color-input-active-border-color: $color-primary !default;
+
+$color-input-icon-dark-color: $color-black !default;
+$color-input-icon-light-color: $color-white !default;
+
+/********** Выбор шрифта (.font-input) **********/
+
+$font-input-label-color: $font-color-secondary !default;
+$font-input-label-font: ('font-size': $font-size-xs) !default;
+
+/********** Список радиокнопок (.radio-list) **********/
+
+$radio-list-bg: $bg-color-tertiary !default;
+$radio-list-border-width: 1px !default;
+$radio-list-border-color: $color-primary !default;
+$radio-list-radius: $radius-l !default;
+$radio-list-color: $color-primary !default;
+$radio-list-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': 1) !default;
+
+$radio-list-disabled-bg: $bg-color-tertiary !default;
+$radio-list-disabled-border-color: rgba($color-primary, 35%) !default;
+$radio-list-disabled-color: rgba($color-primary, 35%) !default;
+
+$radio-list-active-bg: $color-primary !default;
+$radio-list-active-border-color: $color-primary !default;
+$radio-list-active-color: $color-white !default;
+
+$radio-list-selected-bg: $color-primary-40 !default;
+$radio-list-selected-border-color: $color-primary-40 !default;
+$radio-list-selected-color: $color-white !default;
+
+$radio-list-selected-disabled-bg: rgba($color-primary, 35%) !default;
+$radio-list-selected-disabled-border-color: rgba($color-primary, 35%) !default;
+$radio-list-selected-disabled-color: $color-white !default;
+
+/********** Переключатель (.toggle) **********/
+
+$toggle-bg: $bg-color-tertiary !default;
+$toggle-border-width: 1px !default;
+$toggle-border-color: $color-grey-70 !default;
+$toggle-radius: $radius-l !default;
+$toggle-check-color: $color-grey-70 !default;
+$toggle-check-radius: $radius-l !default;
+
+$toggle-disabled-bg: $input-disabled-bg !default;
+$toggle-disabled-border-color: $input-disabled-border-color !default;
+$toggle-disabled-check-color: $color-grey-80 !default;
+
+$toggle-active-bg: $color-success !default;
+$toggle-active-border-color: $color-success !default;
+$toggle-active-check-color: $color-white !default;
+
+$toggle-active-disabled-bg: $color-success !default;
+$toggle-active-disabled-border-color: $color-success !default;
+$toggle-active-disabled-check-color: rgba($color-white, 50%) !default;
+
+$toggle-label-color: $font-color-secondary !default;
+$toggle-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+/********** Ползунок (.range-input) **********/
+
+$range-input-track-height: 4px !default;
+$range-input-track-color: $color-grey-80 !default;
+$range-input-track-disabled-color: $input-disabled-bg !default;
+
+$range-input-connect-color: $color-grey-20 !default;
+$range-input-connect-disabled-color: $color-grey-80 !default;
+
+$range-input-handle-size: 16px !default;
+$range-input-handle-color: $color-primary !default;
+$range-input-handle-disabled-color: $color-grey-80 !default;
+$range-input-handle-active-color: $color-primary-40 !default;
+
+$range-input-separator-color: $input-border-color !default;
+
+/********** Установка рейтинга (.rating-input) **********/
+
+$rating-input-star-icon-color: $color-grey-80 !default;
+$rating-input-star-icon-active-color: $color-primary !default;
+
+/********** Ввод количества (.quantity) **********/
+
+$quantity-input-radius: $radius !default;
+$quantity-input-medium-radius: $radius-l !default;
+$quantity-input-big-radius: $radius-l !default;
+
+$quantity-input-button-bg: $color-primary !default;
+$quantity-input-button-border-color: $color-primary !default;
+$quantity-input-button-border-disabled-color: $color-grey-80 !default;
+$quantity-input-button-border-active-color: $color-primary-40 !default;
+$quantity-input-button-border-width: 1px !default;
+$quantity-input-button-color: $color-white !default;
+$quantity-input-button-disabled-bg: $color-grey-80 !default;
+
+$quantity-input-bg: $input-bg !default;
+$quantity-input-color: $font-color-primary !default;
+$quantity-input-font: ('font-size': $font-size-s, 'line-height': 1, 'font-family': $font-family) !default;
+$quantity-input-border-color: $color-grey-80 !default;
+$quantity-input-border-width: 1px !default;
+$quantity-input-disabled-border-color: $color-grey-90 !default;
+$quantity-input-disabled-color: $color-grey-80 !default;
+$quantity-input-disabled-focus-visible-border-color: $color-grey-70 !default;
+
+$quantity-input-medium-font: ('font-weight': bold) !default;
+
+$quantity-input-big-font: ('font-weight': bold) !default;
+
+/********** Оверлей (.overlay) **********/
+
+$overlay-bg: $backdrop-color !default;
+
+/********** Глобальный индикатор загрузки (.loader) **********/
+
+$loader-bg: $backdrop-color !default;
+$loader-color: $color-primary !default;
+
+$loader-label-color: $color-white !default;
+$loader-label-mobile-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;
+$loader-label-desktop-font: ('font-size': $font-size-xl) !default;
+
+/********** Локальный индикатор загрузки (.spinner) **********/
+
+$spinner-speed: 500ms !default;
+
+$spinner-size: 2px !default;
+$spinner-l-container-size: 20px !default;
+$spinner-l-size: 3px !default;
+
+$spinner-color: $color-primary !default;
+$spinner-inverted-color: $color-grey-100 !default;
+
+/********** Форма (.form) **********/
+
+$form-group-title-color: $font-color-primary !default;
+$form-group-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$form-label-color: $font-color-secondary !default;
+$form-label-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$form-required-color: $color-error !default;
+$form-required-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$form-value-color: $font-color-primary !default;
+$form-value-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+
+$form-help-icon-color: $color-grey-70 !default;
+$form-help-icon-active-color: $color-primary-40 !default;
+
+$form-input-error-color: $font-color-error !default;
+$form-input-error-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
+
+$form-input-descr-color: $font-color-tertiary !default;
+$form-input-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
+
+$form-submit-descr-color: $font-color-secondary !default;
+$form-submit-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
+
+$form-submit-error-bg: $bg-color-tertiary !default;
+$form-submit-error-radius: $radius !default;
+$form-submit-error-shadow: $shadow !default;
+$form-submit-error-color: $font-color-error !default;
+$form-submit-error-mobile-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
+$form-submit-error-desktop-font: ('font-size': $font-size-s) !default;
+$form-submit-error-padding: 4px * 4 4px * 6 !default;
+
+/********** Диалоговое окно (.dialog) **********/
+
+$dialog-backdrop-color: $backdrop-color !default;
+$dialog-bg: $bg-color-tertiary !default;
+$dialog-color: $font-color-primary !default;
+$dialog-shadow: $shadow !default;
+$dialog-radius: $radius !default;
+$dialog-s-max-width: 592px !default;
+$dialog-m-max-width: 672px !default;
+$dialog-l-max-width: 912px !default;
+
+$dialog-close-radius: 50% !default;
+$dialog-close-color: $color-grey-40 !default;
+$dialog-close-active-color: $color-primary !default;
+
+$dialog-header-image-border-width: 1px !default;
+$dialog-header-image-border-color: $color-grey-80 !default;
+
+$dialog-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$dialog-title-desktop-font: ('font-size': $font-size-2xl) !default;
+
+/********** Боковая панель **********/
+
+// .sidebar
+
+$sidebar-bg: $bg-color-tertiary !default;
+
+$sidebar-button-bg: $color-grey-90 !default;
+$sidebar-button-color: $color-grey-70 !default;
+$sidebar-button-label-color: $color-grey-20 !default;
+$sidebar-button-label-font: ('line-height': $line-height-s) !default;
+$sidebar-disabled-button-bg: $color-primary !default;
+$sidebar-disabled-button-color: $color-white !default;
+$sidebar-disabled-button-label-color: $sidebar-disabled-button-color !default;
+$sidebar-active-button-bg: $sidebar-button-bg !default;
+$sidebar-active-button-color: $color-primary !default;
+$sidebar-active-button-label-color: $sidebar-active-button-color !default;
+
+$sidebar-close-bg: $sidebar-button-bg !default;
+$sidebar-close-color: $color-grey-20 !default;
+
+$sidebar-notification-bg: $color-error !default;
+$sidebar-notification-color: $color-white !default;
+$sidebar-notification-font: ('font-weight': bold, 'font-size': $font-size-3xs, 'line-height': 1) !default;
+
+$sidebar-header-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $sidebar-bg) !default;
+$sidebar-header-separator-width: 1px !default;
+$sidebar-header-icon-border-color: $color-primary !default;
+$sidebar-header-icon-border-width: 1px !default;
+$sidebar-header-icon-bg: $color-primary-80 !default;
+$sidebar-header-icon-color: $color-primary !default;
+$sidebar-header-title-color: $color-primary !default;
+$sidebar-header-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;
+
+$sidebar-sub-title-bg: $color-primary !default;
+$sidebar-sub-title-color: $color-white !default;
+$sidebar-sub-title-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;
+
+$sidebar-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$sidebar-title-desktop-font: ('font-size': $font-size-xl) !default;
+
+$sidebar-descr-color: $font-color-secondary !default;
+$sidebar-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
+$sidebar-descr-icon-color: $color-grey-70 !default;
+
+$sidebar-catalog-disabled-button-bg: $color-grey-80 !default;
+$sidebar-catalog-disabled-button-color: $sidebar-button-label-color !default;
+$sidebar-catalog-header-bg: $sidebar-button-bg !default;
+
+/********** Табы (.tabs) **********/
+
+$tabs-border-width: 2px !default;
+$tabs-border-color: $color-grey-80 !default;
+
+$tabs-line-color: $color-primary !default;
+
+$tabs-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
+
+$tabs-counter-bg: $color-grey-80 !default;
+$tabs-counter-color: $color-grey-100 !default;
+$tabs-counter-font: ('font-weight': normal, 'font-size': $font-size-s) !default;
+$tabs-counter-radius: $radius-s !default;
+
+/********** Всплывающие подсказки / Tooltips **********/
+
+$tooltip-shadow: $shadow !default;
+$tooltip-radius: $radius !default;
+
+$tooltip-font: ('font-size': $font-size, 'line-height': $line-height) !default;
+$tooltip-small-font: ('font-size': $font-size-s, 'line-height': $line-height) !default;
+
+$tooltip-light-bg: $bg-color-tertiary !default;
+$tooltip-light-color: $font-color-secondary !default;
+
+$tooltip-dark-bg: $color-grey-0 !default;
+$tooltip-dark-color: $font-color-inverted !default;
+
+$tooltip-title-font: ('font-size': $font-size) !default;
+
+// .action-list
+
+$action-list-link-color: $color-grey-70 !default;
+
+$action-list-link-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $tooltip-light-bg) !default;
+$action-list-link-separator-width: 1px !default;
+
+/********** Панель с предупреждением (.warning) **********/
+
+$warning-message-bg: $bg-color-tertiary !default;
+$warning-message-radius: $radius !default;
+$warning-message-shadow: $shadow !default;
+$warning-message-color: $color-warning !default;
+
+$warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
+$warning-message-descr-color: $font-color-secondary !default;
+
+$warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
+$warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
+
+$warning-message-success-color: $color-success !default;
+$warning-message-info-color: $color-primary !default;
+$warning-message-error-color: $color-error !default;
+
+$warning-message-solid-color: $font-color-inverted !default;
+$warning-message-solid-descr-color: $warning-message-solid-color !default;
+
+/********** Панель пустого состояния (.empty-list) **********/
+
+$empty-list-bg: $bg-color-tertiary !default;
+$empty-list-radius: $radius !default;
+$empty-list-icon-color: $color-grey-90 !default;
+
+$empty-list-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$empty-list-title-desktop-font: ('font-size': $font-size-xl) !default;
+
+$empty-list-footer-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $empty-list-bg) !default;
+$empty-list-footer-separator-width: 1px !default;
+
+$empty-list-action-icon-color: $color-grey-40 !default;
+$empty-list-action-icon-active-color: $color-primary-40 !default;
+
+/********** Навигация слайдеров (.slider-nav) **********/
+
+$slider-nav-button-bg: transparent !default;
+$slider-nav-button-border-color: transparent !default;
+$slider-nav-button-border-width: 1px !default;
+$slider-nav-button-radius: 50% !default;
+
+$slider-nav-button-fill-white-bg: $color-white !default;
+$slider-nav-button-fill-white-border-color: $color-white !default;
+$slider-nav-button-fill-white-shadow: $shadow !default;
+$slider-nav-button-fill-white-color: $color-grey-70 !default;
+$slider-nav-button-fill-white-active-color: $color-grey-40 !default;
+
+/********** Пагинация слайдеров (.slider-pagination) **********/
+
+$slider-pagination-bullet-size: 8px !default;
+$slider-pagination-bullet-gap: 8px !default;
+
+$slider-pagination-bullet-light-bg: $color-grey-90 !default;
+$slider-pagination-bullet-light-border-color: $color-grey-90 !default;
+$slider-pagination-bullet-light-active-bg: $slider-pagination-bullet-light-bg !default;
+$slider-pagination-bullet-light-active-border-color: $slider-pagination-bullet-light-border-color !default;
+$slider-pagination-bullet-light-selected-bg: $color-primary !default;
+$slider-pagination-bullet-light-selected-border-color: $color-primary !default;
+
+$slider-pagination-bullet-dark-bg: $color-grey-80 !default;
+$slider-pagination-bullet-dark-border-color: $color-grey-80 !default;
+$slider-pagination-bullet-dark-active-bg: $slider-pagination-bullet-dark-bg !default;
+$slider-pagination-bullet-dark-active-border-color: $slider-pagination-bullet-dark-border-color !default;
+$slider-pagination-bullet-dark-selected-bg: $color-primary !default;
+$slider-pagination-bullet-dark-selected-border-color: $color-primary !default;
+
+/********** Баннер (.banner) **********/
+
+$banner-radius: $radius;
+
+/********** Хлебные крошки (.breadcrumbs) **********/
+
+$breadcrumbs-item-arrow-color: $color-grey-80 !default;
+$breadcrumbs-color: $link-grey-color !default;
+$breadcrumbs-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
+
+$breadcrumbs-mobile-toggle-color: $breadcrumbs-color !default;
+
+/********** Пагинация **********/
+
+// .pagination
+
+$pagination-item-color: $font-color-primary !default;
+$pagination-item-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
+$pagination-item-active-color: $color-primary !default;
+$pagination-item-disabled-color: $color-grey-70 !default;
+
+// .pagination-group
+
+$pagination-group-color: $font-color-secondary;
+
+/********** Блок "Итого" (.total) **********/
+
+$total-bg: $bg-color-tertiary !default;
+$total-radius: $radius !default;
+$total-font: ('font-size': $font-size, 'line-height': $line-height-s) !default;
+$total-shadow: $shadow !default;
+
+$total-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
+$total-title-desktop-font: ('font-size': $font-size-xl) !default;
+
+$total-specs-label-color: $font-color-secondary !default;
+$total-specs-label-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+
+$total-specs-value-font: ('font-weight': bold) !default;
+$total-specs-value-error-color: $color-error !default;
+
+$total-amount-list-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $total-bg) !default;
+$total-amount-list-separator-width: 1px !default;
+
+$total-amount-label-color: $font-color-secondary !default;
+$total-amount-label-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+
+$total-amount-value-color: $font-color-secondary !default;
+$total-amount-value-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+
+$total-amount-value-s-color: $font-color-secondary !default;
+$total-amount-value-s-font: ('font-size': $font-size-xs) !default;
+
+$total-amount-value-b-color: $font-color-primary !default;
+$total-amount-value-b-mobile-font: ('font-weight': bold, 'font-size': $font-size-l) !default;
+$total-amount-value-b-desktop-font: ('font-size': $font-size-xl) !default;
+
+$total-amount-tax-color: $font-color-tertiary !default;
+$total-amount-tax-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
+
+/********** Удалить всё (.delete-all) **********/
+
+$delete-all-color: $font-color-secondary !default;
+$delete-all-active-color: $color-error !default;
+
+$delete-all-icon-color: $color-grey-70 !default;
+$delete-all-icon-active-color: $delete-all-active-color !default;
+
+$deleta-all-action-list-color: $link-grey-color !default;
+$delete-all-action-list-icon-color: $link-grey-color !default;
+
+/********** Шаги (.steps) **********/
+
+$steps-item-number-border-width: 1px !default;
+$steps-item-number-border-color: $color-grey-90 !default;
+$steps-item-number-bg: $bg-color-tertiary !default;
+$steps-item-number-color: $font-color-secondary !default;
+
+$steps-item-active-number-bg: $color-primary !default;
+$steps-item-active-number-color: $color-white !default;
+
+$steps-item-arrow-bg: $color-grey-70 !default;
+
+$steps-item-active-arrow-bg: $color-grey-20 !default;
+
+$steps-label-color: $font-color-primary !default;
+$steps-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': $line-height) !default;
+
+/********** Шапка **********/
+
+// .header-announcement
+
+$header-announcement-bg: $color-primary-60 !default;
+$header-announcement-color: autocolor(('light': $font-color-primary, 'dark': $font-color-inverted), $header-announcement-bg) !default;
+$header-announcement-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
+
+$header-announcement-secondary-bg: $bg-color-secondary !default;
+$header-announcement-secondary-color: $font-color-primary !default;
+
+$header-announcement-error-bg: $color-error !default;
+$header-announcement-error-color: $header-announcement-color !default;
+
+$header-announcement-warning-bg: $color-warning !default;
+$header-announcement-warning-color: $header-announcement-color !default;
+
+$header-announcement-success-bg: $color-success !default;
+$header-announcement-success-color: $header-announcement-color !default;
+
+/********** Основной каркас (.content) **********/
+
+$content-bg: $bg-color-primary !default;
+$content-bg-grey: $bg-color-secondary !default;
+
+$content-header-link-mobile-font: ('font-size': $font-size-xs, 'line-height': 1) !default;
+$content-header-link-desktop-font: ('font-size': $font-size) !default;
+
+$content-title-mobile-font: $font-h1-mobile !default;
+$content-title-desktop-font: $font-h1-desktop !default;
+$content-title-small-mobile-font: $font-h2-mobile !default;
+$content-title-small-desktop-font: $font-h2-desktop !default;
+
+/********** Адаптивные точки **********/
+
+// При изменении устройств изменить их так же в mm.js
+
+$breakpoints: (
+    'phone': 0,
+    'tablet-portrait': 600px,
+    'tablet-landscape': 900px,
+    'desktop': 1200px,
+    'big-desktop': 1500px,
+) !default;
+$breakpoints-keys: map.keys($breakpoints);
+
+@each $key, $value in $breakpoints {
+    $key-index: list.index($breakpoints-keys, $key);
+    $next-value: 0;
+
+    @if $key-index < list.length($breakpoints-keys) {
+        $next-value: map.get($breakpoints, list.nth($breakpoints-keys, $key-index + 1));
+    }
+
+    @if $key-index == 1 {
+        @custom-media --#{$key}-only (max-width: #{$next-value - 1});
+    } @else if $key-index == list.length($breakpoints-keys) {
+        @custom-media --#{$key}-up (min-width: #{$value});
+    } @else {
+        @custom-media --#{$key}-only (min-width: #{$value}) and (max-width: #{$next-value - 1});
+        @custom-media --#{$key}-up (min-width: #{$value});
+        @custom-media --#{$key}-down (max-width: #{$next-value - 1});
+    }
+}
+
+/********** Миксины **********/
+
+@mixin font($font) {
+    @each $prop, $value in $font {
+        #{$prop}: $value;
+    }
+}
+
+@mixin dark-border($width: 2px, $color: color.scale($bg-color-tertiary, $lightness: 10%)) {
+    @if $dark {
+        border: $width solid $color;
+    } @else {
+        border: none;
+    }
+}
+
+@mixin dark-border-disable($sides: (top, right, bottom, left)) {
+    @each $side in $sides {
+        border-#{$side}-style: none;
+    }
+}
+
+@mixin ul-solid($color) {
+    background-image: linear-gradient(90deg, $color, $color 100%);
+    background-position-x: 0;
+    background-position-y: 95%;
+    background-repeat: repeat-x;
+    background-size: 10px 1px;
+}
+
+@mixin ul-dashed($color) {
+    background-image: linear-gradient(90deg, $color, $color 50%, transparent 50%);
+    background-position-x: 0;
+    background-position-y: 95%;
+    background-repeat: repeat-x;
+    background-size: 6px 1px;
+}
+
+@mixin ul-dotted($color) {
+    background-image: linear-gradient(90deg, $color, $color 50%, transparent 50%);
+    background-position-x: 0;
+    background-position-y: 95%;
+    background-repeat: repeat-x;
+    background-size: 2px 1px;
+}
+
+@mixin custom-scroll() {
+    @media (--desktop-up) {
+        scrollbar-color: $custom-scroll-color $custom-scroll-track-color;
+        scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+        @media (--desktop-up) {
+            width: 4px;
+        }
+    }
+
+    &::-webkit-scrollbar-thumb {
+        @media (--desktop-up) {
+            background-color: $custom-scroll-color;
+        }
+    }
+
+    &::-webkit-scrollbar-track {
+        @media (--desktop-up) {
+            background-color: $custom-scroll-track-color;
+        }
+    }
+}