@skbkontur/react-ui 0.0.0-9a66eda8b5 → 0.0.0-a18e664e8f

package/cjs/internal/ResizeDetector/ResizeDetector.js

@@ -1,11 +1,14 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ResizeDetector = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _Emotion = require("../../lib/theming/Emotion");
+
 var _ResizeDetector = require("./ResizeDetector.styles");var
 
 
 
 
 
+
 ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ResizeDetector, _React$Component);function ResizeDetector() {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.
 
 
@@ -26,6 +29,8 @@ ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
+
+
     handleResize = function (event) {
       if (_this.props.onResize) {
         _this.props.onResize(event);
@@ -36,4 +41,4 @@ ResizeDetector = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
       if (iframe && iframe.contentWindow) {
         _this.iframeWindow = iframe.contentWindow;
       }
-    };return _this;}var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {return _react.default.createElement("div", { className: _ResizeDetector.jsStyles.root() }, _react.default.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: _ResizeDetector.jsStyles.iframe() }), _react.default.createElement("div", { className: _ResizeDetector.jsStyles.content() }, this.props.children));};return ResizeDetector;}(_react.default.Component);exports.ResizeDetector = ResizeDetector;ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector';
+    };return _this;}var _proto = ResizeDetector.prototype;_proto.componentDidMount = function componentDidMount() {if (this.iframeWindow) {this.iframeWindow.addEventListener('resize', this.handleResize);}};_proto.render = function render() {var _cx;return /*#__PURE__*/_react.default.createElement("div", { className: _ResizeDetector.styles.root() }, /*#__PURE__*/_react.default.createElement("iframe", { title: "resizeDetector", ref: this.iframeRef, className: _ResizeDetector.styles.iframe(), tabIndex: -1 }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_ResizeDetector.styles.content()] = true, _cx[_ResizeDetector.styles.fullHeight()] = this.props.fullHeight, _cx)) }, this.props.children));};return ResizeDetector;}(_react.default.Component);exports.ResizeDetector = ResizeDetector;ResizeDetector.__KONTUR_REACT_UI__ = 'ResizeDetector';

