@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/cjs/components/Token/Token.js

@@ -1,13 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Token = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.TokenDataTids = exports.Token = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
 
-var _Token = require("./Token.styles");var
+var _Token = require("./Token.styles");var _class, _class2, _temp;
 
 
 
@@ -32,10 +35,8 @@ var _Token = require("./Token.styles");var
 
 
 
-Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
-    theme = void 0;_this.
 
 
 
@@ -44,11 +45,23 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
 
 
 
+var getValidation = function getValidation(error, warning) {
+  if (error) {
+    return 'error';
+  } else if (warning) {
+    return 'warning';
+  }
 
+  return null;
+};
 
+var TokenDataTids = {
+  root: 'Token__root',
+  removeIcon: 'Token__removeIcon' };exports.TokenDataTids = TokenDataTids;var
 
 
 
+Token = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Token, _React$Component);function Token() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -106,8 +119,43 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
 
 
 
-    onRemoveClick = function (event) {var _this$props =
-      _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    onRemoveClick = function (event) {
+      var _this$props = _this.props,disabled = _this$props.disabled,_this$props$onRemove = _this$props.onRemove,onRemove = _this$props$onRemove === void 0 ? _utils.emptyHandler : _this$props$onRemove;
 
       if (disabled) {
         event.preventDefault();
@@ -115,4 +163,4 @@ Token = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(T
       }
 
       onRemove(event);
-    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,colors = _this$props2.colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = error ? 'error' : warning ? 'warning' : null;var disableClassNames = (0, _classnames.default)(_Token.jsTokenColors.defaultDisabled(theme), (_cn = {}, _cn[_Token.jsTokenColors.defaultDisabledWarning(theme)] = warning, _cn[_Token.jsTokenColors.defaultDisabledError(theme)] = error, _cn));var tokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultIdle(theme, validation);var activeTokenClassName = disabled ? disableClassNames : _Token.jsTokenColors.defaultActive(theme, validation);if (!disabled && colors) {tokenClassName = _Token.jsTokenColors[colors.idle](theme, validation);var activeClassName = colors.active ? colors.active : colors.idle;activeTokenClassName = _Token.jsTokenColors[activeClassName](theme, validation);}var tokenClassNames = (0, _classnames.default)(_Token.jsStyles.token(this.theme), tokenClassName, (_cn2 = {}, _cn2[activeTokenClassName] = !!isActive, _cn2[_Token.jsStyles.disabled(theme)] = !!disabled, _cn2));return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: tokenClassNames, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: _Token.jsStyles.removeIcon(this.theme), onClick: this.onRemoveClick }, /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null))));};return Token;}(_react.default.Component);exports.Token = Token;Token.__KONTUR_REACT_UI__ = 'Token';
+    };return _this;}var _proto = Token.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props2 = this.props,children = _this$props2.children,isActive = _this$props2.isActive,_this$props2$colors = _this$props2.colors,colors = _this$props2$colors === void 0 ? { idle: 'defaultIdle', active: 'defaultActive' } : _this$props2$colors,error = _this$props2.error,warning = _this$props2.warning,disabled = _this$props2.disabled,ariaDescribedby = _this$props2['aria-describedby'],_this$props2$onClick = _this$props2.onClick,onClick = _this$props2$onClick === void 0 ? _utils.emptyHandler : _this$props2$onClick,_this$props2$onDouble = _this$props2.onDoubleClick,onDoubleClick = _this$props2$onDouble === void 0 ? _utils.emptyHandler : _this$props2$onDouble,_this$props2$onMouseE = _this$props2.onMouseEnter,onMouseEnter = _this$props2$onMouseE === void 0 ? _utils.emptyHandler : _this$props2$onMouseE,_this$props2$onMouseL = _this$props2.onMouseLeave,onMouseLeave = _this$props2$onMouseL === void 0 ? _utils.emptyHandler : _this$props2$onMouseL,_this$props2$onFocus = _this$props2.onFocus,onFocus = _this$props2$onFocus === void 0 ? _utils.emptyHandler : _this$props2$onFocus,_this$props2$onBlur = _this$props2.onBlur,onBlur = _this$props2$onBlur === void 0 ? _utils.emptyHandler : _this$props2$onBlur;var theme = this.theme;var validation = getValidation(error, warning);var icon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/_react.default.createElement(_CloseButtonIcon.CloseButtonIcon, { side: 16, color: "inherit", colorHover: "inherit", tabbable: false }) : /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null);var classNames = '';if ((0, _ThemeHelpers.isTheme2022)(theme)) {classNames = (0, _Emotion.cx)(_Token.styles.tokenDefaultIdle2022(theme), !isActive && !warning && !error && !disabled && _Token.styles.tokenDefaultIdleHovering2022(theme), isActive && _Token.styles.tokenDefaultActive2022(theme), warning && _Token.styles.tokenWarning2022(theme), error && _Token.styles.tokenError2022(theme), disabled && _Token.styles.tokenDisabled2022(theme));} else {classNames = (0, _Emotion.cx)(_Token.colorStyles[colors.idle](theme, validation), !!isActive && _Token.colorStyles[colors.active || colors.idle](theme, validation), !!disabled && _Token.styles.disabled(theme), !!disabled && _Token.colorStyles.defaultDisabled(theme), !!disabled && warning && _Token.colorStyles.defaultDisabledWarning(theme), !!disabled && error && _Token.colorStyles.defaultDisabledError(theme));}var tokenClassNames = (0, _Emotion.cx)(_Token.styles.token(this.theme), classNames);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": TokenDataTids.root, className: tokenClassNames, "aria-describedby": ariaDescribedby, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, /*#__PURE__*/_react.default.createElement("span", { className: _Token.styles.text(this.theme) }, children), /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Token.styles.removeIcon(this.theme), _Token.globalClasses.removeIcon), onClick: this.onRemoveClick, "data-tid": TokenDataTids.removeIcon }, icon)));};return Token;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Token', _temp)) || _class;exports.Token = Token;

