@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

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

@@ -0,0 +1 @@
+{"version":3,"sources":["VariableValue.tsx"],"names":["emitter","EventEmitter","VariableValue","getProps","defaultProps","state","value","props","editing","subscription","rootElement","debounceTimeout","debounceInterval","undefined","renderBaseVariableLink","baseVariables","styles","emotion","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","cx","variableName","length","componentDidMount","addListener","remove","removeListener","componentDidUpdate","prevProps","componentWillUnmount","isColorExtended","isError","linkRoot","React","Component","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';\nimport type { Emotion } from '@emotion/css/create-instance';\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 { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { getStyles } 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\ntype DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n  public static defaultProps: DefaultProps = {\n    deprecated: false,\n  };\n  private getProps = createPropsGetter(VariableValue.defaultProps);\n  public state: VariableValueState = {\n    value: this.props.value,\n    editing: false,\n  };\n  private subscription: { remove: () => void } | null = null;\n  private rootElement: HTMLElement | null = null;\n  private emotion!: Emotion;\n  private readonly debounceTimeout = 500;\n  private debounceInterval: number | undefined = undefined;\n\n  public render() {\n    const { variable, theme, baseVariables } = this.props;\n    const deprecated = this.getProps().deprecated;\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          const styles = getStyles(this.emotion);\n          return (\n            <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n              <div\n                className={this.emotion.cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n                title={variable}\n              >{`${variable}: `}</div>\n              {baseVariables.length > 0 && !this.state.editing\n                ? this.renderBaseVariableLink()\n                : this.renderInputWrapper()}\n            </div>\n          );\n        }}\n      </EmotionConsumer>\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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    const styles = getStyles(this.emotion);\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\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/cjs/internal/ThemePlayground/constants.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare enum ThemeType {
+    Default = "default",
+    Dark = "dark",
+    DefaultOld = "defaultOld",
+    FlatOld = "flatOld",
+    Theme2022 = "theme2022",
+    Theme2022Dark = "theme2022Dark"
+}
+export declare const VARIABLES_GROUPS: ({
+    title: string;
+    prefix: string;
+    isCommon: boolean;
+} | {
+    title: string;
+    prefix: string;
+    isCommon?: undefined;
+})[];
+export declare const DEPRECATED_VARIABLES: Array<keyof Theme>;

package/cjs/internal/ThemePlayground/constants.js

@@ -0,0 +1,44 @@
+"use strict";exports.__esModule = true;exports.VARIABLES_GROUPS = exports.ThemeType = exports.DEPRECATED_VARIABLES = void 0;var
+
+ThemeType;exports.ThemeType = ThemeType;(function (ThemeType) {ThemeType["Default"] = "default";ThemeType["Dark"] = "dark";ThemeType["DefaultOld"] = "defaultOld";ThemeType["FlatOld"] = "flatOld";ThemeType["Theme2022"] = "theme2022";ThemeType["Theme2022Dark"] = "theme2022Dark";})(ThemeType || (exports.ThemeType = ThemeType = {}));
+
+
+
+
+
+
+
+
+var VARIABLES_GROUPS = [
+{ title: 'Common', prefix: 'null', isCommon: true },
+{ title: 'Button', prefix: 'btn' },
+{ title: 'Border', prefix: 'border' },
+{ title: 'Checkbox', prefix: 'checkbox' },
+{ title: 'DatePicker', prefix: 'date calendar picker' },
+{ title: 'Dropdown', prefix: 'dropdown' },
+{ title: 'Input', prefix: 'input' },
+{ title: 'Link', prefix: 'link' },
+{ title: 'Loader', prefix: 'loader' },
+{ title: 'Menu', prefix: 'menu' },
+{ title: 'Modal', prefix: 'modal' },
+{ title: 'MiniModal', prefix: 'miniModal' },
+{ title: 'Paging', prefix: 'paging' },
+{ title: 'Popup', prefix: 'popup' },
+{ title: 'Radio', prefix: 'radio' },
+{ title: 'SidePage', prefix: 'sidePage' },
+{ title: 'Tabs', prefix: 'tab' },
+{ title: 'Textarea', prefix: 'textarea' },
+{ title: 'Toast', prefix: 'toast' },
+{ title: 'Toggle', prefix: 'toggle' },
+{ title: 'Tooltip', prefix: 'tooltip' },
+{ title: 'Token', prefix: 'token' },
+{ title: 'TokenInput', prefix: 'tokenInput' },
+{ title: 'Select', prefix: 'select' },
+{ title: 'Spinner', prefix: 'spinner' },
+{ title: 'Switcher', prefix: 'switcher' },
+{ title: 'Legacy', prefix: 'chb slt' },
+{ title: 'GlobalLoader', prefix: 'globalLoader' },
+{ title: 'CloseButtonIcon', prefix: 'closeBtnIcon' }];exports.VARIABLES_GROUPS = VARIABLES_GROUPS;
+
+
+var DEPRECATED_VARIABLES = [];exports.DEPRECATED_VARIABLES = DEPRECATED_VARIABLES;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["constants.ts"],"names":["ThemeType","VARIABLES_GROUPS","title","prefix","isCommon","DEPRECATED_VARIABLES"],"mappings":";;AAEYA,S,0CAAAA,S,GAAAA,S,wBAAAA,S,kBAAAA,S,8BAAAA,S,wBAAAA,S,4BAAAA,S,uCAAAA,S,yBAAAA,S;;;;;;;;;AASL,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,WAAT,EAAsBC,MAAM,EAAE,WAA9B,EAZ8B;AAa9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAb8B;AAc9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAd8B;AAe9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAf8B;AAgB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAhB8B;AAiB9B,EAAED,KAAK,EAAE,MAAT,EAAiBC,MAAM,EAAE,KAAzB,EAjB8B;AAkB9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EAlB8B;AAmB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAnB8B;AAoB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EApB8B;AAqB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EArB8B;AAsB9B,EAAED,KAAK,EAAE,OAAT,EAAkBC,MAAM,EAAE,OAA1B,EAtB8B;AAuB9B,EAAED,KAAK,EAAE,YAAT,EAAuBC,MAAM,EAAE,YAA/B,EAvB8B;AAwB9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,QAA3B,EAxB8B;AAyB9B,EAAED,KAAK,EAAE,SAAT,EAAoBC,MAAM,EAAE,SAA5B,EAzB8B;AA0B9B,EAAED,KAAK,EAAE,UAAT,EAAqBC,MAAM,EAAE,UAA7B,EA1B8B;AA2B9B,EAAED,KAAK,EAAE,QAAT,EAAmBC,MAAM,EAAE,SAA3B,EA3B8B;AA4B9B,EAAED,KAAK,EAAE,cAAT,EAAyBC,MAAM,EAAE,cAAjC,EA5B8B;AA6B9B,EAAED,KAAK,EAAE,iBAAT,EAA4BC,MAAM,EAAE,cAApC,EA7B8B,CAAzB,C;;;AAgCA,IAAME,oBAAwC,GAAG,EAAjD,C","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: 'MiniModal', prefix: 'miniModal' },\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  { title: 'CloseButtonIcon', prefix: 'closeBtnIcon' },\n];\n\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [];\n"]}

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

