@sima-land/ui-nucleons 42.2.0 → 43.0.0

package/link/link.module.scss

@@ -17,27 +17,27 @@
 
 // ниже двойные классы для высокой специфичности в монолите
 .link.disabled {
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
   pointer-events: none;
 }
 
 .link:not(.disabled).brand-blue {
-  color: colors.$brand-blue;
+  color: colors.$basic-blue;
   &:hover {
-    color: colors.$brand-deep-blue;
+    color: colors.$additional-deep-blue;
   }
 }
 
 .link:not(.disabled).gray87 {
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:hover {
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
 }
 
 .link:not(.disabled).gray38 {
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &:hover {
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
 }

package/nav-bar/index.js

@@ -71,6 +71,6 @@ exports.NavBar = NavBar;
  */
 const NavButton = (_a) => {
     var { text, icon: Icon, stub = false, shift, className } = _a, buttonProps = __rest(_a, ["text", "icon", "stub", "shift", "className"]);
-    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
+    return (react_1.default.createElement("button", Object.assign({}, (!stub && buttonProps), { type: 'button', className: cx('button', Icon && 'icon', shift === 'left' && 'shift-left', shift === 'right' && 'shift-right', stub && 'stub', className), "aria-hidden": stub }), Icon && !stub ? (react_1.default.createElement(Icon, { fill: colors_1.COLORS.get('basic-gray87'), className: cx('svg'), "aria-hidden": 'true' })) : (text)));
 };
 exports.NavButton = NavButton;

package/nav-bar/nav-bar.module.scss

@@ -21,14 +21,14 @@
 }
 
 .title {
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
 }
 
 .subtitle {
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   font-size: 12px;
   line-height: 16px;
   margin-top: -4px;
@@ -60,7 +60,7 @@
   background: transparent;
   border: 0;
   box-sizing: border-box;
-  color: colors.$brand-blue;
+  color: colors.$basic-blue;
   font-family: inherit;
   font-size: 14px;
   font-weight: 600;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "42.2.0",
+  "version": "43.0.0",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -59,6 +59,7 @@
     "enzyme-to-json": "^3.6.2",
     "eslint": "^7.31.0",
     "file-loader": "^6.2.0",
+    "handlebars": "^4.7.7",
     "husky": "^7.0.4",
     "jest": "^27.3.1",
     "jest-css-modules-transform": "^4.3.0",
@@ -83,6 +84,7 @@
   },
   "scripts": {
     "prepare": "",
+    "export:colors": "node .template/build.mjs",
     "build:before": "rimraf build",
     "build:main": "tsc --project tsconfig.build.json",
     "build:after": "node dist.js",

package/pagination/pagination.module.scss

@@ -23,7 +23,7 @@
   width: 38px;
   height: 38px;
   background: #fff;
-  border: 1px solid colors.$gray12;
+  border: 1px solid colors.$basic-gray12;
   font-size: 14px;
   outline: 0;
   box-sizing: border-box;
@@ -43,7 +43,7 @@
     }
   }
   &:disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &:not(.rounds-all) {
     margin-right: -1px;
@@ -54,8 +54,8 @@
   }
   &.selected {
     position: relative;
-    background: colors.$gray87;
-    border-color: colors.$gray87;
+    background: colors.$basic-gray87;
+    border-color: colors.$basic-gray87;
     color: #fff;
     cursor: default;
     &::after {

package/panel/index.js

@@ -15,7 +15,7 @@ const cx = bind_1.default.bind(panel_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const Panel = ({ color: panelColor = 'gray4', contentColor = 'gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
+const Panel = ({ color: panelColor = 'basic-gray4', contentColor = 'basic-gray87', inline = false, icon: Icon, className, children, html, 'data-testid': testId = 'panel', }) => {
     const contentProps = html ? { dangerouslySetInnerHTML: { __html: html } } : { children };
     return (react_1.default.createElement("div", { className: cx('panel', inline && 'inline', (0, colors_1.bgColor)(panelColor), className), "data-testid": testId },
         Icon && (react_1.default.createElement(Icon, { fill: colors_2.COLORS.get(contentColor), width: 16, height: 20, className: cx('icon'), "aria-hidden": 'true' })),

package/phone-input/index.js

@@ -75,7 +75,7 @@ const PhoneInput = (_a) => {
     });
     const AdornmentSVG = withMenu ? up_1.default : down_1.default;
     const commonFieldProps = Object.assign(Object.assign({}, restProps), { label, multiline: false, className: cx('field'), endAdornment: (react_1.default.createElement("div", { ref: openerRef, className: cx('adornment'), "data-testid": 'phone-input:dropdown-opener', onClick: () => {
-                toggleMenu(true);
+                toggleMenu(a => !a);
             } },
             react_1.default.createElement("img", { alt: '', width: 24, height: 24, src: country.imageSrc }),
             react_1.default.createElement(AdornmentSVG, { className: cx('arrow') }))), onClick: event => {

package/phone-input/phone-input.module.scss

@@ -19,7 +19,7 @@
 
 .arrow {
   display: block;
-  fill: colors.$gray38;
+  fill: colors.$basic-gray38;
   margin-left: 4px;
   pointer-events: none; // игнорируем клики т.к. после них элемент стрелки подменяется и считается что он сработал вне элемента родителя
 }
@@ -36,11 +36,11 @@
   font-size: 16px;
   line-height: 24px;
   .item-name {
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
     flex-grow: 1;
     margin-left: 16px;
   }
   .item-code {
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
   }
 }

package/plate/index.js

@@ -45,5 +45,5 @@ const classnames_1 = __importDefault(require("classnames"));
  */
 exports.Plate = (0, react_1.forwardRef)(function Plate(_a, ref) {
     var { className, children, rounds = 's', shadow = 'z1', 'data-testid': testId = 'plate' } = _a, restProps = __rest(_a, ["className", "children", "rounds", "shadow", 'data-testid']);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)((0, colors_1.bgColor)('basic-white'), className, shadows_1.BoxShadow[shadow], rounds === 's' && shapes_1.SmallRounds.all, rounds === 'm' && shapes_1.MediumRounds.all), "data-testid": testId, children: children }, restProps)));
 });

package/price/price.module.scss

@@ -5,7 +5,7 @@
   display: inline-block;
   white-space: nowrap;
   &.crossed-out {
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     text-decoration: line-through;
   }
 }

package/rating/rating.module.scss

@@ -30,7 +30,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  fill: colors.$gray12;
+  fill: colors.$basic-gray12;
   &.half {
     width: 50%;
     fill: colors.$additional-amber;

package/select/index.js

@@ -54,7 +54,7 @@ const cx = bind_1.default.bind(select_module_scss_1.default);
  */
 const renderDefaultArrow = (opened) => {
     const ArrowSVG = opened ? up_1.default : down_1.default;
-    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('gray38') });
+    return react_1.default.createElement(ArrowSVG, { fill: colors_1.COLORS.get('basic-gray38') });
 };
 exports.renderDefaultArrow = renderDefaultArrow;
 /**

package/spinner/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-declare type Color = 'brand-blue' | 'white';
+import { Token } from '../colors';
+declare type SpinnerColor = Extract<Token, 'basic-blue' | 'basic-white'>;
 declare type Size = 'small' | 'medium' | 'large';
 export interface SpinnerProps {
     /** Размер. */
     size?: Size;
     /** Цвет. */
-    color?: Color;
+    color?: SpinnerColor;
     /** Класс. */
     className?: string;
     /** Стили. */

package/spinner/index.js

@@ -15,8 +15,8 @@ exports.DIAMETERS = {
     medium: 48,
     large: 80,
 };
-const DEFAULT_COLOR = 'brand-blue';
-const AVAILABLE_COLORS = ['brand-blue', 'white'];
+const DEFAULT_COLOR = 'basic-blue';
+const AVAILABLE_COLORS = ['basic-blue', 'basic-white'];
 /**
  * Компонент спиннера.
  * @param props Свойства.

package/spinner/spinner.module.scss

@@ -11,6 +11,7 @@ $durations: (
 );
 
 .spinner {
+  display: block;
   .circle {
     fill: none;
     stroke-width: 2;

package/stepper/stepper.module.scss

@@ -3,23 +3,23 @@
 .root {
   display: flex;
   align-items: center;
-  border: 1px solid colors.$gray12;
+  border: 1px solid colors.$basic-gray12;
   border-radius: 4px;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   background: #fff;
   &.focused:not(.disabled) {
-    border-color: colors.$brand-blue;
+    border-color: colors.$basic-blue;
   }
   &.disabled {
-    color: colors.$gray24;
-    border-color: colors.$gray12;
+    color: colors.$basic-gray24;
+    border-color: colors.$basic-gray12;
     .button {
-      fill: colors.$gray12;
+      fill: colors.$basic-gray12;
     }
   }
   &.readonly {
     .button {
-      fill: colors.$gray24;
+      fill: colors.$basic-gray24;
     }
   }
   &.failed:not(.disabled):not(.focused) {
@@ -56,7 +56,7 @@
 }
 
 .button {
-  fill: colors.$gray38;
+  fill: colors.$basic-gray38;
   flex-shrink: 0;
   &:not(.hidden) {
     cursor: pointer;

package/stroked-svg/index.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 export interface StrokedSVGProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Компонент, выводящий svg-элемент. */
     component: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
-    /** Ширина внешней обводки. */
-    stroke?: string;
     /** Цвет внешней обводки. */
+    stroke?: string;
+    /** Ширина внешней обводки. */
     strokeWidth?: number;
     /** Цвет заливки. */
     fill?: string;

package/stroked-svg/index.js

@@ -44,7 +44,7 @@ const index_module_scss_1 = __importDefault(require("./index.module.scss"));
  * @return Элемент.
  */
 exports.StrokedSVG = (0, react_1.forwardRef)((_a, ref) => {
-    var { component: Tag, fill, stroke = colors_1.COLORS.get('gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
+    var { component: Tag, fill, stroke = colors_1.COLORS.get('basic-gray4'), strokeWidth = 1, className } = _a, restProps = __rest(_a, ["component", "fill", "stroke", "strokeWidth", "className"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(index_module_scss_1.default.root, className) }, restProps),
         react_1.default.createElement(Tag, { stroke: stroke, strokeWidth: `${strokeWidth * 2}px`, className: index_module_scss_1.default.stroke }),
         react_1.default.createElement(Tag, { fill: fill, className: index_module_scss_1.default.svg })));

package/styling/borders.module.scss

@@ -1,13 +1,13 @@
 @use '../colors';
 
 .inner-border-top {
-  box-shadow: inset 0 1px 0 colors.$gray12;
+  box-shadow: inset 0 1px 0 colors.$basic-gray12;
 }
 
 .inner-border-bottom {
-  box-shadow: inset 0 -1px 0 colors.$gray12;
+  box-shadow: inset 0 -1px 0 colors.$basic-gray12;
 }
 
 .inner-border-y {
-  box-shadow: inset 0 1px 0 colors.$gray12, inset 0 -1px 0 colors.$gray12;
+  box-shadow: inset 0 1px 0 colors.$basic-gray12, inset 0 -1px 0 colors.$basic-gray12;
 }

package/styling/colors.d.ts

@@ -1,5 +1,5 @@
-export declare const color: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const hoverColor: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const bgColor: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const stroke: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
-export declare const fill: (value: "black" | "white" | "brand-blue" | "brand-dark-blue" | "brand-deep-blue" | "brand-dirty" | "brand-sky" | "gray87" | "gray76" | "gray66" | "gray54" | "gray38" | "gray24" | "gray12" | "gray8" | "gray4" | "gray2" | "additional-amber" | "additional-blue-gray" | "additional-blue" | "additional-brown" | "additional-cyan" | "additional-deep-orange" | "additional-deep-purple" | "additional-deep-red" | "additional-faded-green" | "additional-fog" | "additional-gold" | "additional-grass" | "additional-green" | "additional-light-blue" | "additional-light-green" | "additional-light-red" | "additional-lime" | "additional-pink" | "additional-purple" | "additional-red" | "additional-sand" | "additional-teal" | "additional-violet" | "additional-yellow") => string | undefined;
+export declare const color: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const hoverColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const bgColor: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const stroke: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;
+export declare const fill: (value: "basic-blue" | "basic-gray87" | "basic-gray76" | "basic-gray66" | "basic-gray54" | "basic-gray38" | "basic-gray24" | "basic-gray12" | "basic-gray8" | "basic-gray4" | "basic-gray2" | "basic-white" | "additional-deep-red" | "additional-red" | "additional-light-red" | "additional-teal" | "additional-green" | "additional-light-green" | "additional-lime" | "additional-faded-green" | "additional-pink" | "additional-purple" | "additional-violet" | "additional-deep-purple" | "additional-electric-blue" | "additional-light-blue" | "additional-cyan" | "additional-sky" | "additional-deep-orange" | "additional-amber" | "additional-yellow" | "additional-gold" | "additional-brown" | "additional-blue-gray" | "additional-deep-blue" | "additional-dark-blue") => string | undefined;

package/tabs/tabs.module.scss

@@ -26,10 +26,10 @@
   &.view-clean-underline {
     height: 32px;
     .item {
-      color: colors.$gray38;
+      color: colors.$basic-gray38;
       &.selected {
         position: relative;
-        color: colors.$gray87;
+        color: colors.$basic-gray87;
         &::before {
           content: '';
           position: absolute;
@@ -38,17 +38,17 @@
           left: 0;
           right: 0;
           bottom: 0;
-          background-color: colors.$brand-blue;
+          background-color: colors.$basic-blue;
           border-top-left-radius: 4px;
           border-top-right-radius: 4px;
         }
       }
       &.disabled {
-        color: colors.$gray12;
+        color: colors.$basic-gray12;
       }
       &:not(.selected):not(.disabled):hover {
         cursor: pointer;
-        color: colors.$gray54;
+        color: colors.$basic-gray54;
       }
     }
   }
@@ -61,26 +61,26 @@
       content: '';
       height: 1px;
       width: 100%;
-      background-color: colors.$gray12;
+      background-color: colors.$basic-gray12;
     }
   }
   &.view-round {
     height: 40px;
     .item {
-      color: colors.$gray87;
+      color: colors.$basic-gray87;
       padding: 8px 16px;
       border-radius: 4px;
-      background-color: colors.$gray4;
+      background-color: colors.$basic-gray4;
       &.selected {
-        background-color: colors.$brand-blue;
-        color: colors.$white;
+        background-color: colors.$basic-blue;
+        color: colors.$basic-white;
       }
       &.disabled {
-        color: colors.$gray24;
+        color: colors.$basic-gray24;
       }
       &:not(.selected):not(.disabled):hover {
         cursor: pointer;
-        background-color: colors.$gray8;
+        background-color: colors.$basic-gray8;
       }
     }
   }

package/text-field/text-field.module.scss

@@ -38,16 +38,16 @@ input.reset {
   // variant: desktop
   &.variant-desktop {
     background-color: #fff;
-    border: 1px solid colors.$gray12;
+    border: 1px solid colors.$basic-gray12;
     &.disabled {
-      border-color: colors.$gray12;
-      background-color: colors.$gray2;
+      border-color: colors.$basic-gray12;
+      background-color: colors.$basic-gray2;
     }
     &.focused:not(.disabled):not(.failed) {
-      border-color: colors.$brand-blue;
+      border-color: colors.$basic-blue;
     }
     &.disabled {
-      border-color: colors.$gray12;
+      border-color: colors.$basic-gray12;
     }
     &:not(.multiline) {
       &.size-xs {
@@ -79,7 +79,7 @@ input.reset {
   &.variant-mobile {
     padding: 0;
     border: 0;
-    box-shadow: inset 0 -1px colors.$gray12;
+    box-shadow: inset 0 -1px colors.$basic-gray12;
     .main-column {
       height: 100%;
       justify-content: center;
@@ -88,7 +88,7 @@ input.reset {
       justify-content: flex-start;
     }
     &.focused:not(.disabled) {
-      box-shadow: inset 0 -1px colors.$brand-blue;
+      box-shadow: inset 0 -1px colors.$basic-blue;
     }
     &.failed:not(:disabled) {
       box-shadow: inset 0 -1px colors.$additional-red;
@@ -109,9 +109,9 @@ input.reset {
   }
 
   // чтобы startAdornment/endAdornment подхватили цвет
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &.disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
 }
 
@@ -138,9 +138,9 @@ input.reset {
   transform-origin: left bottom;
   white-space: nowrap;
   overflow: hidden;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &.disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &.as-placeholder {
     font-size: 16px;
@@ -154,7 +154,7 @@ input.reset {
   }
   &.variant-mobile {
     &.focused:not(.failed) {
-      color: colors.$brand-blue;
+      color: colors.$basic-blue;
     }
     &.failed.focused,
     &.failed.filled {
@@ -172,15 +172,15 @@ input.reset {
 .input-wrapper .base-input {
   font-size: 16px;
   line-height: 24px;
-  color: colors.$gray87;
-  --placeholder-color: #{colors.$gray38};
+  color: colors.$basic-gray87;
+  --placeholder-color: #{colors.$basic-gray38};
   background-color: transparent;
   width: 0;
   flex-grow: 1;
   &.disabled {
-    color: colors.$gray24;
-    --placeholder-color: #{colors.$gray24};
-    -webkit-text-fill-color: colors.$gray24; //fix safari disabled
+    color: colors.$basic-gray24;
+    --placeholder-color: #{colors.$basic-gray24};
+    -webkit-text-fill-color: colors.$basic-gray24; //fix safari disabled
   }
   &.size-xs {
     font-size: 14px;
@@ -198,7 +198,7 @@ input.reset {
 .caption {
   font-size: 12px;
   line-height: 16px;
-  color: colors.$gray38;
+  color: colors.$basic-gray38;
   &.failed {
     color: colors.$additional-red;
   }

package/toggle/toggle.module.scss

@@ -12,13 +12,13 @@
 .input {
   display: none;
   &:checked + .switch {
-    background: colors.$brand-blue;
+    background: colors.$basic-blue;
     &::after {
       left: calc(100% - 22px);
     }
   }
   &:disabled + .switch {
-    background: colors.$gray4;
+    background: colors.$basic-gray4;
   }
 }
 
@@ -28,7 +28,7 @@
   width: 44px;
   height: 24px;
   border-radius: 12px;
-  background: colors.$gray12;
+  background: colors.$basic-gray12;
   transition: background 0.16s ease-in-out;
   &::after {
     content: '';

package/tooltip/tooltip.module.scss

@@ -9,7 +9,7 @@
   padding: 40px 8px;
   box-sizing: border-box;
   overflow: hidden;
-  background: colors.$gray4;
+  background: colors.$basic-gray4;
   border-radius: 4px;
   @extend .shadow-z2;
 }

package/top-bar/top-bar.module.scss

@@ -25,7 +25,7 @@
   .subtitle {
     font-size: 12px;
     line-height: 16px;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
   }
   .icon-button {
     + .icon-button {
@@ -84,10 +84,10 @@
   flex-shrink: 0;
   overflow: hidden;
   background: transparent;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:not(.stub):hover {
     cursor: pointer;
-    color: colors.$gray54;
+    color: colors.$basic-gray54;
   }
   > svg {
     fill: currentColor;