package/cjs/internal/ResizeDetector/ResizeDetector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResizeDetector.tsx"],"names":["ResizeDetector","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","componentDidMount","addEventListener","render","jsStyles","root","content","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"0PAAA;;AAEA,yD;;;;;;AAMaA,c;;;AAGHC,IAAAA,Y,GAA8B,I;;;;;;;;;;;;;;;;;AAiB9BC,IAAAA,Y,GAAe,UAACC,KAAD,EAAoB;AACzC,UAAI,MAAKC,KAAL,CAAWC,QAAf,EAAyB;AACvB,cAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB;AACD;AACF,K;;AAEOG,IAAAA,S,GAAY,UAACC,MAAD,EAA+B;AACjD,UAAIA,MAAM,IAAIA,MAAM,CAACC,aAArB,EAAoC;AAClC,cAAKP,YAAL,GAAoBM,MAAM,CAACC,aAA3B;AACD;AACF,K,4DAzBMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKR,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkBS,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKR,YAAlD,EACD,CACF,C,QAEMS,M,GAAP,kBAAgB,CACd,OACE,sCAAK,SAAS,EAAEC,yBAASC,IAAT,EAAhB,IACE,yCAAQ,KAAK,EAAC,gBAAd,EAA+B,GAAG,EAAE,KAAKP,SAAzC,EAAoD,SAAS,EAAEM,yBAASL,MAAT,EAA/D,GADF,EAEE,sCAAK,SAAS,EAAEK,yBAASE,OAAT,EAAhB,IAAqC,KAAKV,KAAL,CAAWW,QAAhD,CAFF,CADF,CAMD,C,yBAlBiCC,eAAMC,S,0CAA7BjB,c,CACGkB,mB,GAAsB,gB","sourcesContent":["import React from 'react';\r\n\r\nimport { jsStyles } from './ResizeDetector.styles';\r\n\r\nexport interface ResizeDetectorProps {\r\n  onResize?: (event: UIEvent) => void;\r\n}\r\n\r\nexport class ResizeDetector extends React.Component<ResizeDetectorProps> {\r\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\r\n\r\n  private iframeWindow: Window | null = null;\r\n\r\n  public componentDidMount() {\r\n    if (this.iframeWindow) {\r\n      this.iframeWindow.addEventListener('resize', this.handleResize);\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <div className={jsStyles.root()}>\r\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={jsStyles.iframe()} />\r\n        <div className={jsStyles.content()}>{this.props.children}</div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private handleResize = (event: UIEvent) => {\r\n    if (this.props.onResize) {\r\n      this.props.onResize(event);\r\n    }\r\n  };\r\n\r\n  private iframeRef = (iframe: HTMLIFrameElement) => {\r\n    if (iframe && iframe.contentWindow) {\r\n      this.iframeWindow = iframe.contentWindow;\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["ResizeDetector.tsx"],"names":["ResizeDetector","iframeWindow","handleResize","event","props","onResize","iframeRef","iframe","contentWindow","componentDidMount","addEventListener","render","styles","root","content","fullHeight","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"0PAAA;;AAEA;;AAEA,yD;;;;;;;AAOaA,c;;;AAGHC,IAAAA,Y,GAA8B,I;;;;;;;;;;;;;;;;;;;AAmB9BC,IAAAA,Y,GAAe,UAACC,KAAD,EAAoB;AACzC,UAAI,MAAKC,KAAL,CAAWC,QAAf,EAAyB;AACvB,cAAKD,KAAL,CAAWC,QAAX,CAAoBF,KAApB;AACD;AACF,K;;AAEOG,IAAAA,S,GAAY,UAACC,MAAD,EAA+B;AACjD,UAAIA,MAAM,IAAIA,MAAM,CAACC,aAArB,EAAoC;AAClC,cAAKP,YAAL,GAAoBM,MAAM,CAACC,aAA3B;AACD;AACF,K,4DA3BMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKR,YAAT,EAAuB,CACrB,KAAKA,YAAL,CAAkBS,gBAAlB,CAAmC,QAAnC,EAA6C,KAAKR,YAAlD,EACD,CACF,C,QAEMS,M,GAAP,kBAAgB,SACd,oBACE,sCAAK,SAAS,EAAEC,uBAAOC,IAAP,EAAhB,iBACE,yCAAQ,KAAK,EAAC,gBAAd,EAA+B,GAAG,EAAE,KAAKP,SAAzC,EAAoD,SAAS,EAAEM,uBAAOL,MAAP,EAA/D,EAAgF,QAAQ,EAAE,CAAC,CAA3F,GADF,eAEE,sCAAK,SAAS,EAAE,gCAAMK,uBAAOE,OAAP,EAAN,IAAyB,IAAzB,MAAgCF,uBAAOG,UAAP,EAAhC,IAAsD,KAAKX,KAAL,CAAWW,UAAjE,OAAhB,IACG,KAAKX,KAAL,CAAWY,QADd,CAFF,CADF,CAQD,C,yBApBiCC,eAAMC,S,0CAA7BlB,c,CACGmB,mB,GAAsB,gB","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './ResizeDetector.styles';\n\nexport interface ResizeDetectorProps {\n  onResize?: (event: UIEvent) => void;\n  fullHeight?: boolean;\n}\n\nexport class ResizeDetector extends React.Component<ResizeDetectorProps> {\n  public static __KONTUR_REACT_UI__ = 'ResizeDetector';\n\n  private iframeWindow: Window | null = null;\n\n  public componentDidMount() {\n    if (this.iframeWindow) {\n      this.iframeWindow.addEventListener('resize', this.handleResize);\n    }\n  }\n\n  public render() {\n    return (\n      <div className={styles.root()}>\n        <iframe title=\"resizeDetector\" ref={this.iframeRef} className={styles.iframe()} tabIndex={-1} />\n        <div className={cx({ [styles.content()]: true, [styles.fullHeight()]: this.props.fullHeight })}>\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    if (this.props.onResize) {\n      this.props.onResize(event);\n    }\n  };\n\n  private iframeRef = (iframe: HTMLIFrameElement) => {\n    if (iframe && iframe.contentWindow) {\n      this.iframeWindow = iframe.contentWindow;\n    }\n  };\n}\n"]}