@@ -0,0 +1,269 @@
+export declare const darkTheme: Readonly<Readonly<typeof import("../themes/DefaultTheme").DefaultTheme> & {
+    brandXLight: string;
+    brandLight: string;
+    brand: string;
+    brandDark: string;
+    brandXDark: string;
+    white: string;
+    grayXxLight: string;
+    grayXLight: string;
+    grayLight: string;
+    gray: string;
+    grayDark: string;
+    black: string;
+    blueXxLight: string;
+    blueLight: string;
+    blue: string;
+    blueDark: string;
+    blueXDark: string;
+    greenXxLight: string;
+    green: string;
+    greenDark: string;
+    redXxLight: string;
+    red: string;
+    redDark: string;
+    yellowXxLight: string;
+    yellow: string;
+    yellowDark: string;
+    bgDefault: string;
+    bgDisabled: string;
+    bgActive: string;
+    errorMain: string;
+    errorSecondary: string;
+    errorText: string;
+    warningMain: string;
+    warningSecondary: string;
+    warningText: string;
+    borderColorFocus: string;
+    borderColorFocusLight: string;
+    borderColorGrayDark: string;
+    borderColorGrayLight: string;
+    borderColorError: string;
+    borderColorWarning: string;
+    outlineColorFocus: string;
+    placeholderColor: string;
+    placeholderColorLight: string;
+    blinkColor: string;
+    controlBorderWidth: string;
+    controlLineHeightSmall: string;
+    controlLineHeightMedium: string;
+    controlLineHeightLarge: string;
+    controlPaddingYSmall: string;
+    controlPaddingYMedium: string;
+    controlPaddingYLarge: string;
+    controlHeightSmall: string;
+    controlHeightMedium: string;
+    controlHeightLarge: 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;
+    radioDisabledBg: string;
+    readonly radioActiveBg: any;
+    textColorDefault: string;
+    textColorInvert: string;
+    textColorDisabled: string;
+    linkColor: string;
+    linkActiveColor: string;
+    linkHoverColor: string;
+    linkDisabledColor: string;
+    linkHoverTextDecoration: string;
+    menuItemHoverBg: string;
+    menuItemSelectedBg: string;
+    loaderBg: string;
+    loaderOpacity: string;
+    btnDisabledBg: string;
+    btnCheckedBg: string;
+    btnCheckedTextColor: string;
+    btnDefaultBg: string;
+    btnDefaultHoverBg: string;
+    btnDefaultBgStart: string;
+    btnDefaultBgEnd: string;
+    btnDefaultBorderColor: string;
+    btnDefaultBorderBottomColor: string;
+    btnDefaultHoverBgStart: string;
+    btnDefaultHoverBgEnd: string;
+    btnDefaultHoverBorderColor: string;
+    btnDefaultHoverBorderBottomColor: string;
+    btnDefaultActiveBg: string;
+    btnDefaultActiveShadow: string;
+    btnDefaultActiveBorderColor: string;
+    btnDefaultActiveBorderTopColor: string;
+    btnSuccessBg: string;
+    btnSuccessBgStart: string;
+    btnSuccessBgEnd: string;
+    btnSuccessTextColor: string;
+    btnSuccessBorderColor: string;
+    btnSuccessBorderBottomColor: string;
+    btnSuccessHoverBgStart: string;
+    btnSuccessHoverBgEnd: string;
+    btnSuccessHoverBorderColor: string;
+    btnSuccessHoverBorderBottomColor: string;
+    btnSuccessActiveBg: string;
+    btnSuccessActiveShadow: string;
+    btnSuccessActiveBorderColor: string;
+    btnSuccessActiveBorderTopColor: string;
+    btnPrimaryBg: string;
+    btnPrimaryBgStart: string;
+    btnPrimaryBgEnd: string;
+    btnPrimaryTextColor: string;
+    btnPrimaryBorderColor: string;
+    btnPrimaryBorderBottomColor: string;
+    btnPrimaryHoverBgStart: string;
+    btnPrimaryHoverBgEnd: string;
+    btnPrimaryHoverBorderColor: string;
+    btnPrimaryHoverBorderBottomColor: string;
+    btnPrimaryActiveBg: string;
+    btnPrimaryActiveShadow: string;
+    btnPrimaryActiveBorderColor: string;
+    btnPrimaryActiveBorderTopColor: string;
+    btnDangerBg: string;
+    btnDangerBgStart: string;
+    btnDangerBgEnd: string;
+    btnDangerTextColor: string;
+    btnDangerBorderColor: string;
+    btnDangerBorderBottomColor: string;
+    btnDangerHoverBgStart: string;
+    btnDangerHoverBgEnd: string;
+    btnDangerHoverBorderColor: string;
+    btnDangerHoverBorderBottomColor: string;
+    btnDangerActiveBg: string;
+    btnDangerActiveShadow: string;
+    btnDangerActiveBorderColor: string;
+    btnDangerActiveBorderTopColor: string;
+    btnPayBg: string;
+    btnPayBgStart: string;
+    btnPayBgEnd: string;
+    btnPayBorderColor: string;
+    btnPayBorderBottomColor: string;
+    btnPayHoverBgStart: string;
+    btnPayHoverBgEnd: string;
+    btnPayHoverBorderColor: string;
+    btnPayHoverBorderBottomColor: string;
+    btnPayActiveBg: string;
+    btnPayActiveShadow: string;
+    btnPayActiveBorderColor: string;
+    btnPayActiveBorderTopColor: string;
+    selectPlaceholderColor: string;
+    tabColorFocus: string;
+    tabColorError: string;
+    tabColorWarning: string;
+    tabColorSuccess: string;
+    tabColorPrimary: string;
+    tabColorHover: string;
+    tabColorHoverError: string;
+    tabColorHoverWarning: string;
+    tabColorHoverSuccess: string;
+    tabColorHoverPrimary: string;
+    tooltipCloseBtnColor: string;
+    tooltipCloseBtnHoverColor: string;
+    modalBackBg: string;
+    modalBackOpacity: string;
+    modalCloseButtonColor: string;
+    modalCloseButtonDisabledColor: string;
+    modalCloseButtonHoverColor: string;
+    modalFixedHeaderBg: string;
+    modalFixedHeaderShadow: string;
+    modalFixedFooterShadow: string;
+    modalFooterBg: string;
+    modalAdaptiveThreshold: string;
+    sidePageFooterPanelBg: string;
+    sidePageCloseButtonColor: string;
+    sidePageCloseButtonHoverColor: string;
+    sidePageContainerShadow: string;
+    dateInputIconColor: string;
+    dateInputMaskColor: string;
+    calendarCellBg: string;
+    calendarCellHoverBgColor: string;
+    calendarCellHoverColor: string;
+    calendarCellActiveHoverColor: string;
+    calendarCellWeekendColor: string;
+    calendarCellTodayBorder: string;
+    calendarCellSelectedBgColor: string;
+    calendarCellSelectedFontColor: string;
+    calendarMonthHeaderStickedBgColor: string;
+    calendarMonthTitleBorderBottomColor: string;
+    dateSelectMenuBg: string;
+    dateSelectMenuItemBgActive: string;
+    dateSelectMenuItemBgSelected: string;
+    dateSelectMenuItemBgDisabled: string;
+    dateSelectMenuItemFontActive: string;
+    dateSelectMenuItemFontSelected: string;
+    dateSelectMenuItemFontDisabled: string;
+    datePickerOpenBtnColor: string;
+    pickerBg: string;
+    pickerShadow: string;
+    pickerTodayWrapperBgColor: string;
+    pickerTodayWrapperBorderTop: string;
+    pickerTodayWrapperHoverBgColor: string;
+    pagingDotsColor: string;
+    pagingForwardLinkColor: string;
+    pagingForwardLinkDisabledColor: string;
+    pagingPageLinkActiveBg: string;
+    pagingPageLinkActiveColor: string;
+    pagingPageLinkHoverBg: string;
+    pagingPageLinkHintColor: string;
+    menuSeparatorBorderColor: string;
+    toastBg: string;
+    toastColor: string;
+    toastLinkColor: string;
+    toastCloseColor: string;
+    toastCloseHoverColor: string;
+    tdDividerBg: string;
+    menuItemPaddingForIconSmall: string;
+    menuBorder: string;
+    menuShadow: string;
+    readonly toggleBaseBg: any;
+    toggleBgChecked: string;
+    toggleShadowColorWarning: string;
+    toggleShadowColorError: string;
+    toggleBgActive: string;
+    toggleFocusShadowColor: string;
+    toggleBorderColor: string;
+    readonly toggleBgDisabled: any;
+    toggleDisabledHandleBg: string;
+    btnMenuArrowColor: string;
+    popupBorderRadius: string;
+    popupBorder: string;
+    popupBorderColor: string;
+    popupDropShadow: string;
+    popupBoxShadow: string;
+    popupTextColor: string;
+    inputColor: string;
+    inputTextColor: string;
+    inputBg: string;
+    inputPlaceholderColorDisabled: string;
+    btnDisabledTextColor: string;
+    specificityLevel: string;
+    textareaBg: string;
+    textareaColor: string;
+    fileUploaderBg: string;
+    fileUploaderTextColorDefault: string;
+    fileUploaderBorderColor: string;
+    fileUploaderBorderColorFocus: string;
+    fileUploaderLinkColor: string;
+    fileUploaderIconColor: string;
+    fileUploaderIconHoverColor: string;
+    fileUploaderBorderColorError: string;
+    fileUploaderBorderColorWarning: string;
+    fileUploaderDisabledBg: string;
+    fileUploaderDisabledBorderColor: string;
+    fileUploaderDisabledTextColor: string;
+    fileUploaderDisabledLinkColor: string;
+    fileUploaderDisabledIconColor: string;
+    tbBg: string;
+    tbShadow: string;
+    logoColor: string;
+    logoHoverColor: string;
+}>;

