@skbkontur/react-ui 4.11.0 → 4.12.0-theme2022.6

package/components/Button/Button.d.ts

@@ -1,160 +1,160 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
-export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps extends CommonProps {
-    /** @ignore */
-    _noPadding?: boolean;
-    /** @ignore */
-    _noRightPadding?: boolean;
-    /**
-     * Применяет к кнопке стили псевдокласса `:active`.
-     */
-    active?: boolean;
-    /**
-     * CSS-свойство `text-align`.
-     */
-    align?: React.CSSProperties['textAlign'];
-    /**
-     * Превращает обычную кнопку в кнопку со стрелкой.
-     */
-    arrow?: boolean | 'left';
-    /**
-     * Даёт кнопке фокус после окончания загрузки страницы.
-     */
-    autoFocus?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
-    borderless?: boolean;
-    /**
-     * @ignore
-     */
-    checked?: boolean;
-    children?: React.ReactNode;
-    /** @ignore */
-    corners?: React.CSSProperties;
-    /**
-     * Отключенное состояние кнопки.
-     */
-    disabled?: boolean;
-    /** @ignore */
-    disableFocus?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
-    error?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
-    icon?: React.ReactElement<any>;
-    /**
-     * Переводит кнопку в состояние загрузки.
-     */
-    loading?: boolean;
-    /**
-     * Сужает кнопку.
-     */
-    narrow?: boolean;
-    /**
-     * HTML-событие `onblur`.
-     */
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onclick`.
-     */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onfocus`.
-     */
-    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `keydown`.
-     */
-    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseenter`.
-     */
-    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `mouseleave`.
-     */
-    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * HTML-событие `onmouseover`.
-     */
-    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Задаёт размер кнопки.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
-    size?: ButtonSize;
-    /**
-     * HTML-атрибут `type`.
-     */
-    type?: ButtonType;
-    /**
-     * HTML-атрибут `title`.
-     */
-    title?: string;
-    /**
-     * Стиль кнопки.
-     *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
-     */
-    use?: ButtonUse;
-    /** @ignore */
-    visuallyFocused?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
-    warning?: boolean;
-    /**
-     * CSS-свойство `width`.
-     */
-    width?: number | string;
-}
-export interface ButtonState {
-    focusedByTab: boolean;
-}
-export declare const ButtonDataTids: {
-    readonly root: "Button__root";
-};
-declare type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
-export declare class Button extends React.Component<ButtonProps, ButtonState> {
-    static __KONTUR_REACT_UI__: string;
-    static __BUTTON__: boolean;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: {
-        focusedByTab: boolean;
-    };
-    private theme;
-    private node;
-    private setRootNode;
-    componentDidMount(): void;
-    static getDerivedStateFromProps(props: ButtonProps): {
-        focusedByTab: boolean;
-    } | null;
-    /**
-     * @public
-     */
-    focus(): void;
-    /**
-     * @public
-     */
-    blur(): void;
-    render(): JSX.Element;
-    private renderMain;
-    private getLoadingSpinner;
-    private getSizeClassName;
-    private getSizeIconClassName;
-    private getSizeWrapClassName;
-    private handleFocus;
-    private handleBlur;
-    private _ref;
-}
-export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
-export {};
+import React from 'react';
+import { ThemeIn } from '../../lib/theming/Theme';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type ButtonSize = 'small' | 'medium' | 'large';
+export declare type ButtonType = 'button' | 'submit' | 'reset';
+export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
+export interface ButtonProps extends CommonProps {
+    /** @ignore */
+    _noPadding?: boolean;
+    /** @ignore */
+    _noRightPadding?: boolean;
+    /**
+     * Применяет к кнопке стили псевдокласса `:active`.
+     */
+    active?: boolean;
+    /**
+     * CSS-свойство `text-align`.
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Превращает обычную кнопку в кнопку со стрелкой.
+     */
+    arrow?: boolean | 'left';
+    /**
+     * Даёт кнопке фокус после окончания загрузки страницы.
+     */
+    autoFocus?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
+    borderless?: boolean;
+    /**
+     * @ignore
+     */
+    checked?: boolean;
+    children?: React.ReactNode;
+    /** @ignore */
+    corners?: React.CSSProperties;
+    /**
+     * Отключенное состояние кнопки.
+     */
+    disabled?: boolean;
+    /** @ignore */
+    disableFocus?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Иконка слева от текста кнопки.
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Переводит кнопку в состояние загрузки.
+     */
+    loading?: boolean;
+    /**
+     * Сужает кнопку.
+     */
+    narrow?: boolean;
+    /**
+     * HTML-событие `onblur`.
+     */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onclick`.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onfocus`.
+     */
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `keydown`.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseenter`.
+     */
+    onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `mouseleave`.
+     */
+    onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseover`.
+     */
+    onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Задаёт размер кнопки.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
+    size?: ButtonSize;
+    /**
+     * HTML-атрибут `type`.
+     */
+    type?: ButtonType;
+    /**
+     * HTML-атрибут `title`.
+     */
+    title?: string;
+    /**
+     * Стиль кнопки.
+     *
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
+     */
+    use?: ButtonUse;
+    /** @ignore */
+    visuallyFocused?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    /**
+     * CSS-свойство `width`.
+     */
+    width?: number | string;
+    theme?: ThemeIn;
+}
+export interface ButtonState {
+    focusedByTab: boolean;
+}
+export declare const ButtonDataTids: {
+    readonly root: "Button__root";
+};
+declare type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
+export declare class Button extends React.Component<ButtonProps, ButtonState> {
+    static __KONTUR_REACT_UI__: string;
+    static __BUTTON__: boolean;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: {
+        focusedByTab: boolean;
+    };
+    private theme;
+    private node;
+    private setRootNode;
+    componentDidMount(): void;
+    static getDerivedStateFromProps(props: ButtonProps): {
+        focusedByTab: boolean;
+    } | null;
+    /**
+     * @public
+     */
+    focus(): void;
+    /**
+     * @public
+     */
+    blur(): void;
+    render(): JSX.Element;
+    private renderMain;
+    private getSizeClassName;
+    private getSizeWrapClassName;
+    private handleFocus;
+    private handleBlur;
+    private _ref;
+}
+export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export {};

package/components/Button/Button.mixins/Button.mixins.js

@@ -42,10 +42,10 @@ export var buttonUseMixin = function buttonUseMixin(btnBackground, btnBackground
 };
 export var buttonHoverMixin = function buttonHoverMixin(btnBackground, btnBackgroundStart, btnBackgroundEnd, borderColor, borderBottomColor, borderWidth) {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    &:hover:enabled {\n      background-color: ", ";\n      background-image: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])), hasGradient ? "initial" : btnBackground, hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none", borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "", globalClasses.arrowHelper, borderWidth, borderColor);
 };
 export var buttonActiveMixin = function buttonActiveMixin(btnBackground, btnShadow, borderColor, borderTopColor, borderWidth, arrowBgImage) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", ";\n    }\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", "", " !important; // override :hover styles\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])), btnBackground, borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "", globalClasses.innerShadow, btnShadow, globalClasses.arrowHelper, borderWidth, borderColor, globalClasses.arrowHelperTop, arrowBgImage);
 };
 export var buttonSizeMixin = function buttonSizeMixin(fontSize, lineHeight, paddingX, paddingY, fontFamilyCompensation) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", ";\n    line-height: ", ";\n  "])), fontSize, getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation), lineHeight);

package/components/Button/Button.mixins/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    &:hover:enabled {\n      background-color: ${hasGradient ? `initial` : btnBackground};\n      background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n      }\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    background-image: none;\n    background-color: ${btnBackground};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n    .${globalClasses.innerShadow} {\n      box-shadow: ${btnShadow};\n    }\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n      &.${globalClasses.arrowHelperTop} {\n        background-image: ${arrowBgImage};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["css","shift","globalClasses","getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n        &.${globalClasses.arrowHelperTop} {\n          background-image: ${arrowBgImage};\n        }\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}

package/components/Button/Button.mixins.d.ts

@@ -1,6 +1,6 @@
-export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
-export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
-export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
-export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
-export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;
+export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
+export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
+export declare const arrowOutlineMixin: (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => string;