fui-fancyui/dist/src/components/molecules/Button/Button.style.js

FancyUI Libary

import { styled as n } from "styled-components";
import { disabledStyle as r } from "../../../design/designFunctions/disabledStyle/disableStyle.js";
import a from "../../../design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.js";
import { generateButtonSizeAndPadding as d } from "./utils/generateButtonSizeAndPadding.js";
import { generateBorderRadiusForComponent as s } from "../../../design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.js";
import m from "../../atoms/RawButton/RawButton.js";
import { sizeSettings as o } from "./sizeSettings.js";
const p = n.span`
  height: fit-content;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  align-items: center;
  text-decoration: none;
  text-align: center;
  width: ${({ $wide: t }) => t ? "100%" : "fit-content"};
  min-width: fit-content;

  ${(t) => a({
  ...t,
  $backgroundState: t.$disabled ? "active" : t.$backgroundState ?? "hover"
})}

  ${({ $sizeC: t, $borderRadius: e }) => e !== !1 && s({
  sizeC: t === "xs" ? "sm" : t === "xl" ? "lg" : t,
  borderRadius: e
})};

  ${({ $sizeC: t, $noSize: e, $outlined: i }) => !e && d(t ?? "md", !0, i)}

  * {
    font-size: ${({ $sizeC: t, theme: e }) => e.fontSizes[o[t ?? "md"].fontSize].fontSize};
    line-height: ${({ $sizeC: t, theme: e }) => e.spacing[o[t ?? "md"].lineHeight]} !important;
    font-weight: bold;
  }

  ${({ $disabled: t }) => t && r}
  ${({ $externalStyle: t }) => t && t}
  
  transition:
    background-color 0.125s ease-in-out,
    color 0.125s ease-in-out,
    border-color 0.125s ease-in-out,
    filter 0.125s ease-in-out
`, S = n(m)`
  width: ${({ $wide: t }) => t ? "100%" : "fit-content"};
  height: fit-content;
`;
export {
  p as ButtonStyle,
  S as StyledButton
};