package/cjs/internal/ResizeDetector/ResizeDetector.styles.d.ts

@@ -1,5 +1,6 @@
-export declare const jsStyles: {
+export declare const styles: {
     root(): string;
     iframe(): string;
     content(): string;
+    fullHeight(): string;
 };

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js

@@ -1,14 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
-    return (0, _Emotion.css)(_templateObject());
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      height: 100%;\n    "])));
+
 
 
   },
 
   iframe: function iframe() {
-    return (0, _Emotion.css)(_templateObject2());
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    "])));
+
 
 
 
@@ -22,10 +24,13 @@ var styles = {
   },
 
   content: function content() {
-    return (0, _Emotion.css)(_templateObject3());
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
 
-  } };
+  },
+
+  fullHeight: function fullHeight() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n    "])));
 
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/internal/ResizeDetector/ResizeDetector.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResizeDetector.styles.ts"],"names":["styles","root","css","iframe","content","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;AAGD,GALY;;AAObC,EAAAA,MAPa,oBAOJ;AACP,eAAOD,YAAP;;;;;;;;;;;AAWD,GAnBY;;AAqBbE,EAAAA,OArBa,qBAqBH;AACR,eAAOF,YAAP;;;AAGD,GAzBY,EAAf;;;AA4BO,IAAMG,QAAQ,GAAG,2BAAaL,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  iframe() {\r\n    return css`\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding: 0;\r\n      margin: 0;\r\n      border: 0;\r\n      background: transparent;\r\n    `;\r\n  },\r\n\r\n  content() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["ResizeDetector.styles.ts"],"names":["styles","root","css","iframe","content","fullHeight"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;AAID,GANgC;;AAQjCC,EAAAA,MARiC,oBAQxB;AACP,eAAOD,YAAP;;;;;;;;;;;;AAYD,GArBgC;;AAuBjCE,EAAAA,OAvBiC,qBAuBvB;AACR,eAAOF,YAAP;;;AAGD,GA3BgC;;AA6BjCG,EAAAA,UA7BiC,wBA6BpB;AACX,eAAOH,YAAP;;;AAGD,GAjCgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n      height: 100%;\n    `;\n  },\n\n  iframe() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      background: transparent;\n      opacity: 0;\n    `;\n  },\n\n  content() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  fullHeight() {\n    return css`\n      height: 100%;\n    `;\n  },\n});\n"]}

package/cjs/internal/ResizeDetector/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _ResizeDetector = require("./ResizeDetector");Object.keys(_ResizeDetector).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _ResizeDetector[key];});
+"use strict";exports.__esModule = true;var _ResizeDetector = require("./ResizeDetector");Object.keys(_ResizeDetector).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ResizeDetector[key]) return;exports[key] = _ResizeDetector[key];});

package/cjs/internal/ResizeDetector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ResizeDetector';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ResizeDetector';\n"]}

package/cjs/internal/ThemePlayground/ShowcaseGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ShowcaseGroupProps {
     title?: string;
 }

package/cjs/internal/ThemePlayground/ShowcaseGroup.js

@@ -10,14 +10,14 @@ var _Radio = require("../../components/Radio");
 
 
 