package/cjs/components/Token/Token.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Token.tsx"],"names":["Token","theme","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","renderMain","children","isActive","colors","error","warning","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","disableClassNames","jsTokenColors","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassName","defaultIdle","activeTokenClassName","defaultActive","idle","activeClassName","active","tokenClassNames","jsStyles","token","text","removeIcon","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { emptyHandler } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles, jsTokenColors } from './Token.styles';\r\n\r\nexport type TokenColorName = keyof typeof jsTokenColors;\r\n\r\nexport interface TokenColors {\r\n  idle: TokenColorName;\r\n  active?: TokenColorName;\r\n}\r\n\r\nexport interface TokenProps extends CommonProps {\r\n  colors?: TokenColors;\r\n  isActive?: boolean;\r\n  error?: boolean;\r\n  warning?: boolean;\r\n  disabled?: boolean;\r\n\r\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\r\n  onRemove?: React.MouseEventHandler<HTMLElement>;\r\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\r\n}\r\n\r\nexport class Token extends React.Component<TokenProps> {\r\n  public static __KONTUR_REACT_UI__ = 'Token';\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      children,\r\n      isActive,\r\n      colors,\r\n      error,\r\n      warning,\r\n      disabled,\r\n      onClick = emptyHandler,\r\n      onDoubleClick = emptyHandler,\r\n      onMouseEnter = emptyHandler,\r\n      onMouseLeave = emptyHandler,\r\n      onFocus = emptyHandler,\r\n      onBlur = emptyHandler,\r\n    } = this.props;\r\n\r\n    const theme = this.theme;\r\n    const validation = error ? 'error' : warning ? 'warning' : null;\r\n    const disableClassNames = cn(jsTokenColors.defaultDisabled(theme), {\r\n      [jsTokenColors.defaultDisabledWarning(theme)]: warning,\r\n      [jsTokenColors.defaultDisabledError(theme)]: error,\r\n    });\r\n\r\n    let tokenClassName = disabled ? disableClassNames : jsTokenColors.defaultIdle(theme, validation);\r\n    let activeTokenClassName = disabled ? disableClassNames : jsTokenColors.defaultActive(theme, validation);\r\n\r\n    if (!disabled && colors) {\r\n      tokenClassName = jsTokenColors[colors.idle](theme, validation);\r\n\r\n      const activeClassName = colors.active ? colors.active : colors.idle;\r\n      activeTokenClassName = jsTokenColors[activeClassName](theme, validation);\r\n    }\r\n\r\n    const tokenClassNames = cn(jsStyles.token(this.theme), tokenClassName, {\r\n      [activeTokenClassName]: !!isActive,\r\n      [jsStyles.disabled(theme)]: !!disabled,\r\n    });\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div\r\n          className={tokenClassNames}\r\n          onClick={onClick}\r\n          onDoubleClick={onDoubleClick}\r\n          onMouseEnter={onMouseEnter}\r\n          onMouseLeave={onMouseLeave}\r\n          onFocus={onFocus}\r\n          onBlur={onBlur}\r\n        >\r\n          <span className={jsStyles.text(this.theme)}>{children}</span>\r\n          <span className={jsStyles.removeIcon(this.theme)} onClick={this.onRemoveClick}>\r\n            <CrossIcon />\r\n          </span>\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\r\n    const { disabled, onRemove = emptyHandler } = this.props;\r\n\r\n    if (disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    onRemove(event);\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Token.tsx"],"names":["getValidation","error","warning","TokenDataTids","root","removeIcon","Token","rootNode","onRemoveClick","event","props","disabled","onRemove","emptyHandler","preventDefault","render","theme","renderMain","children","isActive","colors","idle","active","ariaDescribedby","onClick","onDoubleClick","onMouseEnter","onMouseLeave","onFocus","onBlur","validation","icon","classNames","styles","tokenDefaultIdle2022","tokenDefaultIdleHovering2022","tokenDefaultActive2022","tokenWarning2022","tokenError2022","tokenDisabled2022","colorStyles","defaultDisabled","defaultDisabledWarning","defaultDisabledError","tokenClassNames","token","setRootNode","text","globalClasses","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles, colorStyles, globalClasses } from './Token.styles';\n\nexport type TokenColorName = keyof typeof colorStyles;\n\nexport interface TokenColors {\n  idle: TokenColorName;\n  active?: TokenColorName;\n}\n\nexport interface TokenProps extends CommonProps {\n  colors?: TokenColors;\n  isActive?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;\n  onRemove?: React.MouseEventHandler<HTMLElement>;\n  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n  onFocus?: React.FocusEventHandler<HTMLDivElement>;\n  onBlur?: React.FocusEventHandler<HTMLDivElement>;\n}\n\nconst getValidation = (error: TokenProps['error'], warning: TokenProps['warning']) => {\n  if (error) {\n    return 'error';\n  } else if (warning) {\n    return 'warning';\n  }\n\n  return null;\n};\n\nexport const TokenDataTids = {\n  root: 'Token__root',\n  removeIcon: 'Token__removeIcon',\n} as const;\n\n@rootNode\nexport class Token extends React.Component<TokenProps> {\n  public static __KONTUR_REACT_UI__ = 'Token';\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      children,\n      isActive,\n      colors = { idle: 'defaultIdle', active: 'defaultActive' },\n      error,\n      warning,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      onClick = emptyHandler,\n      onDoubleClick = emptyHandler,\n      onMouseEnter = emptyHandler,\n      onMouseLeave = emptyHandler,\n      onFocus = emptyHandler,\n      onBlur = emptyHandler,\n    } = this.props;\n\n    const theme = this.theme;\n\n    const validation = getValidation(error, warning);\n\n    const icon = isTheme2022(theme) ? (\n      <CloseButtonIcon side={16} color=\"inherit\" colorHover=\"inherit\" tabbable={false} />\n    ) : (\n      <CrossIcon />\n    );\n\n    let classNames = '';\n    if (isTheme2022(theme)) {\n      classNames = cx(\n        styles.tokenDefaultIdle2022(theme),\n        !isActive && !warning && !error && !disabled && styles.tokenDefaultIdleHovering2022(theme),\n        isActive && styles.tokenDefaultActive2022(theme),\n        warning && styles.tokenWarning2022(theme),\n        error && styles.tokenError2022(theme),\n        disabled && styles.tokenDisabled2022(theme),\n      );\n    } else {\n      classNames = cx(\n        colorStyles[colors.idle](theme, validation),\n        !!isActive && colorStyles[colors.active || colors.idle](theme, validation),\n        !!disabled && styles.disabled(theme),\n        !!disabled && colorStyles.defaultDisabled(theme),\n        !!disabled && warning && colorStyles.defaultDisabledWarning(theme),\n        !!disabled && error && colorStyles.defaultDisabledError(theme),\n      );\n    }\n\n    const tokenClassNames = cx(styles.token(this.theme), classNames);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={TokenDataTids.root}\n          className={tokenClassNames}\n          aria-describedby={ariaDescribedby}\n          onClick={onClick}\n          onDoubleClick={onDoubleClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          <span className={styles.text(this.theme)}>{children}</span>\n          <span\n            className={cx(styles.removeIcon(this.theme), globalClasses.removeIcon)}\n            onClick={this.onRemoveClick}\n            data-tid={TokenDataTids.removeIcon}\n          >\n            {icon}\n          </span>\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private onRemoveClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n    const { disabled, onRemove = emptyHandler } = this.props;\n\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onRemove(event);\n  };\n}\n"]}