package/cjs/internal/ThemePlayground/darkTheme.js

@@ -0,0 +1,294 @@
+"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(
+{
+  brandXLight: '#cae5f5',
+  brandLight: '#3094d0',
+  brand: '#1e79be',
+  brandDark: '#1363a0',
+  brandXDark: '#084f85',
+  white: '#fff',
+  grayXxLight: '#f2f2f2',
+  grayXLight: '#e5e5e5',
+  grayLight: '#a0a0a0',
+  gray: '#808080',
+  grayDark: '#333',
+  black: '#000',
+  blueXxLight: '#e4f3ff',
+  blueLight: '#5199db',
+  blue: '#3072c4',
+  blueDark: '#1e5aa4',
+  blueXDark: '#044785',
+  greenXxLight: '#e2f7dc',
+  green: '#3f9726',
+  greenDark: '#228007',
+  redXxLight: '#ffd6d6',
+  red: '#d70c17',
+  redDark: '#ce0014',
+  yellowXxLight: '#fff0bc',
+  yellow: '#f69c00',
+  yellowDark: '#d97e00',
+  bgDefault: '#333333',
+  bgDisabled: 'rgba(255, 255, 255, 0.05)',
+  bgActive: '#5199db',
+  errorMain: '#d70c17',
+  errorSecondary: '#ffd6d6',
+  errorText: '#ce0014',
+  warningMain: '#f69c00',
+  warningSecondary: '#fff0bc',
+  warningText: '#d97e00',
+  borderColorFocus: '#5199db',
+  borderColorFocusLight: '#bad7f1',
+  borderColorGrayDark: '#4D4D4D',
+  borderColorGrayLight: '#4D4D4D',
+  borderColorError: '#d70c17',
+  borderColorWarning: '#f69c00',
+  outlineColorFocus: '#fff',
+  placeholderColor: '#aaa',
+  placeholderColorLight: '#bbb',
+  blinkColor: 'rgba(0, 136, 255, 0.4)',
+  controlBorderWidth: '1px',
+  controlLineHeightSmall: '20px',
+  controlLineHeightMedium: '20px',
+  controlLineHeightLarge: '22px',
+  controlPaddingYSmall: '6px',
+  controlPaddingYMedium: '9px',
+  controlPaddingYLarge: '10px',
+  controlHeightSmall: '34px',
+  controlHeightMedium: '40px',
+  controlHeightLarge: '44px',
+  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',
+  linkColor: '#fff',
+  linkActiveColor: 'rgba(255, 255, 255, 0.66)',
+  linkHoverColor: '#fff',
+  linkDisabledColor: '#a0a0a0',
+  linkHoverTextDecoration: 'underline',
+  menuItemHoverBg: '#0488E0',
+  menuItemSelectedBg: 'rgba(255, 255, 255, 0.05)',
+  loaderBg: '#333',
+  loaderOpacity: '0.9',
+  btnDisabledBg: 'rgba(255, 255, 255, 0.05)',
+  btnCheckedBg: '#737373',
+  btnCheckedTextColor: '#fff',
+  btnDefaultBg: '#333333',
+  btnDefaultHoverBg: '#444444',
+  btnDefaultBgStart: 'none',
+  btnDefaultBgEnd: 'none',
+  btnDefaultBorderColor: 'rgba(255,255,255, 1)',
+  btnDefaultBorderBottomColor: '',
+  btnDefaultHoverBgStart: '#333',
+  btnDefaultHoverBgEnd: '#333',
+  btnDefaultHoverBorderColor: 'rgba(255,255,255,0.9)',
+  btnDefaultHoverBorderBottomColor: 'rgba(0,0,0,0.15)',
+  btnDefaultActiveBg: '#e1e1e1',
+  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',
+  btnSuccessBorderColor: 'rgba(25, 103, 6, 0.7)',
+  btnSuccessBorderBottomColor: 'rgba(21, 80, 7, 0.5)',
+  btnSuccessHoverBgStart: '#3b8d13',
+  btnSuccessHoverBgEnd: '#317e0b',
+  btnSuccessHoverBorderColor: 'rgba(7, 73, 1, 0.7)',
+  btnSuccessHoverBorderBottomColor: 'rgba(16, 70, 4, 0.3)',
+  btnSuccessActiveBg: '#35840e',
+  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',
+  btnPrimaryBorderColor: 'rgba(14, 81, 129, 0.7)',
+  btnPrimaryBorderBottomColor: 'rgba(7, 37, 80, 0.5)',
+  btnPrimaryHoverBgStart: '#0087d5',
+  btnPrimaryHoverBgEnd: '#167ac1',
+  btnPrimaryHoverBorderColor: 'rgba(5, 60, 99, 0.7)',
+  btnPrimaryHoverBorderBottomColor: 'rgba(7, 37, 80, 0.3)',
+  btnPrimaryActiveBg: '#0079c3',
+  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',
+  btnDangerBorderColor: 'rgba(173, 15, 0, 0.7)',
+  btnDangerBorderBottomColor: 'rgba(0, 0, 0, 0.4)',
+  btnDangerHoverBgStart: '#d44227',
+  btnDangerHoverBgEnd: '#c73013',
+  btnDangerHoverBorderColor: 'rgba(145, 0, 0, 0.7)',
+  btnDangerHoverBorderBottomColor: 'rgba(90, 3, 3, 0.4)',
+  btnDangerActiveBg: '#cd381b',
+  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',
+  btnPayBorderColor: 'rgba(238, 169, 34, 0.7)',
+  btnPayBorderBottomColor: 'rgba(77, 16, 0, 0.56)',
+  btnPayHoverBgStart: '#ffbd3a',
+  btnPayHoverBgEnd: '#f8a91d',
+  btnPayHoverBorderColor: 'rgba(227, 142, 8, 0.7)',
+  btnPayHoverBorderBottomColor: 'rgba(93, 20, 3, 0.4)',
+  btnPayActiveBg: '#fbb028',
+  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',
+  tabColorSuccess: '#419d14',
+  tabColorPrimary: '#1e8dd4',
+  tabColorHover: '#bad7f1',
+  tabColorHoverError: '#f1ac9f',
+  tabColorHoverWarning: '#ffeec3',
+  tabColorHoverSuccess: '#7de849',
+  tabColorHoverPrimary: '#84c4ee',
+  tooltipCloseBtnColor: '#808080',
+  tooltipCloseBtnHoverColor: '#606060',
+  modalBackBg: '#333',
+  modalBackOpacity: '0.6',
+  modalCloseButtonColor: 'rgba(255, 255, 255, 0.5)',
+  modalCloseButtonDisabledColor: '#8b8b8b',
+  modalCloseButtonHoverColor: 'rgba(255, 255, 255, 0.7)',
+  modalFixedHeaderBg: '#333333',
+  modalFixedHeaderShadow: '0 1px 7px #000000',
+  modalFixedFooterShadow: '0 -1px 10px #000000',
+  modalFooterBg: '#272727',
+  modalAdaptiveThreshold: '425px',
+  sidePageFooterPanelBg: '#272727',
+  sidePageCloseButtonColor: 'rgba(255, 255, 255, 0.5)',
+  sidePageCloseButtonHoverColor: 'rgba(255, 255, 255, 0.7)',
+  sidePageContainerShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
+  dateInputIconColor: '#666',
+  dateInputMaskColor: '#4D4D4D',
+  calendarCellBg: '#333333',
+  calendarCellHoverBgColor: '#5199db',
+  calendarCellHoverColor: 'white',
+  calendarCellActiveHoverColor: 'white',
+  calendarCellWeekendColor: '#FF1414',
+  calendarCellTodayBorder: '1px solid #333333',
+  calendarCellSelectedBgColor: '#5199db',
+  calendarCellSelectedFontColor: 'inherit',
+  calendarMonthHeaderStickedBgColor: '#333333',
+  calendarMonthTitleBorderBottomColor: '#333333',
+  dateSelectMenuBg: '#333333',
+  dateSelectMenuItemBgActive: '#5199db',
+  dateSelectMenuItemBgSelected: '#5199db',
+  dateSelectMenuItemBgDisabled: '#333333',
+  dateSelectMenuItemFontActive: '#fff',
+  dateSelectMenuItemFontSelected: '#fff',
+  dateSelectMenuItemFontDisabled: '#a0a0a0',
+  datePickerOpenBtnColor: '#333',
+  pickerBg: '#333333',
+  pickerShadow: '0 0 0 1px #4d4d4d, 0 3px 10px 0 rgba(0, 0, 0, 0.2)',
+  pickerTodayWrapperBgColor: '#333333',
+  pickerTodayWrapperBorderTop: '1px solid #4D4D4D',
+  pickerTodayWrapperHoverBgColor: '#5199db',
+  pagingDotsColor: '#A0A0A0',
+  pagingForwardLinkColor: '#00A8FF',
+  pagingForwardLinkDisabledColor: '#A0A0A0',
+  pagingPageLinkActiveBg: 'rgba(255, 255, 255, 0.06)',
+  pagingPageLinkActiveColor: '#a0a0a0',
+  pagingPageLinkHoverBg: 'rgba(255, 255, 255, 0.05)',
+  pagingPageLinkHintColor: 'rgba(160, 160, 160, 0.35)',
+  menuSeparatorBorderColor: '#404040',
+  toastBg: 'rgba(0, 0, 0, 0.8)',
+  toastColor: 'white',
+  toastLinkColor: '#80caff',
+  toastCloseColor: '#a0a0a0',
+  toastCloseHoverColor: 'white',
+  tdDividerBg: '#808080',
+  menuItemPaddingForIconSmall: '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',
+  toggleShadowColorWarning: '#f69c00',
+  toggleShadowColorError: '#d70c17',
+  toggleBgActive: '#e5e5e5',
+  toggleFocusShadowColor: '#5199db',
+  toggleBorderColor: 'rgba(255, 255, 255, 0.15)',
+  get toggleBgDisabled() {
+    return this.bgDefault;
+  },
+  toggleDisabledHandleBg: '#4D4D4D',
+  btnMenuArrowColor: '#666',
+  popupBorderRadius: '2px',
+  popupBorder: '1px solid',
+  popupBorderColor: '#4D4D4D',
+  popupDropShadow: 'drop-shadow(0 0 1px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
+  popupBoxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.2)',
+  popupTextColor: '#fff',
+  inputColor: '#fff',
+  inputTextColor: '#fff',
+  inputBg: '#333',
+  inputPlaceholderColorDisabled: '#aaa',
+  btnDisabledTextColor: '#aaa',
+  specificityLevel: '0',
+  textareaBg: 'none',
+  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' },
+
+_DefaultTheme8pxOld.DEFAULT_THEME_8PX_OLD);exports.darkTheme = darkTheme;