-var ShowcaseGroup = function ShowcaseGroup(props) {return (
+var ShowcaseGroup = function ShowcaseGroup(props) {return /*#__PURE__*/(
     _react.default.createElement("div", null,
-    props.title && _react.default.createElement("h2", null, props.title),
-    _react.default.createElement(_Gapped.Gapped, { gap: 10 },
-    _react.default.createElement(_Button.Button, null, "Button"),
-    _react.default.createElement(_Input.Input, null),
-    _react.default.createElement(_Toggle.Toggle, null),
-    _react.default.createElement(_Radio.Radio, { value: '', checked: true }, "Radio"),
+    props.title && /*#__PURE__*/_react.default.createElement("h2", null, props.title), /*#__PURE__*/
+    _react.default.createElement(_Gapped.Gapped, { gap: 10 }, /*#__PURE__*/
+    _react.default.createElement(_Button.Button, null, "Button"), /*#__PURE__*/
+    _react.default.createElement(_Input.Input, null), /*#__PURE__*/
+    _react.default.createElement(_Toggle.Toggle, null), /*#__PURE__*/
+    _react.default.createElement(_Radio.Radio, { value: '', checked: true }, "Radio"), /*#__PURE__*/
 
 
     _react.default.createElement(_Checkbox.Checkbox, { checked: true }, "Checkbox"))));};exports.ShowcaseGroup = ShowcaseGroup;

package/cjs/internal/ThemePlayground/ShowcaseGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["ShowcaseGroup","props","title"],"mappings":"2JAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;;;AAKO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAC3B;AACGA,IAAAA,KAAK,CAACC,KAAN,IAAe,yCAAKD,KAAK,CAACC,KAAX,CADlB;AAEE,iCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,iCAAC,cAAD,iBADF;AAEE,iCAAC,YAAD,OAFF;AAGE,iCAAC,cAAD,OAHF;AAIE,iCAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,iCAAC,kBAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CAD2B,GAAtB,C","sourcesContent":["import React from 'react';\r\n\r\nimport { Checkbox } from '../../components/Checkbox';\r\nimport { Gapped } from '../../components/Gapped';\r\nimport { Button } from '../../components/Button';\r\nimport { Input } from '../../components/Input';\r\nimport { Toggle } from '../../components/Toggle';\r\nimport { Radio } from '../../components/Radio';\r\n\r\ninterface ShowcaseGroupProps {\r\n  title?: string;\r\n}\r\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => (\r\n  <div>\r\n    {props.title && <h2>{props.title}</h2>}\r\n    <Gapped gap={10}>\r\n      <Button>Button</Button>\r\n      <Input />\r\n      <Toggle />\r\n      <Radio value={''} checked>\r\n        Radio\r\n      </Radio>\r\n      <Checkbox checked>Checkbox</Checkbox>\r\n    </Gapped>\r\n  </div>\r\n);\r\n"]}
+{"version":3,"sources":["ShowcaseGroup.tsx"],"names":["ShowcaseGroup","props","title"],"mappings":"2JAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;;;AAKO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAC3B;AACGA,IAAAA,KAAK,CAACC,KAAN,iBAAe,yCAAKD,KAAK,CAACC,KAAX,CADlB;AAEE,iCAAC,cAAD,IAAQ,GAAG,EAAE,EAAb;AACE,iCAAC,cAAD,iBADF;AAEE,iCAAC,YAAD,OAFF;AAGE,iCAAC,cAAD,OAHF;AAIE,iCAAC,YAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,YAJF;;;AAOE,iCAAC,kBAAD,IAAU,OAAO,MAAjB,eAPF,CAFF,CAD2B,GAAtB,C","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox';\nimport { Gapped } from '../../components/Gapped';\nimport { Button } from '../../components/Button';\nimport { Input } from '../../components/Input';\nimport { Toggle } from '../../components/Toggle';\nimport { Radio } from '../../components/Radio';\n\ninterface ShowcaseGroupProps {\n  title?: string;\n}\nexport const ShowcaseGroup = (props: ShowcaseGroupProps) => (\n  <div>\n    {props.title && <h2>{props.title}</h2>}\n    <Gapped gap={10}>\n      <Button>Button</Button>\n      <Input />\n      <Toggle />\n      <Radio value={''} checked>\n        Radio\n      </Radio>\n      <Checkbox checked>Checkbox</Checkbox>\n    </Gapped>\n  </div>\n);\n"]}

package/cjs/internal/ThemePlayground/darkTheme.d.ts

@@ -54,14 +54,23 @@ export declare const darkTheme: Readonly<Readonly<typeof import("../themes/Defau
     controlHeightSmall: string;
     controlHeightMedium: string;
     controlHeightLarge: string;
-    chbCheckedColor: string;
-    chbBg: string;
-    chbHoverBg: string;
-    radioBgImage: string;
+    checkboxCheckedColor: string;
+    readonly checkboxBg: any;
+    checkboxShadow: string;
+    checkboxHoverBg: string;
+    checkboxBgDisabled: string;
+    checkboxShadowDisabled: string;
+    readonly checkboxOutlineColorFocus: any;
+    readonly checkboxActiveBg: any;
+    readonly checkboxCheckedActiveBg: any;
+    readonly radioBgImage: string;
+    radioBoxShadow: string;
+    radioCheckedBulletColor: string;
     radioHoverBg: string;
+    radioHoverShadow: string;
     radioDisabledShadow: string;
-    chbIndeterminateBg: string;
-    chbShadowDisabled: string;
+    radioDisabledBg: string;
+    readonly radioActiveBg: any;
     textColorDefault: string;
     textColorInvert: string;
     textColorDisabled: string;
@@ -70,97 +79,83 @@ export declare const darkTheme: Readonly<Readonly<typeof import("../themes/Defau
     linkHoverColor: string;
     linkDisabledColor: string;
     linkHoverTextDecoration: string;
-    dropdownMenuHoverBg: string;
-    dropdownMenuSelectedBg: string;
+    menuItemHoverBg: string;
+    menuItemSelectedBg: string;
     loaderBg: string;
     loaderOpacity: string;
     btnDisabledBg: string;
-    btnDisabledShadowColor: string;
     btnCheckedBg: string;
     btnCheckedTextColor: string;
-    btnCheckedShadowColorArrow: string;
+    btnDefaultBg: string;
+    btnDefaultHoverBg: string;
     btnDefaultBgStart: string;
-    btnDefaultBgArrowStart: string;
     btnDefaultBgEnd: string;
-    btnDefaultBgArrowEnd: string;
-    btnDefaultTextColor: string;
-    btnDefaultShadow: string;
-    btnDefaultShadowArrow: string;
-    btnDefaultShadowArrowLeft: string;
+    btnDefaultBorderColor: string;
+    btnDefaultBorderBottomColor: string;
     btnDefaultHoverBgStart: string;
     btnDefaultHoverBgEnd: string;
-    btnDefaultHoverShadow: string;
-    btnDefaultHoverShadowArrow: string;
-    btnDefaultHoverShadowArrowLeft: string;
+    btnDefaultHoverBorderColor: string;
+    btnDefaultHoverBorderBottomColor: string;
     btnDefaultActiveBg: string;
     btnDefaultActiveShadow: string;
-    btnDefaultActiveShadowArrow: string;
-    btnDefaultActiveShadowArrowLeft: string;
+    btnDefaultActiveBorderColor: string;
+    btnDefaultActiveBorderTopColor: string;
     btnSuccessBg: string;
     btnSuccessBgStart: string;
     btnSuccessBgEnd: string;
     btnSuccessTextColor: string;
-    btnSuccessShadow: string;
-    btnSuccessShadowArrow: string;
-    btnSuccessShadowArrowLeft: string;
+    btnSuccessBorderColor: string;
+    btnSuccessBorderBottomColor: string;
     btnSuccessHoverBgStart: string;
     btnSuccessHoverBgEnd: string;
-    btnSuccessHoverShadow: string;
-    btnSuccessHoverShadowArrow: string;
-    btnSuccessHoverShadowArrowLeft: string;
+    btnSuccessHoverBorderColor: string;
+    btnSuccessHoverBorderBottomColor: string;
     btnSuccessActiveBg: string;
     btnSuccessActiveShadow: string;
-    btnSuccessActiveShadowArrow: string;
-    btnSuccessActiveShadowArrowLeft: string;
+    btnSuccessActiveBorderColor: string;
+    btnSuccessActiveBorderTopColor: string;
     btnPrimaryBg: string;
     btnPrimaryBgStart: string;
     btnPrimaryBgEnd: string;
     btnPrimaryTextColor: string;
-    btnPrimaryShadow: string;
-    btnPrimaryShadowArrow: string;
-    btnPrimaryShadowArrowLeft: string;
+    btnPrimaryBorderColor: string;
+    btnPrimaryBorderBottomColor: string;
     btnPrimaryHoverBgStart: string;
     btnPrimaryHoverBgEnd: string;
-    btnPrimaryHoverShadow: string;
-    btnPrimaryHoverShadowArrow: string;
-    btnPrimaryHoverShadowArrowLeft: string;
+    btnPrimaryHoverBorderColor: string;
+    btnPrimaryHoverBorderBottomColor: string;
     btnPrimaryActiveBg: string;
     btnPrimaryActiveShadow: string;
-    btnPrimaryActiveShadowArrow: string;
-    btnPrimaryActiveShadowArrowLeft: string;
+    btnPrimaryActiveBorderColor: string;
+    btnPrimaryActiveBorderTopColor: string;
     btnDangerBg: string;
     btnDangerBgStart: string;
     btnDangerBgEnd: string;
     btnDangerTextColor: string;
-    btnDangerShadow: string;
-    btnDangerShadowArrow: string;
-    btnDangerShadowArrowLeft: string;
+    btnDangerBorderColor: string;
+    btnDangerBorderBottomColor: string;
     btnDangerHoverBgStart: string;
     btnDangerHoverBgEnd: string;
-    btnDangerHoverShadow: string;
-    btnDangerHoverShadowArrow: string;
-    btnDangerHoverShadowArrowLeft: string;
+    btnDangerHoverBorderColor: string;
+    btnDangerHoverBorderBottomColor: string;
     btnDangerActiveBg: string;
     btnDangerActiveShadow: string;
-    btnDangerActiveShadowArrow: string;
-    btnDangerActiveShadowArrowLeft: string;
+    btnDangerActiveBorderColor: string;
+    btnDangerActiveBorderTopColor: string;
     btnPayBg: string;
     btnPayBgStart: string;
     btnPayBgEnd: string;
-    btnPayTextColor: string;
-    btnPayShadow: string;
-    btnPayShadowArrow: string;
-    btnPayShadowArrowLeft: string;
+    btnPayBorderColor: string;
+    btnPayBorderBottomColor: string;
     btnPayHoverBgStart: string;
     btnPayHoverBgEnd: string;
-    btnPayHoverShadow: string;
-    btnPayHoverShadowArrow: string;
-    btnPayHoverShadowArrowLeft: string;
+    btnPayHoverBorderColor: string;
+    btnPayHoverBorderBottomColor: string;
     btnPayActiveBg: string;
     btnPayActiveShadow: string;
-    btnPayActiveShadowArrow: string;
-    btnPayActiveShadowArrowLeft: string;
-    sltPlaceholderColor: string;
+    btnPayActiveBorderColor: string;
+    btnPayActiveBorderTopColor: string;
+    selectPlaceholderColor: string;
     tabColorFocus: string;
     tabColorError: string;
     tabColorWarning: string;
@@ -225,20 +220,19 @@ export declare const darkTheme: Readonly<Readonly<typeof import("../themes/Defau
     toastLinkColor: string;
     toastCloseColor: string;
     toastCloseHoverColor: string;
-    tbBg: string;
-    tbShadow: string;
     tdDividerBg: string;
-    logoColor: string;
-    logoHoverColor: string;
     menuItemPaddingForIcon: string;
     menuBorder: string;
     menuShadow: string;
+    readonly toggleBaseBg: any;
     toggleBgChecked: string;
-    toggleBgWarning: string;
-    toggleBgError: string;
+    toggleShadowColorWarning: string;
+    toggleShadowColorError: string;
     toggleBgActive: string;
     toggleFocusShadowColor: string;
     toggleBorderColor: string;
+    readonly toggleBgDisabled: any;
+    toggleDisabledHandleBg: string;
     btnMenuArrowColor: string;
     popupBorderRadius: string;
     popupBorder: string;
@@ -249,7 +243,13 @@ export declare const darkTheme: Readonly<Readonly<typeof import("../themes/Defau
     inputColor: string;
     inputTextColor: string;
     inputBg: string;
+    inputPlaceholderColorDisabled: string;
+    btnDisabledTextColor: string;
     specificityLevel: string;
     textareaBg: string;
     textareaColor: string;
+    tbBg: string;
+    tbShadow: string;
+    logoColor: string;
+    logoHoverColor: string;
 }>;

package/cjs/internal/ThemePlayground/darkTheme.js

@@ -1,6 +1,8 @@
 "use strict";exports.__esModule = true;exports.darkTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _DefaultTheme8pxOld = require("../../lib/theming/themes/DefaultTheme8pxOld");
 
-var darkTheme = _ThemeFactory.ThemeFactory.create({
+var darkTheme = _ThemeFactory.ThemeFactory.create(
+{
   brandXLight: '#cae5f5',
   brandLight: '#3094d0',
   brand: '#1e79be',
@@ -56,14 +58,35 @@ var darkTheme = _ThemeFactory.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',
@@ -72,112 +95,83 @@ var darkTheme = _ThemeFactory.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',
-  btnDefaultTextColor: 'none',
-  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: 'rgba(255,255,255, 1)',
   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(255,255,255,0.7)',
   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, 28)',
   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(23, 89, 7, 0.85)',
   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(10, 72, 2, 0.79)',
   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(7, 42, 3, 0.9)',
   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(10, 55, 100, 0.85) ',
   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(6, 51, 92, 0.79)',
   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(9, 53, 97, 0.88)',
   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(89, 8, 0, 0.82)',
   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(118, 1, 1, 0.82) ',
   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(100, 5, 5, 0.85)',
   btnPayBg: '#ffc943',
   btnPayBgStart: '#ffd54b',
   btnPayBgEnd: '#ffbb39',
-  btnPayTextColor: 'none',
-  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(134, 70, 12, 0.87)',
   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(162, 82, 6, 0.82)',
   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(99, 68, 0, 0.832)',
+  selectPlaceholderColor: '#a0a0a0',
   tabColorFocus: '#5199db',
   tabColorError: '#e14c30',
   tabColorWarning: '#ffc943',
@@ -242,20 +236,23 @@ var darkTheme = _ThemeFactory.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',
@@ -266,6 +263,18 @@ var darkTheme = _ThemeFactory.ThemeFactory.create({
   inputColor: '#fff',
   inputTextColor: '#fff',
   inputBg: '#333',
+  inputPlaceholderColorDisabled: '#aaa',
+  btnDisabledTextColor: '#aaa',
   specificityLevel: '0',
   textareaBg: 'none',
-  textareaColor: 'inherit' });exports.darkTheme = darkTheme;
+  textareaColor: 'inherit',
+
+  // 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' },
+
+_DefaultTheme8pxOld.DEFAULT_THEME_8PX_OLD);exports.darkTheme = darkTheme;