@sima-land/ui-nucleons 42.2.0 → 43.0.2

package/_internal/custom-scrollbar/custom-scrollbar.module.scss

@@ -10,10 +10,10 @@ $track-bound: 16px;
 
 .custom-scrollbar :global(.os-scrollbar-handle) {
   border-radius: 2px !important;
-  background: colors.$gray12 !important;
+  background: colors.$basic-gray12 !important;
   &:hover,
   &:global(.active) {
-    background: colors.$gray24 !important;
+    background: colors.$basic-gray24 !important;
   }
 }
 

package/alert/alert.module.scss

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparentize(colors.$gray87, 0.76);
+  background: transparentize(colors.$basic-gray87, 0.76);
 }
 
 .alert {

package/arrow-button/arrow-button.module.scss

@@ -13,12 +13,12 @@
   outline: 0;
   box-sizing: border-box;
   transition: box-shadow 200ms ease-out;
-  color: colors.$gray87;
+  color: colors.$basic-gray87;
   &:not(:disabled):hover {
     cursor: pointer;
   }
   &:disabled {
-    color: colors.$gray24;
+    color: colors.$basic-gray24;
   }
   &.size-s {
     width: 32px;

package/autocomplete/index.js

@@ -70,7 +70,7 @@ const Autocomplete = (_a) => {
     const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
     const canShowDropdown = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
-    const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') }) : undefined;
+    const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('basic-gray38') }) : undefined;
     (0, hooks_1.useOutsideClick)(rootRef, () => {
         toggleMenu(false);
     });

package/avatar/index.js

@@ -46,7 +46,7 @@ const ICON_SIZES = {
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'gray4', bgOpacity = 1, textColor = 'gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
+const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'basic-gray4', bgOpacity = 1, textColor = 'basic-gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
     const [needImage, toggleImage] = (0, react_1.useState)(Boolean(imageUrl));
     (0, react_1.useEffect)(() => {
         toggleImage(Boolean(imageUrl));

package/avatar/user.js

@@ -28,13 +28,12 @@ const COLORS = [
     'additional-red',
     'additional-teal',
     'additional-green',
-    'additional-grass',
     'additional-light-green',
     'additional-amber',
     'additional-purple',
     'additional-violet',
     'additional-deep-purple',
-    'additional-blue',
+    'additional-electric-blue',
     'additional-light-blue',
     'additional-cyan',
     'additional-blue-gray',
@@ -53,6 +52,6 @@ const UserAvatar = (props) => {
         window[exports.colorKey] = window[exports.colorKey] || (0, lodash_1.sample)(COLORS);
         setColor(window[exports.colorKey]);
     }, []);
-    return react_1.default.createElement(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'white' }));
+    return react_1.default.createElement(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'basic-white' }));
 };
 exports.UserAvatar = UserAvatar;

package/box/index.d.ts