package/cjs/components/Token/Token.md

@@ -1,112 +1,112 @@
-Token example
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-
-<Token>Example</Token>;
-```
-
-You can control color of each token
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-const colors = {
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-  gray: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  blue: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  green: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  yellow: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  red: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  mono: {
-    idle: 'white',
-    active: 'black',
-  },
-};
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token colors={colors.default}>Default</Token>
-    <Token isActive colors={colors.default}>
-      Default
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.gray}>Gray</Token>
-    <Token isActive colors={colors.gray}>
-      Gray
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.blue}>Blue</Token>
-    <Token isActive colors={colors.blue}>
-      Blue
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.green}>Green</Token>
-    <Token isActive colors={colors.green}>
-      Green
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.yellow}>Yellow</Token>
-    <Token isActive colors={colors.yellow}>
-      Yellow
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.red}>Red</Token>
-    <Token isActive colors={colors.red}>
-      Red
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.mono}>Monochrome</Token>
-    <Token isActive colors={colors.mono}>
-      Monochrome
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-Can accept validation state
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>;
-```
+Token example
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+
+<Token>Example</Token>;
+```
+
+You can control color of each token
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+Can accept validation state
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>;
+```

package/cjs/components/Token/Token.styles.d.ts

@@ -1,11 +1,20 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const globalClasses: {
+    removeIcon: string;
+};
+export declare const styles: {
     token(t: Theme): string;
+    tokenDefaultIdle2022(t: Theme): string;
+    tokenDefaultIdleHovering2022(t: Theme): string;
+    tokenDefaultActive2022(t: Theme): string;
+    tokenError2022(t: Theme): string;
+    tokenWarning2022(t: Theme): string;
+    tokenDisabled2022(t: Theme): string;
     disabled(t: Theme): string;
     text(t: Theme): string;
     removeIcon(t: Theme): string;
 };
