fui-fancyui

Version:
FancyUI Libary
36 lines (31 loc) • 1.3 kB
JavaScript
import { styled as n, css as i } from "styled-components";
import c from "../../../design/designFunctions/generateThemeForCard/generateThemeForCard.js";
import a from "../../../design/designFunctions/focusStyle/focusStyle.js";
import { getBackgroundColor as l } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
import s from "../../../utils/functions/clampLayer/clampLayer.js";
const g = n.div`
  outline: none;
  border-radius: ${({ theme: r }) => r.borderRadius.complete};
  ${({ $themeType: r, theme: o, $layer: e, $outlined: t, $outlinedBackgroundStrength: m }) => c({ $themeType: r, theme: o, $outlined: t, $layer: e, $outlinedBackgroundStrength: m })};

  ${({ $isHoverable: r, theme: o, $themeType: e = "primary", $layer: t = 1 }) => (
  //Generate hover style when isHoverable is true
  r && p({ theme: o, $themeType: e, $layer: t })
)};

  transition: background-color 0.2s ease-in-out;

  &:focus {
    ${a}
  }

  ${({ $isActive: r }) => r && a}
  ${({ $externalStyle: r }) => r};
`, p = (r) => {
  const { $themeType: o = "primary", $layer: e = 1, theme: t } = r;
  return i`
    cursor: pointer;
    &:hover {
      background-color: ${l({ theme: t, $themeType: o, $layer: s(e + 1) })};
    }
  `;
};
export {
  g as StyledFancyPill
};