@@ -60,30 +60,6 @@ export interface BoxProps {
 /**
  * Компонент блока, реализующего оформление в соответствии с дизайн-системой.
  * @param props Свойства.
- * @param props.alignItems Значение свойства "alignItems".
- * @param props.children Содержимое блока.
- * @param props.color Название цвета из дизайн-системы.
- * @param props.dangerouslySetInlineStyle Объект для указания inline-стилей.
- * @param props.direction Значение css-свойства "direction".
- * @param props.display Значение css-свойства "display".
- * @param props.element Элемент, который будет использован как блок.
- * @param props.flex Формирует значение css-свойства "flex".
- * @param props.justifyContent Значение свойства "justifyContent".
- * @param props.margin Внешние отступы.
- * @param props.marginBottom Внешний отступ снизу.
- * @param props.marginLeft Внешний отступ слева.
- * @param props.marginRight Внешний отступ справа.
- * @param props.marginTop Внешний отступ сверху.
- * @param props.marginX Внешний отступ по вертикали.
- * @param props.marginY Внешний отступ по горизонтали.
- * @param props.padding Внутренние отступы.
- * @param props.paddingBottom Внутренний отступ снизу.
- * @param props.paddingLeft Внутренний отступ слева.
- * @param props.paddingRight Внутренний отступ справа.
- * @param props.paddingTop Внутренний отступ сверху.
- * @param props.paddingX Внутренний отступ по вертикали.
- * @param props.paddingY Внутренний отступ по горизонтали.
- * @param props.wrap Формирует значение css-свойства "flex-wrap".
  * @return Элемент.
  */
 export declare const Box: ({ element: Container, children, display, flex, wrap, direction, alignItems, justifyContent, dangerouslySetInlineStyle, margin, marginTop, marginRight, marginBottom, marginLeft, marginX, marginY, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, paddingX, paddingY, color, }: BoxProps) => JSX.Element;

package/box/index.js

@@ -32,22 +32,18 @@ const colors_2 = require("../colors");
 const cx = bind_1.default.bind(box_module_scss_1.default);
 /**
  * Возможные значения свойства "display".
- * @enum {string}
  */
 const DISPLAY = new Set(['block', 'none', 'flex', 'inline', 'inline-block']);
 /**
  * Возможные значения свойства "flex".
- * @enum {string}
  */
 const FLEX = new Set(['shrink', 'grow', 'none']);
 /**
  * Возможные значения свойства "direction".
- * @enum {string}
  */
 const DIRECTION = new Set(['row', 'column']);
 /**
  * Возможные значения свойства "alignItems".
- * @enum {string}
  */
 const ALIGN_ITEMS = new Set(['start', 'end', 'center', 'baseline', 'stretch']);
 /**
@@ -57,30 +53,6 @@ const JUSTIFY_CONTENT = new Set(['start', 'end', 'center', 'between', 'around'])
 /**
  * Компонент блока, реализующего оформление в соответствии с дизайн-системой.
  * @param props Свойства.
- * @param props.alignItems Значение свойства "alignItems".
- * @param props.children Содержимое блока.
- * @param props.color Название цвета из дизайн-системы.
- * @param props.dangerouslySetInlineStyle Объект для указания inline-стилей.
- * @param props.direction Значение css-свойства "direction".
- * @param props.display Значение css-свойства "display".
- * @param props.element Элемент, который будет использован как блок.
- * @param props.flex Формирует значение css-свойства "flex".
- * @param props.justifyContent Значение свойства "justifyContent".
- * @param props.margin Внешние отступы.
- * @param props.marginBottom Внешний отступ снизу.
- * @param props.marginLeft Внешний отступ слева.
- * @param props.marginRight Внешний отступ справа.
- * @param props.marginTop Внешний отступ сверху.
- * @param props.marginX Внешний отступ по вертикали.
- * @param props.marginY Внешний отступ по горизонтали.
- * @param props.padding Внутренние отступы.
- * @param props.paddingBottom Внутренний отступ снизу.
- * @param props.paddingLeft Внутренний отступ слева.
- * @param props.paddingRight Внутренний отступ справа.
- * @param props.paddingTop Внутренний отступ сверху.
- * @param props.paddingX Внутренний отступ по вертикали.
- * @param props.paddingY Внутренний отступ по горизонтали.
- * @param props.wrap Формирует значение css-свойства "flex-wrap".
  * @return Элемент.
  */
 const Box = ({ element: Container = 'div', children, display, flex, wrap, direction, alignItems, justifyContent, dangerouslySetInlineStyle, 

package/button/button.module.scss

@@ -19,8 +19,8 @@
     border: 0;
   }
   &:disabled {
-    color: colors.$gray24;
-    background-color: colors.$gray8;
+    color: colors.$basic-gray24;
+    background-color: colors.$basic-gray8;
   }
 }
 
@@ -80,7 +80,7 @@
 
 // action types
 .button-primary {
-  background-color: colors.$brand-blue;
+  background-color: colors.$basic-blue;
   color: #fff;
   &:hover:not(:disabled) {
     cursor: pointer;
@@ -89,10 +89,10 @@
 }
 
 .button-secondary {
-  background-color: colors.$gray8;
-  color: colors.$gray87;
+  background-color: colors.$basic-gray8;
+  color: colors.$basic-gray87;
   &:hover:not(:disabled) {
     cursor: pointer;
-    background-color: colors.$gray12;
+    background-color: colors.$basic-gray12;
   }
 }

package/carousel/draggable.d.ts

@@ -22,7 +22,6 @@ export interface DraggableProps {
     transitionDuration?: number;
     containerProps?: React.HTMLProps<HTMLDivElement>;
 }
-declare type Cb = () => void;
 /**
  * Компонент области, которую можно прокручивать перетаскиванием.
  */
@@ -33,7 +32,7 @@ export default class Draggable extends Component<DraggableProps> {
     currentOffset: IPoint;
     clientPosition: IPoint;
     draggableRef: React.RefObject<HTMLDivElement>;
-    offList: Array<Cb>;
+    offList: Array<VoidFunction>;
     /**
      * Конструктор компонента области, которую можно прокручивать перетаскиванием.
      * @param props Свойства.
@@ -76,7 +75,7 @@ export default class Draggable extends Component<DraggableProps> {
      * Предотвращает клик если было произведено смещение мышью.
      * @param event Событие окончания захвата.
      */
-    handleClick(event: React.MouseEvent<HTMLDivElement>): void;
+    handleClickCapture(event: React.MouseEvent<HTMLDivElement>): void;
     /**
      * Возвращает разницу последней сохраненной позиции и позиции в переданном событии.
      * @param event Touch- или mouse-событие.
@@ -116,4 +115,3 @@ export default class Draggable extends Component<DraggableProps> {
      */
     render(): JSX.Element;
 }
-export {};

package/carousel/draggable.js

@@ -51,7 +51,7 @@ class Draggable extends react_1.Component {
         this.currentOffset = (0, point_1.default)();
         this.clientPosition = (0, point_1.default)();
         this.draggableRef = (0, react_1.createRef)();
-        this.handleClick = this.handleClick.bind(this);
+        this.handleClickCapture = this.handleClickCapture.bind(this);
         this.startCapture = this.startCapture.bind(this);
         this.offList = [];
     }
@@ -166,7 +166,7 @@ class Draggable extends react_1.Component {
      * Предотвращает клик если было произведено смещение мышью.
      * @param event Событие окончания захвата.
      */
-    handleClick(event) {
+    handleClickCapture(event) {
         if (this.needPreventClick) {
             event.preventDefault();
             this.togglePreventClickNeed(false);
@@ -240,7 +240,7 @@ class Draggable extends react_1.Component {
         const { x, y } = this.currentOffset;
         return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('draggable-container', containerProps.className), 
             // обрабатываем захват чтобы при обработке клика на дочернем элементе defaultPrevented уже был true
-            onClickCapture: this.handleClick, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
+            onClickCapture: this.handleClickCapture, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
             react_1.default.createElement("div", { ref: this.draggableRef, style: {
                     transform: (0, styles_1.getTranslateStyle)(x, y),
                     transition: this.hasTransition ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '',

package/carousel/index.js

@@ -36,6 +36,7 @@ const arrow_button_1 = require("../arrow-button");
 const on_1 = __importDefault(require("../helpers/on"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const carousel_module_scss_1 = __importDefault(require("./carousel.module.scss"));
+const is_browser_1 = __importDefault(require("../helpers/is-browser"));
 const CLONE_FACTOR = 3;
 const cx = bind_1.default.bind(carousel_module_scss_1.default);
 const isAuto = (0, fp_1.eq)('auto');
@@ -531,7 +532,7 @@ class Carousel extends react_1.Component {
      * @return Данные прямоугольной области видимости карусели.
      */
     getViewport() {
-        return (0, bounds_of_1.default)(this.wrapperRef.current);
+        return (0, is_browser_1.default)() ? (0, bounds_of_1.default)(this.wrapperRef.current) : null;
     }
     /**
      * Сохраняет смещение карусели и позицию из события при старте захвата.

package/checkbox-field/checkbox-field.module.scss

@@ -10,14 +10,14 @@
   .label {
     display: block;
     cursor: pointer;
-    color: colors.$gray87;
+    color: colors.$basic-gray87;
     font-size: 16px;
     line-height: 24px;
   }
   .info {
     display: block;
     cursor: pointer;
-    color: colors.$gray38;
+    color: colors.$basic-gray38;
     font-size: 14px;
     line-height: 20px;
   }
@@ -50,7 +50,7 @@
   &.disabled {
     .label,
     .info {
-      color: colors.$gray24;
+      color: colors.$basic-gray24;
     }
   }
 }

package/chips/chips.module.scss

@@ -20,8 +20,8 @@ $gutter: 8px;
   outline: 0;
   border: 0;
   padding: 0 12px;
-  background: colors.$gray8;
-  color: colors.$gray87;
+  background: colors.$basic-gray8;
+  color: colors.$basic-gray87;
   border-radius: 4px;
   box-sizing: border-box;
   font: inherit;
@@ -30,16 +30,16 @@ $gutter: 8px;
   line-height: 16px;
   text-decoration: none;
   &.checked {
-    background: colors.$gray76;
-    color: colors.$white;
+    background: colors.$basic-gray76;
+    color: colors.$basic-white;
   }
 
   // переопределяем стили монолита
   &,
   &:link,
   &:visited {
-    background: colors.$gray8;
-    color: colors.$gray87;
+    background: colors.$basic-gray8;
+    color: colors.$basic-gray87;
   }
 
   // эффект при наведении определяем **после** переопределения стилей монолита
@@ -48,14 +48,14 @@ $gutter: 8px;
   }
   &:hover,
   &:active {
-    background: colors.$gray12;
-    color: colors.$gray87;
+    background: colors.$basic-gray12;
+    color: colors.$basic-gray87;
   }
   &.checked {
     &:hover,
     &:active {
-      background: colors.$gray66;
-      color: colors.$white;
+      background: colors.$basic-gray66;
+      color: colors.$basic-white;
     }
   }
 }

package/clean-buttons/clean-buttons.module.scss

@@ -25,7 +25,7 @@
     flex-shrink: 1;
     flex-basis: 0;
     + .clean-button {
-      border-left: 1px solid colors.$gray12;
+      border-left: 1px solid colors.$basic-gray12;
     }
   }
 }

package/colors.d.ts

@@ -1,46 +1,41 @@
 declare const collection: {
-    readonly black: "#000";
-    readonly white: "#fff";
-    readonly 'brand-blue': "#1f84db";
-    readonly 'brand-dark-blue': "#002b41";
-    readonly 'brand-deep-blue': "#00599d";
-    readonly 'brand-dirty': "#80b4d2";
-    readonly 'brand-sky': "#e4f1f9";
-    readonly gray87: "#212121";
-    readonly gray76: "#3a3a3b";
-    readonly gray66: "#545455";
-    readonly gray54: "#757575";
-    readonly gray38: "#9e9e9e";
-    readonly gray24: "#c2c2c2";
-    readonly gray12: "#e0e0e0";
-    readonly gray8: "#ebebeb";
-    readonly gray4: "#f5f5f5";
-    readonly gray2: "#fafafa";
-    readonly 'additional-amber': "#ffab00";
-    readonly 'additional-blue-gray': "#607d8b";
-    readonly 'additional-blue': "#2962ff";
-    readonly 'additional-brown': "#795548";
-    readonly 'additional-cyan': "#00b8d4";
-    readonly 'additional-deep-orange': "#ff7200";
-    readonly 'additional-deep-purple': "#634bdf";
+    readonly 'basic-blue': "#1f84db";
+    readonly 'basic-gray87': "#212121";
+    readonly 'basic-gray76': "#3a3a3b";
+    readonly 'basic-gray66': "#545455";
+    readonly 'basic-gray54': "#757575";
+    readonly 'basic-gray38': "#9e9e9e";
+    readonly 'basic-gray24': "#c2c2c2";
+    readonly 'basic-gray12': "#e0e0e0";
+    readonly 'basic-gray8': "#ebebeb";
+    readonly 'basic-gray4': "#f5f5f5";
+    readonly 'basic-gray2': "#fafafa";
+    readonly 'basic-white': "#ffffff";
     readonly 'additional-deep-red': "#d50000";
-    readonly 'additional-faded-green': "#eff9ea";
-    readonly 'additional-fog': "#e9f1f4";
-    readonly 'additional-gold': "#d5a43b";
-    readonly 'additional-grass': "#66cb2f";
+    readonly 'additional-red': "#fb3a2f";
+    readonly 'additional-light-red': "#feebea";
+    readonly 'additional-teal': "#09ab8b";
     readonly 'additional-green': "#00c853";
-    readonly 'additional-light-blue': "#0091ea";
     readonly 'additional-light-green': "#64dd17";
-    readonly 'additional-light-red': "#feebea";
     readonly 'additional-lime': "#aeea00";
+    readonly 'additional-faded-green': "#eff9ea";
     readonly 'additional-pink': "#e82e5c";
     readonly 'additional-purple': "#b52ea8";
-    readonly 'additional-red': "#fb3a2f";
-    readonly 'additional-sand': "#f6f5ed";
-    readonly 'additional-teal': "#09ab8b";
     readonly 'additional-violet': "#902bd0";
+    readonly 'additional-deep-purple': "#634bdf";
+    readonly 'additional-electric-blue': "#2962ff";
+    readonly 'additional-light-blue': "#0091ea";
+    readonly 'additional-cyan': "#00b8d4";
+    readonly 'additional-sky': "#e4f1f9";
+    readonly 'additional-deep-orange': "#ff7200";
+    readonly 'additional-amber': "#ffab00";
     readonly 'additional-yellow': "#ffd600";
+    readonly 'additional-gold': "#d5a43b";
+    readonly 'additional-brown': "#795548";
+    readonly 'additional-blue-gray': "#607d8b";
+    readonly 'additional-deep-blue': "#00599d";
+    readonly 'additional-dark-blue': "#002b41";
 };
 export declare type Token = keyof typeof collection;
-export declare const COLORS: Map<"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>;
+export declare const COLORS: Map<"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>;
 export {};

package/colors.js

@@ -3,49 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.COLORS = void 0;
 const collection = {
     // basic
-    black: '#000',
-    white: '#fff',
-    // brand
-    'brand-blue': '#1f84db',
-    'brand-dark-blue': '#002b41',
-    'brand-deep-blue': '#00599d',
-    'brand-dirty': '#80b4d2',
-    'brand-sky': '#e4f1f9',
-    // gray
-    gray87: '#212121',
-    gray76: '#3a3a3b',
-    gray66: '#545455',
-    gray54: '#757575',
-    gray38: '#9e9e9e',
-    gray24: '#c2c2c2',
-    gray12: '#e0e0e0',
-    gray8: '#ebebeb',
-    gray4: '#f5f5f5',
-    gray2: '#fafafa',
+    'basic-blue': '#1f84db',
+    'basic-gray87': '#212121',
+    'basic-gray76': '#3a3a3b',
+    'basic-gray66': '#545455',
+    'basic-gray54': '#757575',
+    'basic-gray38': '#9e9e9e',
+    'basic-gray24': '#c2c2c2',
+    'basic-gray12': '#e0e0e0',
+    'basic-gray8': '#ebebeb',
+    'basic-gray4': '#f5f5f5',
+    'basic-gray2': '#fafafa',
+    'basic-white': '#ffffff',
     // additional
-    'additional-amber': '#ffab00',
-    'additional-blue-gray': '#607d8b',
-    'additional-blue': '#2962ff',
-    'additional-brown': '#795548',
-    'additional-cyan': '#00b8d4',
-    'additional-deep-orange': '#ff7200',
-    'additional-deep-purple': '#634bdf',
     'additional-deep-red': '#d50000',
-    'additional-faded-green': '#eff9ea',
-    'additional-fog': '#e9f1f4',
-    'additional-gold': '#d5a43b',
-    'additional-grass': '#66cb2f',
+    'additional-red': '#fb3a2f',
+    'additional-light-red': '#feebea',
+    'additional-teal': '#09ab8b',
     'additional-green': '#00c853',
-    'additional-light-blue': '#0091ea',
     'additional-light-green': '#64dd17',
-    'additional-light-red': '#feebea',
     'additional-lime': '#aeea00',
+    'additional-faded-green': '#eff9ea',
     'additional-pink': '#e82e5c',
     'additional-purple': '#b52ea8',
-    'additional-red': '#fb3a2f',
-    'additional-sand': '#f6f5ed',
-    'additional-teal': '#09ab8b',
     'additional-violet': '#902bd0',
+    'additional-deep-purple': '#634bdf',
+    'additional-electric-blue': '#2962ff',
+    'additional-light-blue': '#0091ea',
+    'additional-cyan': '#00b8d4',
+    'additional-sky': '#e4f1f9',
+    'additional-deep-orange': '#ff7200',
+    'additional-amber': '#ffab00',
     'additional-yellow': '#ffd600',
+    'additional-gold': '#d5a43b',
+    'additional-brown': '#795548',
+    'additional-blue-gray': '#607d8b',
+    'additional-deep-blue': '#00599d',
+    'additional-dark-blue': '#002b41',
 };
 exports.COLORS = new Map(Object.entries(collection));

package/colors.scss

@@ -1,48 +1,39 @@
 // basic
-$black: #000;
-$white: #fff;
-
-// brand
-$brand-blue: #1f84db;
-$brand-dark-blue: #002b41;
-$brand-deep-blue: #00599d;
-$brand-dirty: #80b4d2;
-$brand-sky: #e4f1f9;
-
-// gray
-$gray87: #212121;
-$gray76: #3a3a3b;
-$gray66: #545455;
-$gray54: #757575;
-$gray38: #9e9e9e;
-$gray24: #c2c2c2;
-$gray12: #e0e0e0;
-$gray8: #ebebeb;
-$gray4: #f5f5f5;
-$gray2: #fafafa;
+$basic-blue: #1f84db;
+$basic-gray87: #212121;
+$basic-gray76: #3a3a3b;
+$basic-gray66: #545455;
+$basic-gray54: #757575;
+$basic-gray38: #9e9e9e;
+$basic-gray24: #c2c2c2;
+$basic-gray12: #e0e0e0;
+$basic-gray8: #ebebeb;
+$basic-gray4: #f5f5f5;
+$basic-gray2: #fafafa;
+$basic-white: #fff;
 
 // additional
-$additional-amber: #ffab00;
-$additional-blue-gray: #607d8b;
-$additional-blue: #2962ff;
-$additional-brown: #795548;
-$additional-cyan: #00b8d4;
-$additional-deep-orange: #ff7200;
-$additional-deep-purple: #634bdf;
 $additional-deep-red: #d50000;
-$additional-faded-green: #eff9ea;
-$additional-fog: #e9f1f4;
-$additional-gold: #d5a43b;
-$additional-grass: #66cb2f;
+$additional-red: #fb3a2f;
+$additional-light-red: #feebea;
+$additional-teal: #09ab8b;
 $additional-green: #00c853;
-$additional-light-blue: #0091ea;
 $additional-light-green: #64dd17;
-$additional-light-red: #feebea;
 $additional-lime: #aeea00;
+$additional-faded-green: #eff9ea;
 $additional-pink: #e82e5c;
 $additional-purple: #b52ea8;
-$additional-red: #fb3a2f;
-$additional-sand: #f6f5ed;
-$additional-teal: #09ab8b;
 $additional-violet: #902bd0;
+$additional-deep-purple: #634bdf;
+$additional-electric-blue: #2962ff;
+$additional-light-blue: #0091ea;
+$additional-cyan: #00b8d4;
+$additional-sky: #e4f1f9;
+$additional-deep-orange: #ff7200;
+$additional-amber: #ffab00;
 $additional-yellow: #ffd600;
+$additional-gold: #d5a43b;
+$additional-brown: #795548;
+$additional-blue-gray: #607d8b;
+$additional-deep-blue: #00599d;
+$additional-dark-blue: #002b41;

package/dot-nav/dot-nav.module.scss

@@ -37,7 +37,7 @@
     top: 50%;
     left: 50%;
     border-radius: 50%;
-    background: colors.$gray12;
+    background: colors.$basic-gray12;
 
     // используем 10 чтобы проще считать коэффициенты масштабирования
     // ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
@@ -49,6 +49,6 @@
     transition: transform 0.3s, background 0.3s;
   }
   &.active::after {
-    background: colors.$gray38;
+    background: colors.$basic-gray38;
   }
 }

package/dropdown-item/dropdown-item.module.scss

@@ -16,12 +16,12 @@ $sizes: (
   &:not(.disabled):not(.no-hover).checked,
   &:not(.disabled):not(.no-hover):hover {
     cursor: pointer;
-    background: colors.$gray4;
+    background: colors.$basic-gray4;
   }
 }
 
 .disabled {
-  color: colors.$gray24;
+  color: colors.$basic-gray24;
 }
 
 @each $key, $size in $sizes {

package/file-icon/index.js

@@ -19,8 +19,8 @@ const react_1 = __importDefault(require("react"));
 const colors_1 = require("../colors");
 const unknown_svg_1 = __importDefault(require("./unknown.svg"));
 const VARIANTS = {
-    doc: { fill: colors_1.COLORS.get('additional-blue') },
-    xls: { fill: colors_1.COLORS.get('additional-grass') },
+    doc: { fill: colors_1.COLORS.get('additional-electric-blue') },
+    xls: { fill: colors_1.COLORS.get('additional-light-green') },
     pdf: { fill: colors_1.COLORS.get('additional-deep-red') },
     jpg: { fill: colors_1.COLORS.get('additional-deep-orange') },
     xml: { fill: colors_1.COLORS.get('additional-deep-purple') },