@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","icon","arrow","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,\n  paddingY,\n  paddingX,\n  fontFamilyCompensation,\n  additionalOffset = 0,\n}: {\n  fontSize: string;\n  paddingY: string;\n  paddingX: string;\n  fontFamilyCompensation: string;\n  additionalOffset?: number;\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,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  color,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: Record<string, string>) => {\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    :enabled:hover,\n    :enabled {\n      .${globalClasses.icon} svg,\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n};\n\nexport const buttonHoverMixin = ({\n  btnBackground,\n  btnBackgroundStart,\n  btnBackgroundEnd,\n  borderColor,\n  borderBottomColor,\n  borderWidth,\n}: Record<string, string>) => {\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,\n  btnShadow,\n  borderColor,\n  borderTopColor,\n  borderWidth,\n  arrowBgImage,\n}: Record<string, string>) => {\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,\n  lineHeight,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: Record<string, string>) => {\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,\n  paddingX,\n  paddingY,\n  fontFamilyCompensation,\n}: Record<string, string>) => {\n  return css`\n    padding: ${getBtnPadding({ fontSize, paddingY, paddingX, fontFamilyCompensation, additionalOffset: 1 })};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = ({ insetWidth, outlineColor, outlineWidth, insetColor }: Record<string, string>) => {\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":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","emotion","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","arrow","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\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  (emotion: Emotion) =>\n  (\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 emotion.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}${\n      borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``\n    };\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n\n    :enabled:hover,\n    :enabled {\n      .${globalClasses.arrow} svg {\n        color: ${color};\n      }\n    }\n  `;\n  };\n\nexport const buttonHoverMixin =\n  (emotion: Emotion) =>\n  (\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 emotion.css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${\n      borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``\n    };\n    color: ${color};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n  };\n\nexport const buttonActiveMixin =\n  (emotion: Emotion) =>\n  (\n    btnBackground: string,\n    btnShadow: string,\n    borderColor: string,\n    borderTopColor: string,\n    borderWidth: string,\n    arrowBgImage: string,\n  ) => {\n    return emotion.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}${\n      borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``\n    } !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  (emotion: Emotion) =>\n  (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => {\n    return emotion.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  (emotion: Emotion) => (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => {\n    return emotion.css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n  };\n\nexport const arrowOutlineMixin =\n  (emotion: Emotion) => (insetWidth: string, outlineColor: string, outlineWidth: string, insetColor: string) => {\n    return emotion.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/cjs/components/Button/Button.styles.d.ts

@@ -1,3 +1,4 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     root: string;
@@ -8,9 +9,8 @@ export declare const globalClasses: {
     caption: string;
     text: string;
     innerShadow: string;
-    icon: string;
 };
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(t: Theme): string;
     withArrowIconRightSmall(t: Theme): string;
     withArrowIconRightMedium(t: Theme): string;
@@ -78,21 +78,17 @@ export declare const styles: {
     narrow(): string;
     noPadding(): string;
     noRightPadding(): string;
-    iconNoRightMargin(): string;
-    iconLink(t: Theme): string;
     wrapLink(): string;
     wrapArrow(): string;
     wrapArrowLeft(): string;
-    icon(t: Theme): string;
-    iconSmall(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconLarge(t: Theme): string;
     borderless(): string;
     borderless2022(): string;
+    backlessDisabled2022(t: Theme): string;
+    textDisabled2022(): string;
     loading(): string;
     visibilityHidden(): string;
 };
-export declare const activeStyles: {
+export declare const getActiveStyles: (emotion: Emotion) => {
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;