-export declare const jsTokenColors: {
+export declare const colorStyles: {
     defaultIdle: (t: Theme, v: 'error' | 'warning' | null) => string;
     defaultActive: (t: Theme, v: 'error' | 'warning' | null) => string;
     defaultDisabled: (t: Theme) => string;

package/cjs/components/Token/Token.styles.js

@@ -1,8 +1,12 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.jsTokenColors = exports.jsStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.colorStyles = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
-var styles = {
+var globalClasses = (0, _Emotion.prefix)('token')({
+  removeIcon: 'remove-icon' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
   token: function token(t) {
     return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: center;\n      border-radius: ", ";\n      padding: ", " ", ";\n      line-height: ", ";\n      font-size: ", ";\n      margin: ", " ", ";\n      min-width: 0;\n      word-break: break-all;\n      user-select: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n    "])),
 
@@ -20,33 +24,95 @@ var styles = {
 
 
 
+  },
+
+  tokenDefaultIdle2022: function tokenDefaultIdle2022(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n      background-clip: border-box;\n    "])),
+    t.tokenDefaultIdleColor,
+    t.tokenDefaultIdleBg,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColor);
+
+
+  },
+
+  tokenDefaultIdleHovering2022: function tokenDefaultIdleHovering2022(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        color: ", ";\n        background: ", ";\n        border: solid ", " ", ";\n      }\n    "])),
+
+    t.tokenDefaultIdleColorHover,
+    t.tokenDefaultIdleBgHover,
+    t.tokenBorderWidth, t.tokenDefaultIdleBorderColorHover);
+
+
+  },
+
+  tokenDefaultActive2022: function tokenDefaultActive2022(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border: solid ", " ", ";\n    "])),
+    t.tokenDefaultActiveColor,
+    t.tokenDefaultActiveBg,
+    t.tokenBorderWidth, t.tokenDefaultActiveBorderColor);
+
+  },
+
+  tokenError2022: function tokenError2022(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorError,
+    t.tokenOutlineWidth, t.tokenBorderColorError);
+
+  },
+
+  tokenWarning2022: function tokenWarning2022(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: solid ", " ", ";\n      box-shadow: 0 0 0 ", " ", ";\n    "])),
+    t.tokenBorderWidth, t.tokenBorderColorWarning,
+    t.tokenOutlineWidth, t.tokenBorderColorWarning);
+
+  },
+
+  tokenDisabled2022: function tokenDisabled2022(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n      border: solid 1px ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
+    t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
+    t.tokenMarginYDisabled, t.tokenMarginXDisabled,
+
+
+    t.tokenTextColorDisabled,
+
+    t.tokenBorderColorDisabled,
+
+    globalClasses.removeIcon);
+
+
+
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n      pointer-events: none;\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
     t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
     t.tokenMarginYDisabled, t.tokenMarginXDisabled,
 
 
