@skbkontur/react-ui 0.0.0-cb54865bf2 → 0.0.0-ce2a893b1a

package/internal/ThemePlayground/VariableValue/VariableValue.js

@@ -3,17 +3,16 @@ import React from 'react';
 import EditIcon from '@skbkontur/react-icons/Edit';
 import DeleteIcon from '@skbkontur/react-icons/Delete';
 import EventEmitter from 'eventemitter3';
-import cn from 'classnames';
+import { isColor } from "../../../lib/styles/ColorHelpers";
 import { Input } from "../../../components/Input";
 import { Gapped } from "../../../components/Gapped";
 import { Link } from "../../../components/Link";
 import { Hint } from "../../../components/Hint";
 import { isFunction } from "../../../lib/utils";
-import { jsStyles } from "../Playground.styles";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Playground.styles";
 var emitter = new EventEmitter();
-export var VariableValue =
-/*#__PURE__*/
-function (_React$Component) {
+export var VariableValue = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(VariableValue, _React$Component);
 
   function VariableValue() {
@@ -35,32 +34,32 @@ function (_React$Component) {
 
     _this.renderBaseVariableLink = function () {
       var baseVariables = _this.props.baseVariables;
-      return React.createElement("div", {
-        className: jsStyles.baseVariableRoot()
-      }, _this.colorIcon(), React.createElement("div", {
-        className: jsStyles.baseLinkWrapper()
-      }, React.createElement(Gapped, null, React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.baseVariableRoot()
+      }, _this.colorIcon(), /*#__PURE__*/React.createElement("div", {
+        className: styles.baseLinkWrapper()
+      }, /*#__PURE__*/React.createElement(Gapped, null, /*#__PURE__*/React.createElement("div", {
         style: {
           textAlign: 'right'
         }
-      }, React.createElement(Gapped, {
+      }, /*#__PURE__*/React.createElement(Gapped, {
         vertical: true
       }, baseVariables.map(function (v) {
-        return React.createElement(BaseVariableLink, {
+        return /*#__PURE__*/React.createElement(BaseVariableLink, {
           key: v,
           baseVariable: v,
           emitClickEvent: _this.emitClickEvent
         });
-      }))), React.createElement(Hint, {
+      }))), /*#__PURE__*/React.createElement(Hint, {
         text: 'Изменить значение'
-      }, React.createElement(Link, {
-        icon: React.createElement(EditIcon, null),
+      }, /*#__PURE__*/React.createElement(Link, {
+        icon: /*#__PURE__*/React.createElement(EditIcon, null),
         onClick: _this.handleEditLinkClick
       })))));
     };
 
     _this.renderInputWrapper = function () {
-      return _this.state.editing ? React.createElement(Gapped, null, _this.renderInput(), _this.renderRollbackIcon()) : _this.renderInput();
+      return _this.state.editing ? /*#__PURE__*/React.createElement(Gapped, null, _this.renderInput(), _this.renderRollbackIcon()) : _this.renderInput();
     };
 
     _this.rootRef = function (instance) {
@@ -68,8 +67,8 @@ function (_React$Component) {
     };
 
     _this.colorIcon = function () {
-      return React.createElement("div", {
-        className: jsStyles.colorIcon(),
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.colorIcon(),
         style: {
           background: _this.state.value
         }
@@ -130,19 +129,19 @@ function (_React$Component) {
   var _proto = VariableValue.prototype;
 
   _proto.render = function render() {
-    var _cn;
+    var _cx;
 
     var _this$props2 = this.props,
         variable = _this$props2.variable,
         theme = _this$props2.theme,
         baseVariables = _this$props2.baseVariables,
         deprecated = _this$props2.deprecated;
-    return React.createElement("div", {
-      className: jsStyles.variable(theme),
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.variable(theme),
       ref: this.rootRef,
       tabIndex: 0
-    }, React.createElement("div", {
-      className: cn(jsStyles.variableName(theme), (_cn = {}, _cn[jsStyles.deprecated()] = deprecated, _cn)),
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.variableName(theme), (_cx = {}, _cx[styles.deprecated()] = deprecated, _cx)),
       title: variable
     }, variable + ": "), baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper());
   };
@@ -179,8 +178,8 @@ function (_React$Component) {
   };
 
   _proto.renderInput = function renderInput() {
-    return React.createElement(Input, {
-      leftIcon: isColor(this.state.value) && this.colorIcon(),
+    return /*#__PURE__*/React.createElement(Input, {
+      leftIcon: isColorExtended(this.state.value) && this.colorIcon(),
       value: this.state.value,
       onValueChange: this.handleChange,
       onBlur: this.handleBlur,
@@ -191,12 +190,12 @@ function (_React$Component) {
   };
 
   _proto.renderRollbackIcon = function renderRollbackIcon() {
-    return React.createElement(Hint, {
+    return /*#__PURE__*/React.createElement(Hint, {
       text: 'Вернуться к базовой переменной'
-    }, React.createElement("div", {
-      className: jsStyles.linkRoot()
-    }, React.createElement(Link, {
-      icon: React.createElement(DeleteIcon, null),
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.linkRoot()
+    }, /*#__PURE__*/React.createElement(Link, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
       onClick: this.rollbackToBaseVariable
     })));
   };
@@ -207,16 +206,14 @@ VariableValue.defaultProps = {
   deprecated: false
 };
 
-var BaseVariableLink =
-/*#__PURE__*/
-function (_React$Component2) {
+var BaseVariableLink = /*#__PURE__*/function (_React$Component2) {
   _inheritsLoose(BaseVariableLink, _React$Component2);
 
   function BaseVariableLink() {
     var _this3;
 
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
 
     _this3 = _React$Component2.call.apply(_React$Component2, [this].concat(args)) || this;
@@ -231,7 +228,7 @@ function (_React$Component2) {
   var _proto2 = BaseVariableLink.prototype;
 
   _proto2.render = function render() {
-    return React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(Link, {
       onClick: this.emitClickEvent
     }, this.props.baseVariable);
   };
@@ -239,12 +236,22 @@ function (_React$Component2) {
   return BaseVariableLink;
 }(React.Component);
 
-function isColor(color) {
+var getColorValue = function getColorValue(color) {
   if (isFunction(color)) {
-    color = color();
+    return color();
   }
 
+  return color;
+};
+
+function isColorExtended(color) {
+  var colorValue = getColorValue(color);
   var style = new Option().style;
-  style.color = color;
-  return !!color && (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl') || style.color === color);
+  style.color = colorValue;
+
+  if (colorValue) {
+    return isColor(colorValue) || style.color === colorValue;
+  }
+
+  return false;
 }

package/internal/ThemePlayground/VariableValue/VariableValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["VariableValue.tsx"],"names":["React","EditIcon","DeleteIcon","EventEmitter","cn","Input","Gapped","Link","Hint","isFunction","jsStyles","emitter","VariableValue","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColor","isError","linkRoot","Component","defaultProps","BaseVariableLink","baseVariable","color","style","Option","startsWith"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,6BAArB;AACA,OAAOC,UAAP,MAAuB,+BAAvB;AACA,OAAOC,YAAP,MAAyB,eAAzB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,KAAT,QAAsB,wBAAtB;AACA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,IAAT,QAAqB,uBAArB;AACA,SAASC,UAAT,QAA2B,iBAA3B;;AAEA,SAASC,QAAT,QAAyB,qBAAzB;;AAEA,IAAMC,OAAO,GAAG,IAAIR,YAAJ,EAAhB;;;;;;;;;;;;;;;;;AAiBA,WAAaS,aAAb;;;;AAISC,IAAAA,KAJT,GAIiB;AACbC,MAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KADL;AAEbE,MAAAA,OAAO,EAAE,KAFI,EAJjB;;AAQUC,IAAAA,YARV,GAQwD,IARxD;AASUC,IAAAA,WATV,GAS4C,IAT5C;AAUmBC,IAAAA,eAVnB,GAUqC,GAVrC;AAWUC,IAAAA,gBAXV,GAWiDC,SAXjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDUC,IAAAA,sBApDV,GAoDmC,YAAM;AACrC,UAAMC,aAAa,GAAG,MAAKR,KAAL,CAAWQ,aAAjC;AACA;AACE,qCAAK,SAAS,EAAEb,QAAQ,CAACc,gBAAT,EAAhB;AACG,cAAKC,SAAL,EADH;AAEE,qCAAK,SAAS,EAAEf,QAAQ,CAACgB,eAAT,EAAhB;AACE,4BAAC,MAAD;AACE,qCAAK,KAAK,EAAE,EAAEC,SAAS,EAAE,OAAb,EAAZ;AACE,4BAAC,MAAD,IAAQ,QAAQ,MAAhB;AACGJ,QAAAA,aAAa,CAACK,GAAd,CAAkB,UAAAC,CAAC;AAClB,gCAAC,gBAAD,IAAkB,GAAG,EAAEA,CAAvB,EAA0B,YAAY,EAAEA,CAAxC,EAA2C,cAAc,EAAE,MAAKC,cAAhE,GADkB,GAAnB,CADH,CADF,CADF;;;;AAQE,4BAAC,IAAD,IAAM,IAAI,EAAE,mBAAZ;AACE,4BAAC,IAAD,IAAM,IAAI,EAAE,oBAAC,QAAD,OAAZ,EAA0B,OAAO,EAAE,MAAKC,mBAAxC,GADF,CARF,CADF,CAFF,CADF;;;;;;AAmBD,KAzEH;;AA2EUC,IAAAA,kBA3EV,GA2E+B,YAAM;AACjC,aAAO,MAAKnB,KAAL,CAAWG,OAAX;AACL,0BAAC,MAAD;AACG,YAAKiB,WAAL,EADH;AAEG,YAAKC,kBAAL,EAFH,CADK;;;AAML,YAAKD,WAAL,EANF;;AAQD,KApFH;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GUE,IAAAA,OA9GV,GA8GoB,UAACC,QAAD,EAAkC;AAClD,YAAKlB,WAAL,GAAmBkB,QAAnB;AACD,KAhHH;;AAkHUX,IAAAA,SAlHV,GAkHsB,YAAM;AACxB,aAAO,6BAAK,SAAS,EAAEf,QAAQ,CAACe,SAAT,EAAhB,EAAsC,KAAK,EAAE,EAAEY,UAAU,EAAE,MAAKxB,KAAL,CAAWC,KAAzB,EAA7C,GAAP;AACD,KApHH;;AAsHUiB,IAAAA,mBAtHV,GAsHgC,YAAM;AAClC,YAAKO,QAAL,CAAc;AACZtB,QAAAA,OAAO,EAAE,IADG,EAAd;;AAGD,KA1HH;;AA4HUuB,IAAAA,sBA5HV,GA4HmC,YAAM;AACrC,YAAKD,QAAL,CAAc;AACZtB,QAAAA,OAAO,EAAE,KADG;AAEZF,QAAAA,KAAK,EAAE,MAAKC,KAAL,CAAWD,KAFN,EAAd;;AAID,KAjIH;;AAmIUgB,IAAAA,cAnIV,GAmI2B,UAACU,QAAD,EAA+B;AACtD7B,MAAAA,OAAO,CAAC8B,IAAR,CAAa,SAAb,EAAwBD,QAAxB;AACD,KArIH;;AAuIUE,IAAAA,YAvIV,GAuIyB,UAAC5B,KAAD,EAAmB;AACxC,YAAKwB,QAAL,CAAc;AACZxB,QAAAA,KAAK,EAALA,KADY,EAAd;;;AAIA,UAAI,MAAKM,gBAAL,KAA0BC,SAA9B,EAAyC;AACvC,cAAKD,gBAAL,GAAwBuB,MAAM,CAACC,WAAP,CAAmB,MAAKC,eAAxB,EAAyC,MAAK1B,eAA9C,CAAxB;AACD;AACF,KA/IH;;AAiJU0B,IAAAA,eAjJV,GAiJ4B,YAAM;AACC,YAAK9B,KADN,CACtByB,QADsB,eACtBA,QADsB,CACZM,QADY,eACZA,QADY;;AAG9BA,MAAAA,QAAQ,CAACN,QAAD,EAA0B,MAAK3B,KAAL,CAAWC,KAArC,CAAR;AACAiC,MAAAA,aAAa,CAAC,MAAK3B,gBAAN,CAAb;AACA,YAAKA,gBAAL,GAAwBC,SAAxB;AACD,KAvJH;;AAyJU2B,IAAAA,UAzJV,GAyJuB,YAAM;AACzB,YAAKV,QAAL,CAAc;AACZtB,QAAAA,OAAO,EAAE,KADG,EAAd;;AAGD,KA7JH;;AA+JUiC,IAAAA,mBA/JV,GA+JgC,UAACC,IAAD,EAAuB;AACnD,UAAIA,IAAI,KAAK,MAAKnC,KAAL,CAAWyB,QAApB,IAAgC,MAAKtB,WAAzC,EAAsD;AACpD,cAAKA,WAAL,CAAiBiC,KAAjB;AACD;AACF,KAnKH,2DAaSC,MAbT,GAaE,kBAAgB,4BACyC,KAAKrC,KAD9C,CACNyB,QADM,gBACNA,QADM,CACIa,KADJ,gBACIA,KADJ,CACW9B,aADX,gBACWA,aADX,CAC0B+B,UAD1B,gBAC0BA,UAD1B,CAEd,OACE,6BAAK,SAAS,EAAE5C,QAAQ,CAAC8B,QAAT,CAAkBa,KAAlB,CAAhB,EAA0C,GAAG,EAAE,KAAKlB,OAApD,EAA6D,QAAQ,EAAE,CAAvE,IACE,6BACE,SAAS,EAAE/B,EAAE,CAACM,QAAQ,CAAC6C,YAAT,CAAsBF,KAAtB,CAAD,iBAAkC3C,QAAQ,CAAC4C,UAAT,EAAlC,IAA0DA,UAA1D,OADf,EAEE,KAAK,EAAEd,QAFT,IAGKA,QAHL,QADF,EAKGjB,aAAa,CAACiC,MAAd,GAAuB,CAAvB,IAA4B,CAAC,KAAK3C,KAAL,CAAWG,OAAxC,GAAkD,KAAKM,sBAAL,EAAlD,GAAkF,KAAKU,kBAAL,EALrF,CADF,CASD,CAxBH,QA0BSyB,iBA1BT,GA0BE,6BAAiC,mBAC/B,IAAI,CAAC,KAAKxC,YAAV,EAAwB,CACtBN,OAAO,CAAC+C,WAAR,CAAoB,SAApB,EAA+B,KAAKT,mBAApC,EACA,KAAKhC,YAAL,GAAoB,EAClB0C,MAAM,EAAE,kBAAM,CACZhD,OAAO,CAACiD,cAAR,CAAuB,SAAvB,EAAkC,MAAI,CAACX,mBAAvC,EACD,CAHiB,EAApB,CAKD,CACF,CAnCH,QAqCSY,kBArCT,GAqCE,4BAA0BC,SAA1B,EAAyD,CACvD,IAAIA,SAAS,CAAChD,KAAV,KAAoB,KAAKC,KAAL,CAAWD,KAAnC,EAA0C,CACxC,KAAKwB,QAAL,CAAc,EAAExB,KAAK,EAAE,KAAKC,KAAL,CAAWD,KAApB,EAAd,EACD,CACF,CAzCH,QA2CSiD,oBA3CT,GA2CE,gCAAoC,CAClC,IAAI,KAAK9C,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkB0C,MAAlB,GACD,CACD,IAAI,KAAKvC,gBAAL,KAA0BC,SAA9B,EAAyC,CACvC0B,aAAa,CAAC,KAAK3B,gBAAN,CAAb,CACD,CACF,CAlDH,QAsFUa,WAtFV,GAsFE,uBAAsB,CACpB,OACE,oBAAC,KAAD,IACE,QAAQ,EAAE+B,OAAO,CAAC,KAAKnD,KAAL,CAAWC,KAAZ,CAAP,IAA6B,KAAKW,SAAL,EADzC,EAEE,KAAK,EAAE,KAAKZ,KAAL,CAAWC,KAFpB,EAGE,aAAa,EAAE,KAAK4B,YAHtB,EAIE,MAAM,EAAE,KAAKM,UAJf,EAKE,KAAK,EAAE,OALT,EAME,KAAK,EAAE,KAAKnC,KAAL,CAAWG,OAAX,GAAqB,GAArB,GAA2B,GANpC,EAOE,KAAK,EAAE,KAAKD,KAAL,CAAWkD,OAPpB,GADF,CAWD,CAlGH,QAoGU/B,kBApGV,GAoGE,8BAA6B,CAC3B,OACE,oBAAC,IAAD,IAAM,IAAI,EAAE,gCAAZ,IACE,6BAAK,SAAS,EAAExB,QAAQ,CAACwD,QAAT,EAAhB,IACE,oBAAC,IAAD,IAAM,IAAI,EAAE,oBAAC,UAAD,OAAZ,EAA4B,OAAO,EAAE,KAAK3B,sBAA1C,GADF,CADF,CADF,CAOD,CA5GH,wBAAmCvC,KAAK,CAACmE,SAAzC,EAAavD,a,CACGwD,Y,GAAe,EAC3Bd,UAAU,EAAE,KADe,E;;;;;;;AAyKzBe,gB;;;;AAIIvC,IAAAA,c,GAAiB,YAAM;AAC7B,aAAKf,KAAL,CAAWe,cAAX,CAA0B,OAAKf,KAAL,CAAWuD,YAArC;AACD,K,iEALMlB,M,GAAP,kBAAgB,CACd,OAAO,oBAAC,IAAD,IAAM,OAAO,EAAE,KAAKtB,cAApB,IAAqC,KAAKf,KAAL,CAAWuD,YAAhD,CAAP,CACD,C,2BAH4BtE,KAAK,CAACmE,S;;;AASrC,SAASH,OAAT,CAAiBO,KAAjB,EAAiD;AAC/C,MAAI9D,UAAU,CAAC8D,KAAD,CAAd,EAAuB;AACrBA,IAAAA,KAAK,GAAGA,KAAK,EAAb;AACD;AACD,MAAMC,KAAK,GAAG,IAAIC,MAAJ,GAAaD,KAA3B;AACAA,EAAAA,KAAK,CAACD,KAAN,GAAcA,KAAd;;AAEA;AACE,KAAC,CAACA,KAAF,KAAYA,KAAK,CAACG,UAAN,CAAiB,GAAjB,KAAyBH,KAAK,CAACG,UAAN,CAAiB,KAAjB,CAAzB,IAAoDH,KAAK,CAACG,UAAN,CAAiB,KAAjB,CAApD,IAA+EF,KAAK,CAACD,KAAN,KAAgBA,KAA3G,CADF;;AAGD","sourcesContent":["import React from 'react';\r\nimport EditIcon from '@skbkontur/react-icons/Edit';\r\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\r\nimport EventEmitter from 'eventemitter3';\r\nimport cn from 'classnames';\r\n\r\nimport { Input } from '../../components/Input';\r\nimport { Gapped } from '../../components/Gapped';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { Link } from '../../components/Link';\r\nimport { Hint } from '../../components/Hint';\r\nimport { isFunction } from '../../lib/utils';\r\n\r\nimport { jsStyles } from './Playground.styles';\r\n\r\nconst emitter = new EventEmitter();\r\n\r\nexport interface VariableValueProps {\r\n  onChange: (variable: keyof Theme, value: string) => void;\r\n  value: string;\r\n  isError: boolean;\r\n  variable: string;\r\n  theme: Theme;\r\n  baseVariables: Array<keyof Theme>;\r\n  deprecated: boolean;\r\n}\r\n\r\nexport interface VariableValueState {\r\n  value: string;\r\n  editing: boolean;\r\n}\r\n\r\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\r\n  public static defaultProps = {\r\n    deprecated: false,\r\n  };\r\n  public state = {\r\n    value: this.props.value,\r\n    editing: false,\r\n  };\r\n  private subscription: { remove: () => void } | null = null;\r\n  private rootElement: HTMLElement | null = null;\r\n  private readonly debounceTimeout = 500;\r\n  private debounceInterval: number | undefined = undefined;\r\n\r\n  public render() {\r\n    const { variable, theme, baseVariables, deprecated } = this.props;\r\n    return (\r\n      <div className={jsStyles.variable(theme)} ref={this.rootRef} tabIndex={0}>\r\n        <div\r\n          className={cn(jsStyles.variableName(theme), { [jsStyles.deprecated()]: deprecated })}\r\n          title={variable}\r\n        >{`${variable}: `}</div>\r\n        {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public componentDidMount(): void {\r\n    if (!this.subscription) {\r\n      emitter.addListener('clicked', this.emitterEventHandler);\r\n      this.subscription = {\r\n        remove: () => {\r\n          emitter.removeListener('clicked', this.emitterEventHandler);\r\n        },\r\n      };\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: VariableValueProps) {\r\n    if (prevProps.value !== this.props.value) {\r\n      this.setState({ value: this.props.value });\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount(): void {\r\n    if (this.subscription) {\r\n      this.subscription.remove();\r\n    }\r\n    if (this.debounceInterval !== undefined) {\r\n      clearInterval(this.debounceInterval);\r\n    }\r\n  }\r\n\r\n  private renderBaseVariableLink = () => {\r\n    const baseVariables = this.props.baseVariables;\r\n    return (\r\n      <div className={jsStyles.baseVariableRoot()}>\r\n        {this.colorIcon()}\r\n        <div className={jsStyles.baseLinkWrapper()}>\r\n          <Gapped>\r\n            <div style={{ textAlign: 'right' }}>\r\n              <Gapped vertical>\r\n                {baseVariables.map(v => (\r\n                  <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\r\n                ))}\r\n              </Gapped>\r\n            </div>\r\n            <Hint text={'Изменить значение'}>\r\n              <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\r\n            </Hint>\r\n          </Gapped>\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  private renderInputWrapper = () => {\r\n    return this.state.editing ? (\r\n      <Gapped>\r\n        {this.renderInput()}\r\n        {this.renderRollbackIcon()}\r\n      </Gapped>\r\n    ) : (\r\n      this.renderInput()\r\n    );\r\n  };\r\n\r\n  private renderInput() {\r\n    return (\r\n      <Input\r\n        leftIcon={isColor(this.state.value) && this.colorIcon()}\r\n        value={this.state.value}\r\n        onValueChange={this.handleChange}\r\n        onBlur={this.handleBlur}\r\n        align={'right'}\r\n        width={this.state.editing ? 225 : 250}\r\n        error={this.props.isError}\r\n      />\r\n    );\r\n  }\r\n\r\n  private renderRollbackIcon() {\r\n    return (\r\n      <Hint text={'Вернуться к базовой переменной'}>\r\n        <div className={jsStyles.linkRoot()}>\r\n          <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\r\n        </div>\r\n      </Hint>\r\n    );\r\n  }\r\n\r\n  private rootRef = (instance: HTMLElement | null) => {\r\n    this.rootElement = instance;\r\n  };\r\n\r\n  private colorIcon = () => {\r\n    return <div className={jsStyles.colorIcon()} style={{ background: this.state.value }} />;\r\n  };\r\n\r\n  private handleEditLinkClick = () => {\r\n    this.setState({\r\n      editing: true,\r\n    });\r\n  };\r\n\r\n  private rollbackToBaseVariable = () => {\r\n    this.setState({\r\n      editing: false,\r\n      value: this.props.value,\r\n    });\r\n  };\r\n\r\n  private emitClickEvent = (variable: string | number) => {\r\n    emitter.emit('clicked', variable);\r\n  };\r\n\r\n  private handleChange = (value: string) => {\r\n    this.setState({\r\n      value,\r\n    });\r\n\r\n    if (this.debounceInterval === undefined) {\r\n      this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\r\n    }\r\n  };\r\n\r\n  private debounceHandler = () => {\r\n    const { variable, onChange } = this.props;\r\n\r\n    onChange(variable as keyof Theme, this.state.value);\r\n    clearInterval(this.debounceInterval);\r\n    this.debounceInterval = undefined;\r\n  };\r\n\r\n  private handleBlur = () => {\r\n    this.setState({\r\n      editing: false,\r\n    });\r\n  };\r\n\r\n  private emitterEventHandler = (name: keyof Theme) => {\r\n    if (name === this.props.variable && this.rootElement) {\r\n      this.rootElement.focus();\r\n    }\r\n  };\r\n}\r\n\r\ninterface BaseVariableLinkProps {\r\n  baseVariable: string | number;\r\n  emitClickEvent: (baseVariable: string | number) => void;\r\n}\r\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\r\n  public render() {\r\n    return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\r\n  }\r\n  private emitClickEvent = () => {\r\n    this.props.emitClickEvent(this.props.baseVariable);\r\n  };\r\n}\r\n\r\nfunction isColor(color: string | (() => string)) {\r\n  if (isFunction(color)) {\r\n    color = color();\r\n  }\r\n  const style = new Option().style;\r\n  style.color = color;\r\n\r\n  return (\r\n    !!color && (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl') || style.color === color)\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["VariableValue.tsx"],"names":["React","EditIcon","DeleteIcon","EventEmitter","isColor","Input","Gapped","Link","Hint","isFunction","cx","styles","emitter","VariableValue","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","baseVariableRoot","colorIcon","baseLinkWrapper","textAlign","map","v","emitClickEvent","handleEditLinkClick","renderInputWrapper","renderInput","renderRollbackIcon","rootRef","instance","background","setState","rollbackToBaseVariable","variable","emit","handleChange","window","setInterval","debounceHandler","onChange","clearInterval","handleBlur","emitterEventHandler","name","focus","render","theme","deprecated","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","Component","defaultProps","BaseVariableLink","baseVariable","getColorValue","color","colorValue","style","Option"],"mappings":"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","sourcesContent":["import React from 'react';\nimport EditIcon from '@skbkontur/react-icons/Edit';\nimport DeleteIcon from '@skbkontur/react-icons/Delete';\nimport EventEmitter from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers';\nimport { Input } from '../../components/Input';\nimport { Gapped } from '../../components/Gapped';\nimport { Theme } from '../../lib/theming/Theme';\nimport { Link } from '../../components/Link';\nimport { Hint } from '../../components/Hint';\nimport { isFunction } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Playground.styles';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n  onChange: (variable: keyof Theme, value: string) => void;\n  value: string;\n  isError: boolean;\n  variable: string;\n  theme: Theme;\n  baseVariables: Array<keyof Theme>;\n  deprecated: boolean;\n}\n\nexport interface VariableValueState {\n  value: string;\n  editing: boolean;\n}\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n  public static defaultProps = {\n    deprecated: false,\n  };\n  public state = {\n    value: this.props.value,\n    editing: false,\n  };\n  private subscription: { remove: () => void } | null = null;\n  private rootElement: HTMLElement | null = null;\n  private readonly debounceTimeout = 500;\n  private debounceInterval: number | undefined = undefined;\n\n  public render() {\n    const { variable, theme, baseVariables, deprecated } = this.props;\n    return (\n      <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n        <div\n          className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n          title={variable}\n        >{`${variable}: `}</div>\n        {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n      </div>\n    );\n  }\n\n  public componentDidMount(): void {\n    if (!this.subscription) {\n      emitter.addListener('clicked', this.emitterEventHandler);\n      this.subscription = {\n        remove: () => {\n          emitter.removeListener('clicked', this.emitterEventHandler);\n        },\n      };\n    }\n  }\n\n  public componentDidUpdate(prevProps: VariableValueProps) {\n    if (prevProps.value !== this.props.value) {\n      this.setState({ value: this.props.value });\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (this.subscription) {\n      this.subscription.remove();\n    }\n    if (this.debounceInterval !== undefined) {\n      clearInterval(this.debounceInterval);\n    }\n  }\n\n  private renderBaseVariableLink = () => {\n    const baseVariables = this.props.baseVariables;\n    return (\n      <div className={styles.baseVariableRoot()}>\n        {this.colorIcon()}\n        <div className={styles.baseLinkWrapper()}>\n          <Gapped>\n            <div style={{ textAlign: 'right' }}>\n              <Gapped vertical>\n                {baseVariables.map((v) => (\n                  <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n                ))}\n              </Gapped>\n            </div>\n            <Hint text={'Изменить значение'}>\n              <Link icon={<EditIcon />} onClick={this.handleEditLinkClick} />\n            </Hint>\n          </Gapped>\n        </div>\n      </div>\n    );\n  };\n\n  private renderInputWrapper = () => {\n    return this.state.editing ? (\n      <Gapped>\n        {this.renderInput()}\n        {this.renderRollbackIcon()}\n      </Gapped>\n    ) : (\n      this.renderInput()\n    );\n  };\n\n  private renderInput() {\n    return (\n      <Input\n        leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n        value={this.state.value}\n        onValueChange={this.handleChange}\n        onBlur={this.handleBlur}\n        align={'right'}\n        width={this.state.editing ? 225 : 250}\n        error={this.props.isError}\n      />\n    );\n  }\n\n  private renderRollbackIcon() {\n    return (\n      <Hint text={'Вернуться к базовой переменной'}>\n        <div className={styles.linkRoot()}>\n          <Link icon={<DeleteIcon />} onClick={this.rollbackToBaseVariable} />\n        </div>\n      </Hint>\n    );\n  }\n\n  private rootRef = (instance: HTMLElement | null) => {\n    this.rootElement = instance;\n  };\n\n  private colorIcon = () => {\n    return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n  };\n\n  private handleEditLinkClick = () => {\n    this.setState({\n      editing: true,\n    });\n  };\n\n  private rollbackToBaseVariable = () => {\n    this.setState({\n      editing: false,\n      value: this.props.value,\n    });\n  };\n\n  private emitClickEvent = (variable: string | number) => {\n    emitter.emit('clicked', variable);\n  };\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n\n    if (this.debounceInterval === undefined) {\n      this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n    }\n  };\n\n  private debounceHandler = () => {\n    const { variable, onChange } = this.props;\n\n    onChange(variable as keyof Theme, this.state.value);\n    clearInterval(this.debounceInterval);\n    this.debounceInterval = undefined;\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      editing: false,\n    });\n  };\n\n  private emitterEventHandler = (name: keyof Theme) => {\n    if (name === this.props.variable && this.rootElement) {\n      this.rootElement.focus();\n    }\n  };\n}\n\ninterface BaseVariableLinkProps {\n  baseVariable: string | number;\n  emitClickEvent: (baseVariable: string | number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n  public render() {\n    return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n  }\n  private emitClickEvent = () => {\n    this.props.emitClickEvent(this.props.baseVariable);\n  };\n}\n\ntype Color = string | (() => string);\n\nconst getColorValue = (color: Color) => {\n  if (isFunction(color)) {\n    return color();\n  }\n\n  return color;\n};\n\nfunction isColorExtended(color: Color) {\n  const colorValue = getColorValue(color);\n\n  const style = new Option().style;\n  style.color = colorValue;\n\n  if (colorValue) {\n    return isColor(colorValue) || style.color === colorValue;\n  }\n\n  return false;\n}\n"]}

package/internal/ThemePlayground/constants/constants.js

@@ -2,10 +2,11 @@ export var ThemeType;
 
 (function (ThemeType) {
   ThemeType["Default"] = "default";
-  ThemeType["Flat"] = "flat";
   ThemeType["Dark"] = "dark";
-  ThemeType["Default8px"] = "default8px";
-  ThemeType["Flat8px"] = "flat8px";
+  ThemeType["DefaultOld"] = "defaultOld";
+  ThemeType["FlatOld"] = "flatOld";
+  ThemeType["Theme2022"] = "theme2022";
+  ThemeType["Theme2022Dark"] = "theme2022Dark";
 })(ThemeType || (ThemeType = {}));
 
 export var VARIABLES_GROUPS = [{
@@ -87,5 +88,8 @@ export var VARIABLES_GROUPS = [{
 }, {
   title: 'Legacy',
   prefix: 'chb slt'
+}, {
+  title: 'GlobalLoader',
+  prefix: 'globalLoader'
 }];
-export var DEPRECATED_VARIABLES = ['btnBorderRadius', 'btnSmallBorderRadius', 'sltPlaceholderColor', 'chbFontSize', 'chbLineHeight', 'chbBoxSize', 'chbPaddingX', 'chbPaddingY', 'chbBgStart', 'chbBgEnd', 'chbTextColorDefault', 'chbTextColorDisabled', 'chbIndeterminateBg', 'chbShadow', 'chbShadowDisabled', 'chbBorder', 'chbShadowHover', 'chbCheckedColor', 'chbOutlineColorFocus', 'chbBorderColorWarning', 'chbBorderColorError', 'chbCheckedHoverShadow', 'chbBorderRadius', 'chbShadowWidth', 'chbCheckedShadow', 'chbBorderColorFocus', 'chbBg', 'chbHoverBg', 'chbActiveBg', 'chbCheckedBg', 'chbBgDisabled', 'chbBoxIndeterminateBg', 'chbCheckedHoverBg', 'chbCheckedActiveBg', 'chbCheckedActiveShadow', 'chbShadowActive'];
+export var DEPRECATED_VARIABLES = [];

package/internal/ThemePlayground/constants/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["constants.ts"],"names":["ThemeType","VARIABLES_GROUPS","title","prefix","isCommon","DEPRECATED_VARIABLES"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\n\r\nexport enum ThemeType {\r\n  Default = 'default',\r\n  Flat = 'flat',\r\n  Dark = 'dark',\r\n  Default8px = 'default8px',\r\n  Flat8px = 'flat8px',\r\n}\r\n\r\nexport const VARIABLES_GROUPS = [\r\n  { title: 'Common', prefix: 'null', isCommon: true },\r\n  { title: 'Button', prefix: 'btn' },\r\n  { title: 'Border', prefix: 'border' },\r\n  { title: 'Checkbox', prefix: 'checkbox' },\r\n  { title: 'DatePicker', prefix: 'date calendar picker' },\r\n  { title: 'Dropdown', prefix: 'dropdown' },\r\n  { title: 'Input', prefix: 'input' },\r\n  { title: 'Link', prefix: 'link' },\r\n  { title: 'Loader', prefix: 'loader' },\r\n  { title: 'Menu', prefix: 'menu' },\r\n  { title: 'Modal', prefix: 'modal' },\r\n  { title: 'Paging', prefix: 'paging' },\r\n  { title: 'Popup', prefix: 'popup' },\r\n  { title: 'Radio', prefix: 'radio' },\r\n  { title: 'SidePage', prefix: 'sidePage' },\r\n  { title: 'Tabs', prefix: 'tab' },\r\n  { title: 'Textarea', prefix: 'textarea' },\r\n  { title: 'Toast', prefix: 'toast' },\r\n  { title: 'Toggle', prefix: 'toggle' },\r\n  { title: 'Tooltip', prefix: 'tooltip' },\r\n  { title: 'Token', prefix: 'token' },\r\n  { title: 'TokenInput', prefix: 'tokenInput' },\r\n  { title: 'Select', prefix: 'select' },\r\n  { title: 'Spinner', prefix: 'spinner' },\r\n  { title: 'Switcher', prefix: 'switcher' },\r\n  { title: 'Legacy', prefix: 'chb slt' },\r\n];\r\n\r\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [\r\n  'btnBorderRadius',\r\n  'btnSmallBorderRadius',\r\n  'sltPlaceholderColor',\r\n  'chbFontSize',\r\n  'chbLineHeight',\r\n  'chbBoxSize',\r\n  'chbPaddingX',\r\n  'chbPaddingY',\r\n  'chbBgStart',\r\n  'chbBgEnd',\r\n  'chbTextColorDefault',\r\n  'chbTextColorDisabled',\r\n  'chbIndeterminateBg',\r\n  'chbShadow',\r\n  'chbShadowDisabled',\r\n  'chbBorder',\r\n  'chbShadowHover',\r\n  'chbCheckedColor',\r\n  'chbOutlineColorFocus',\r\n  'chbBorderColorWarning',\r\n  'chbBorderColorError',\r\n  'chbCheckedHoverShadow',\r\n  'chbBorderRadius',\r\n  'chbShadowWidth',\r\n  'chbCheckedShadow',\r\n  'chbBorderColorFocus',\r\n  'chbBg',\r\n  'chbHoverBg',\r\n  'chbActiveBg',\r\n  'chbCheckedBg',\r\n  'chbBgDisabled',\r\n  'chbBoxIndeterminateBg',\r\n  'chbCheckedHoverBg',\r\n  'chbCheckedActiveBg',\r\n  'chbCheckedActiveShadow',\r\n  'chbShadowActive',\r\n];\r\n"]}
+{"version":3,"sources":["constants.ts"],"names":["ThemeType","VARIABLES_GROUPS","title","prefix","isCommon","DEPRECATED_VARIABLES"],"mappings":";;AAEA,WAAYA,SAAZ,C,WAAYA,S,GAAAA,S,wBAAAA,S,kBAAAA,S,8BAAAA,S,wBAAAA,S,4BAAAA,S,uCAAAA,S,KAAAA,S;;;;;;;;;AASZ,OAAO,IAAMC,gBAAgB,GAAG;AAC9B,EAAEC,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,MAA3B,EAAmCC,QAAQ,EAAE,IAA7C,EAD8B;AAE9B,EAAEF,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,KAA3B,EAF8B;AAG9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAH8B;AAI9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAJ8B;AAK9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,sBAA/B,EAL8B;AAM9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAN8B;AAO9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAP8B;AAQ9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAR8B;AAS9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAT8B;AAU9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,MAAzB,EAV8B;AAW9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAX8B;AAY9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAZ8B;AAa9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAb8B;AAc9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAd8B;AAe9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAf8B;AAgB9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,KAAzB,EAhB8B;AAiB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAjB8B;AAkB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAlB8B;AAmB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAnB8B;AAoB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EApB8B;AAqB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EArB8B;AAsB9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,YAA/B,EAtB8B;AAuB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAvB8B;AAwB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EAxB8B;AAyB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAzB8B;AA0B9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,SAA3B,EA1B8B;AA2B9B,EAAED,KAAK,EAAE,cAAT,EAAyBC,MAAM,EAAE,cAAjC,EA3B8B,CAAzB;;;AA8BP,OAAO,IAAME,oBAAwC,GAAG,EAAjD","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\n\nexport enum ThemeType {\n  Default = 'default',\n  Dark = 'dark',\n  DefaultOld = 'defaultOld',\n  FlatOld = 'flatOld',\n  Theme2022 = 'theme2022',\n  Theme2022Dark = 'theme2022Dark',\n}\n\nexport const VARIABLES_GROUPS = [\n  { title: 'Common', prefix: 'null', isCommon: true },\n  { title: 'Button', prefix: 'btn' },\n  { title: 'Border', prefix: 'border' },\n  { title: 'Checkbox', prefix: 'checkbox' },\n  { title: 'DatePicker', prefix: 'date calendar picker' },\n  { title: 'Dropdown', prefix: 'dropdown' },\n  { title: 'Input', prefix: 'input' },\n  { title: 'Link', prefix: 'link' },\n  { title: 'Loader', prefix: 'loader' },\n  { title: 'Menu', prefix: 'menu' },\n  { title: 'Modal', prefix: 'modal' },\n  { title: 'Paging', prefix: 'paging' },\n  { title: 'Popup', prefix: 'popup' },\n  { title: 'Radio', prefix: 'radio' },\n  { title: 'SidePage', prefix: 'sidePage' },\n  { title: 'Tabs', prefix: 'tab' },\n  { title: 'Textarea', prefix: 'textarea' },\n  { title: 'Toast', prefix: 'toast' },\n  { title: 'Toggle', prefix: 'toggle' },\n  { title: 'Tooltip', prefix: 'tooltip' },\n  { title: 'Token', prefix: 'token' },\n  { title: 'TokenInput', prefix: 'tokenInput' },\n  { title: 'Select', prefix: 'select' },\n  { title: 'Spinner', prefix: 'spinner' },\n  { title: 'Switcher', prefix: 'switcher' },\n  { title: 'Legacy', prefix: 'chb slt' },\n  { title: 'GlobalLoader', prefix: 'globalLoader' },\n];\n\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [];\n"]}

package/internal/ThemePlayground/constants.d.ts

@@ -1,10 +1,11 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare enum ThemeType {
     Default = "default",
-    Flat = "flat",
     Dark = "dark",
-    Default8px = "default8px",
-    Flat8px = "flat8px"
+    DefaultOld = "defaultOld",
+    FlatOld = "flatOld",
+    Theme2022 = "theme2022",
+    Theme2022Dark = "theme2022Dark"
 }
 export declare const VARIABLES_GROUPS: ({
     title: string;

package/internal/ThemePlayground/darkTheme/darkTheme.js

@@ -1,4 +1,5 @@
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { DEFAULT_THEME_8PX_OLD } from "../../../lib/theming/themes/DefaultTheme8pxOld";
 export var darkTheme = ThemeFactory.create({
   brandXLight: '#cae5f5',
   brandLight: '#3094d0',
@@ -55,14 +56,44 @@ export var darkTheme = ThemeFactory.create({
   controlHeightSmall: '34px',
   controlHeightMedium: '40px',
   controlHeightLarge: '44px',
-  chbCheckedColor: '#000',
-  chbBg: 'linear-gradient(#fdfdfd, #ededed) !important',
-  chbHoverBg: 'linear-gradient(-180deg, #f2f2f2 0, #dfdfdf 100%) !important',
-  radioBgImage: 'linear-gradient(#fdfdfd, #ededed) !important',
-  radioHoverBg: 'linear-gradient(-180deg, #f2f2f2 0, #dfdfdf 100%) !important',
-  radioDisabledShadow: '0 0 0 1px rgba(0, 0, 0, 0.15) !important',
-  chbIndeterminateBg: '#000',
-  chbShadowDisabled: 'rgba(255, 255, 255, .5)',
+  checkboxCheckedColor: '#fff',
+
+  get checkboxBg() {
+    return this.bgDefault;
+  },
+
+  checkboxShadow: '0 0 0 1px rgba(255, 255, 255, 0.15)',
+  checkboxHoverBg: 'none',
+  checkboxBgDisabled: 'rgba(255, 255, 255, 0.05)',
+  checkboxShadowDisabled: '0 0 0 1px #4D4D4D',
+
+  get checkboxOutlineColorFocus() {
+    return this.bgDefault;
+  },
+
+  get checkboxActiveBg() {
+    return this.bgDefault;
+  },
+
+  get checkboxCheckedActiveBg() {
+    return this.bgDefault;
+  },
+
+  get radioBgImage() {
+    return "linear-gradient(" + this.bgDefault + "," + this.bgDefault + ")";
+  },
+
+  radioBoxShadow: '0 0 0 1px rgba(255, 255, 255, 0.15)',
+  radioCheckedBulletColor: '#fff',
+  radioHoverBg: 'none',
+  radioHoverShadow: '0 0 0 1px rgba(255, 255, 255, 0.15)',
+  radioDisabledShadow: '0 0 0 1px #4D4D4D',
+  radioDisabledBg: 'rgba(255, 255, 255, 0.05)',
+
+  get radioActiveBg() {
+    return this.bgDefault;
+  },
+
   textColorDefault: '#fff',
   textColorInvert: '#fff',
   textColorDisabled: '#a0a0a0',
@@ -71,95 +102,83 @@ export var darkTheme = ThemeFactory.create({
   linkHoverColor: '#fff',
   linkDisabledColor: '#a0a0a0',
   linkHoverTextDecoration: 'underline',
-  dropdownMenuHoverBg: '#0488E0',
-  dropdownMenuSelectedBg: 'rgba(255, 255, 255, 0.05)',
+  menuItemHoverBg: '#0488E0',
+  menuItemSelectedBg: 'rgba(255, 255, 255, 0.05)',
   loaderBg: '#333',
   loaderOpacity: '0.9',
   btnDisabledBg: 'rgba(255, 255, 255, 0.05)',
-  btnDisabledShadowColor: 'rgba(0, 0, 0, 0.15)',
   btnCheckedBg: '#737373',
   btnCheckedTextColor: '#fff',
-  btnCheckedShadowColorArrow: 'rgba(0, 0, 0, 0.3)',
+  btnDefaultBg: '#333333',
+  btnDefaultHoverBg: '#444444',
   btnDefaultBgStart: 'none',
-  btnDefaultBgArrowStart: '#333',
   btnDefaultBgEnd: 'none',
-  btnDefaultBgArrowEnd: '#333',
-  btnDefaultShadow: '0 1px 0 0 rgba(255,255,255, 1), 0 0 0 1px rgba(255,255,255, 1)',
-  btnDefaultShadowArrow: '1.2px -1px 0 0 rgba(255, 255, 255, 1), 1px 0 0 0 rgba(255, 255, 255, 1)',
-  btnDefaultShadowArrowLeft: '1px -1px 0 0 rgba(255, 255, 255, 1), 0 0 0 0 rgba(255, 255, 255, 1)',
+  btnDefaultBorderColor: 'rgba(255,255,255, 1)',
+  btnDefaultBorderBottomColor: '',
   btnDefaultHoverBgStart: '#333',
   btnDefaultHoverBgEnd: '#333',
-  btnDefaultHoverShadow: '0 1px 0 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.2)',
-  btnDefaultHoverShadowArrow: '1px -1px 0 0 rgba(0, 0, 0, 0.15), 1px 0 0 0 rgba(0, 0, 0, 0.2)',
-  btnDefaultHoverShadowArrowLeft: '1px -1px 0 0 rgba(0, 0, 0, 0.15), 0 -1px 0 0 rgba(0, 0, 0, 0.2)',
+  btnDefaultHoverBorderColor: 'rgba(255,255,255,0.9)',
+  btnDefaultHoverBorderBottomColor: 'rgba(0,0,0,0.15)',
   btnDefaultActiveBg: '#e1e1e1',
-  btnDefaultActiveShadow: '0 -1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-  btnDefaultActiveShadowArrow: '0 -2px 0 -1px rgba(0, 0, 0, 0.1), 1px -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 4px 5px -4px rgba(0, 0, 0, 0.1)',
-  btnDefaultActiveShadowArrowLeft: '0 -1px 0 0 rgba(0, 0, 0, 0.1), 1px -0.3px 0 0 rgba(0, 0, 0, 0.2), inset -4px 0 5px -4px rgba(0, 0, 0, 0.2)',
+  btnDefaultActiveShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+  btnDefaultActiveBorderColor: 'rgba(0, 0, 0, 0.2)',
+  btnDefaultActiveBorderTopColor: 'rgba(0, 0, 0, 0.1)',
   btnSuccessBg: '#419d14',
   btnSuccessBgStart: '#4ba91d',
   btnSuccessBgEnd: '#37910b',
   btnSuccessTextColor: '#fff',
-  btnSuccessShadow: '0 0 0 1px rgba(25, 103, 6, 0.7), 0 1px 0 0 rgba(21, 80, 7, 0.5)',
-  btnSuccessShadowArrow: '1px -1px 0 0 rgba(25, 103, 6, 0.7), 1px 0 0 0 rgba(21, 80, 7, 0.5)',
-  btnSuccessShadowArrowLeft: '1px -1px 0 0 rgba(25, 103, 6, 0.7), 0 -1px 0 0 rgba(21, 80, 7, 0.5)',
+  btnSuccessBorderColor: 'rgba(25, 103, 6, 0.7)',
+  btnSuccessBorderBottomColor: 'rgba(21, 80, 7, 0.5)',
   btnSuccessHoverBgStart: '#3b8d13',
   btnSuccessHoverBgEnd: '#317e0b',
-  btnSuccessHoverShadow: '0 0 0 1px rgba(7, 73, 1, 0.7), 0 1px 0 0 rgba(16, 70, 4, 0.3)',
-  btnSuccessHoverShadowArrow: '1px -1px 0 0 rgba(7, 73, 1, 0.7), 1px 0 0 0 rgba(16, 70, 4, 0.3)',
-  btnSuccessHoverShadowArrowLeft: '1px -1px 0 0 rgba(7, 73, 1, 0.7), 0 -1px 0 0 rgba(16, 70, 4, 0.3)',
+  btnSuccessHoverBorderColor: 'rgba(7, 73, 1, 0.7)',
+  btnSuccessHoverBorderBottomColor: 'rgba(16, 70, 4, 0.3)',
   btnSuccessActiveBg: '#35840e',
-  btnSuccessActiveShadow: '0 0 0 1px rgba(4, 63, 0, 0.75), 0 -1px 0 0 rgba(9, 32, 4, 0.6), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-  btnSuccessActiveShadowArrow: '1px -1px 0 0 rgba(4, 63, 0, 0.75), 0 -2px 0 -1px rgba(9, 32, 4, 0.6), inset 0 4px 5px -4px rgba(0, 0, 0, 0.1)',
-  btnSuccessActiveShadowArrowLeft: '1px -1px 0 0 rgba(4, 63, 0, 0.75), 0 0 0 -1px rgba(9, 32, 4, 0.6), inset -4px 0 5px -4px rgba(0, 0, 0, 0.2)',
+  btnSuccessActiveShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+  btnSuccessActiveBorderColor: 'rgba(4, 63, 0, 0.75)',
+  btnSuccessActiveBorderTopColor: 'rgba(9, 32, 4, 0.6)',
   btnPrimaryBg: '#1e8dd4',
   btnPrimaryBgStart: '#2899ea',
   btnPrimaryBgEnd: '#167ac1',
   btnPrimaryTextColor: '#fff',
-  btnPrimaryShadow: '0 0 0 1px rgba(14, 81, 129, 0.7), 0 1px 0 0 rgba(7, 37, 80, 0.5)',
-  btnPrimaryShadowArrow: '1px -1px 0 0 rgba(14, 81, 129, 0.7), 1px 0 0 0 rgba(7, 37, 80, 0.5)',
-  btnPrimaryShadowArrowLeft: '1px -1px 0 0 rgba(14, 81, 129, 0.7), 0 -1px 0 0 rgba(7, 37, 80, 0.5)',
+  btnPrimaryBorderColor: 'rgba(14, 81, 129, 0.7)',
+  btnPrimaryBorderBottomColor: 'rgba(7, 37, 80, 0.5)',
   btnPrimaryHoverBgStart: '#0087d5',
   btnPrimaryHoverBgEnd: '#167ac1',
-  btnPrimaryHoverShadow: '0 0 0 1px rgba(5, 60, 99, 0.7), 0 1px 0 0 rgba(7, 37, 80, 0.3)',
-  btnPrimaryHoverShadowArrow: '1px -1px 0 0 rgba(5, 60, 99, 0.7), 1px 0 0 0 rgba(7, 37, 80, 0.3)',
-  btnPrimaryHoverShadowArrowLeft: '1px -1px 0 0 rgba(5, 60, 99, 0.7), 0 -1px 0 0 rgba(7, 37, 80, 0.3)',
+  btnPrimaryHoverBorderColor: 'rgba(5, 60, 99, 0.7)',
+  btnPrimaryHoverBorderBottomColor: 'rgba(7, 37, 80, 0.3)',
   btnPrimaryActiveBg: '#0079c3',
-  btnPrimaryActiveShadow: '0 0 0 1px rgba(10, 63, 99, 0.75), 0 -1px 0 0 rgba(8, 45, 96, 0.5), inset 0 1px 2px 0 rgba(0, 0, 0, 0.2)',
-  btnPrimaryActiveShadowArrow: '1px -1px 0 0 rgba(10, 63, 99, 0.75), 0 -2px 0 -1px rgba(8, 45, 96, 0.5), inset 0 4px 5px -4px rgba(0, 0, 0, 0.2)',
-  btnPrimaryActiveShadowArrowLeft: '1px -1px 0 0 rgba(10, 63, 99, 0.75), 0 0 0 -1px rgba(8, 45, 96, 0.5), inset -4px 0 5px -4px rgba(0, 0, 0, 0.2)',
+  btnPrimaryActiveShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.2)',
+  btnPrimaryActiveBorderColor: 'rgba(10, 63, 99, 0.75)',
+  btnPrimaryActiveBorderTopColor: 'rgba(8, 45, 96, 0.5)',
   btnDangerBg: '#e14c30',
   btnDangerBgStart: '#ec5438',
   btnDangerBgEnd: '#d44327',
   btnDangerTextColor: '#fff',
-  btnDangerShadow: '0 0 0 1px rgba(173, 15, 0, 0.7), 0 1px 0 0 rgba(0, 0, 0, 0.4)',
-  btnDangerShadowArrow: '1px -1px 0 0 rgba(173, 15, 0, 0.7), 1px 0 0 0 rgba(0, 0, 0, 0.4)',
-  btnDangerShadowArrowLeft: '1px -1px 0 0 rgba(173, 15, 0, 0.7), 0 -1px 0 0 rgba(0, 0, 0, 0.4)',
+  btnDangerBorderColor: 'rgba(173, 15, 0, 0.7)',
+  btnDangerBorderBottomColor: 'rgba(0, 0, 0, 0.4)',
   btnDangerHoverBgStart: '#d44227',
   btnDangerHoverBgEnd: '#c73013',
-  btnDangerHoverShadow: '0 0 0 1px rgba(145, 0, 0, 0.7), 0 1px 0 0 rgba(90, 3, 3, 0.4)',
-  btnDangerHoverShadowArrow: '1px -1px 0 0 rgba(145, 0, 0, 0.7), 1px 0 0 0 rgba(90, 3, 3, 0.4)',
-  btnDangerHoverShadowArrowLeft: '1px -1px 0 0 rgba(145, 0, 0, 0.7), 0 -1px 0 0 rgba(90, 3, 3, 0.4)',
+  btnDangerHoverBorderColor: 'rgba(145, 0, 0, 0.7)',
+  btnDangerHoverBorderBottomColor: 'rgba(90, 3, 3, 0.4)',
   btnDangerActiveBg: '#cd381b',
-  btnDangerActiveShadow: '0 0 0 1px rgba(108, 7, 7, 0.75), 0 -1px 0 0 rgba(90, 3, 3, 0.4), inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-  btnDangerActiveShadowArrow: '1px -1px 0 0 rgba(108, 7, 7, 0.75), 0 -2px 0 -1px rgba(90, 3, 3, 0.4), inset 0 4px 5px -4px rgba(0, 0, 0, 0.1)',
-  btnDangerActiveShadowArrowLeft: '1px -1px 0 0 rgba(108, 7, 7, 0.75), 0 0 0 -1px rgba(90, 3, 3, 0.4), inset -4px 0 5px -4px rgba(0, 0, 0, 0.1)',
+  btnDangerActiveShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
+  btnDangerActiveBorderColor: 'rgba(108, 7, 7, 0.75)',
+  btnDangerActiveBorderTopColor: 'rgba(90, 3, 3, 0.4)',
   btnPayBg: '#ffc943',
   btnPayBgStart: '#ffd54b',
   btnPayBgEnd: '#ffbb39',
-  btnPayShadow: '0 0 0 1px rgba(238, 169, 34, 0.7), 0 1px 0 0 rgba(77, 16, 0, 0.56)',
-  btnPayShadowArrow: '1px -1px 0 0 rgba(238, 169, 34, 0.7), 1px -0.3px 0 0 rgba(77, 16, 0, 0.56)',
-  btnPayShadowArrowLeft: '1px -1px 0 0 rgba(238, 169, 34, 0.7), 0.2px -1px 0 -0.3px rgba(77, 16, 0, 0.56)',
+  btnPayBorderColor: 'rgba(238, 169, 34, 0.7)',
+  btnPayBorderBottomColor: 'rgba(77, 16, 0, 0.56)',
   btnPayHoverBgStart: '#ffbd3a',
   btnPayHoverBgEnd: '#f8a91d',
-  btnPayHoverShadow: '0 0 0 1px rgba(227, 142, 8, 0.7), 0 1px 0 0 rgba(93, 20, 3, 0.4)',
-  btnPayHoverShadowArrow: '1px -1px 0 0 rgba(227, 142, 8, 0.7), 1px -0.3px 0 0 rgba(93, 20, 3, 0.4)',
-  btnPayHoverShadowArrowLeft: '1px -1px 0 0 rgba(227, 142, 8, 0.7), 0 -1px 0 0 rgba(93, 20, 3, 0.4)',
+  btnPayHoverBorderColor: 'rgba(227, 142, 8, 0.7)',
+  btnPayHoverBorderBottomColor: 'rgba(93, 20, 3, 0.4)',
   btnPayActiveBg: '#fbb028',
-  btnPayActiveShadow: '0 0 0 1px rgba(210, 144, 0, 0.7), 0 -1px 0 0 rgba(0, 0, 0, 0.44), inset 0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-  btnPayActiveShadowArrow: '1px -1px 0 0 rgba(210, 144, 0, 0.7), 0 -2px 0 -1px rgba(0, 0, 0, 0.44), inset 0 4px 5px -4px rgba(0, 0, 0, 0.05)',
-  btnPayActiveShadowArrowLeft: '1px -1px 0 0 rgba(210, 144, 0, 0.7), 2px -0.3px 0 -1px rgba(0, 0, 0, 0.44), inset -4px 0 5px -4px rgba(0, 0, 0, 0.05)',
-  sltPlaceholderColor: '#a0a0a0',
+  btnPayActiveShadow: 'inset 0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  btnPayActiveBorderColor: 'rgba(210, 144, 0, 0.7)',
+  btnPayActiveBorderTopColor: 'rgba(0, 0, 0, 0.44)',
+  selectPlaceholderColor: '#a0a0a0',
   tabColorFocus: '#5199db',
   tabColorError: '#e14c30',
   tabColorWarning: '#ffc943',
@@ -224,20 +243,27 @@ export var darkTheme = ThemeFactory.create({
   toastLinkColor: '#80caff',
   toastCloseColor: '#a0a0a0',
   toastCloseHoverColor: 'white',
-  tbBg: '#262626',
-  tbShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 8px 0 rgba(0, 0, 0, 0.1)',
   tdDividerBg: '#808080',
-  logoColor: 'white',
-  logoHoverColor: '#000',
   menuItemPaddingForIcon: '36px',
   menuBorder: 'rgba(0, 0, 0, 0)',
   menuShadow: '0 0 0 1px #404040, 0 5px 20px 0 rgba(0, 0, 0, 0.4)',
+
+  get toggleBaseBg() {
+    return this.bgDefault;
+  },
+
   toggleBgChecked: '#3072c4',
-  toggleBgWarning: '#f69c00',
-  toggleBgError: '#d70c17',
+  toggleShadowColorWarning: '#f69c00',
+  toggleShadowColorError: '#d70c17',
   toggleBgActive: '#e5e5e5',
   toggleFocusShadowColor: '#5199db',
-  toggleBorderColor: '#d0d0d0',
+  toggleBorderColor: 'rgba(255, 255, 255, 0.15)',
+
+  get toggleBgDisabled() {
+    return this.bgDefault;
+  },
+
+  toggleDisabledHandleBg: '#4D4D4D',
   btnMenuArrowColor: '#666',
   popupBorderRadius: '2px',
   popupBorder: '1px solid',
@@ -248,7 +274,30 @@ export var darkTheme = ThemeFactory.create({
   inputColor: '#fff',
   inputTextColor: '#fff',
   inputBg: '#333',
+  inputPlaceholderColorDisabled: '#aaa',
+  btnDisabledTextColor: '#aaa',
   specificityLevel: '0',
   textareaBg: 'none',
-  textareaColor: 'inherit'
-});
+  textareaColor: 'inherit',
+  fileUploaderBg: 'rgba(255, 255, 255, 0.04)',
+  fileUploaderTextColorDefault: '#fff',
+  fileUploaderBorderColor: 'rgba(255, 255, 255, 0.32)',
+  fileUploaderBorderColorFocus: '#1f87ef',
+  fileUploaderLinkColor: '#51adff',
+  fileUploaderIconColor: 'rgba(255, 255, 255, 0.48)',
+  fileUploaderIconHoverColor: 'rgba(255, 255, 255, 0.80)',
+  fileUploaderBorderColorError: '#ee5042',
+  fileUploaderBorderColorWarning: '#ffa236',
+  fileUploaderDisabledBg: 'rgba(255, 255, 255, 0.16)',
+  fileUploaderDisabledBorderColor: 'rgba(255, 255, 255, 0.32)',
+  fileUploaderDisabledTextColor: 'rgba(255, 255, 255, 0.32)',
+  fileUploaderDisabledLinkColor: 'rgba(255, 255, 255, 0.32)',
+  fileUploaderDisabledIconColor: 'rgba(255, 255, 255, 0.32)',
+  // react-ui-addons vars
+  // live here because
+  // dark theme is unofficial
+  tbBg: '#262626',
+  tbShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 8px 0 rgba(0, 0, 0, 0.1)',
+  logoColor: 'white',
+  logoHoverColor: '#000'
+}, DEFAULT_THEME_8PX_OLD);