-    t.tokenTextColorDisabled);
+    t.tokenTextColorDisabled,
+
+
+    globalClasses.removeIcon);
+
+
 
   },
 
   text: function text(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      padding-bottom: ", ";\n    "])),
 
     t.tokenLegacyTextShift);
 
   },
 
   removeIcon: function removeIcon(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n      ", " & {\n        fill: ", ";\n        opacity: 1;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n      width: ", ";\n      flex-shrink: 0;\n      padding: ", " ", ";\n      box-sizing: ", ";\n      margin-left: ", ";\n      transition: none;\n      fill: currentColor;\n      opacity: 0.5;\n      line-height: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    "])),
     t.tokenRemoveIconSize,
     t.tokenRemoveIconSize,
 
     t.tokenRemoveIconPaddingY, t.tokenRemoveIconPaddingX,
     t.tokenRemoveIconBoxSizing,
-    t.tokenRemoveIconGap,
+    t.tokenRemoveIconGap);
 
 
 
@@ -55,12 +121,10 @@ var styles = {
 
 
 
-    (0, _Emotion.cssName)(jsTokenColors.defaultDisabled(t)),
-    t.tokenTextColorDisabled);
 
+  } });exports.styles = styles;
 
 
-  } };
 
 
 
@@ -81,11 +145,7 @@ var styles = {
 
 
 
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
-
-var jsTokenColors = [
+var colorStyles = [
 { name: 'defaultIdle', color: function color(t) {return t.tokenDefaultIdle;} },
 { name: 'defaultActive', color: function color(t) {return t.tokenDefaultActive;} },
 { name: 'grayIdle', color: function color(t) {return t.tokenGrayIdle;} },
@@ -104,22 +164,28 @@ reduce(
 function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;return (0, _extends3.default)({},
   colors, (_extends2 = {}, _extends2[
   name] = function (t, v) {
-    var warning = (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
+    var getVStyle = function getVStyle() {
+      if (v === 'error') {
+        return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+
+      } else if (v === 'warning') {
+        return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n            box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n          "])),
+        t.tokenOutlineWidth, t.tokenBorderColorWarning, color(t));
 
-    var error = (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
-    t.tokenOutlineWidth, t.tokenBorderColorError, color(t));
+      }
 
-    var vStyle = v === 'error' ? error : v === 'warning' ? warning : '';
+      return '';
+    };
 
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        & ", ":hover {\n          color: ", ";\n        }\n      "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        color: ", ";\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n\n        ", "\n\n        .", ":hover {\n          color: ", ";\n        }\n      "])),
     color(t),
     ColorFunctions.contrast(color(t)),
     t.tokenBorderWidth, ColorFunctions.darken(color(t), '5%'), color(t),
 
-    vStyle,
+    getVStyle(),
 
-    (0, _Emotion.cssName)(jsStyles.removeIcon(t)),
+    globalClasses.removeIcon,
     ColorFunctions.contrast(color(t)));
 
 
@@ -127,18 +193,18 @@ function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;r
 
 {
   defaultDisabled: function defaultDisabled(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", "};\n      "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
     t.tokenDisabledBg,
     t.tokenShadowDisabled);
 
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorWarning, t.tokenDisabledBg);
 
   },
   defaultDisabledError: function defaultDisabledError(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n        box-shadow: 0 0 0 ", " ", ", inset 0 0 0 1px ", ";\n      "])),
     t.tokenOutlineWidth, t.tokenBorderColorError, t.tokenDisabledBg);
 
-  } });exports.jsTokenColors = jsTokenColors;
+  } });exports.colorStyles = colorStyles;