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

FancyUI Libary

import { styled as n } from "styled-components";
import t from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
import e from "../../../design/designFunctions/simpleColorTransition/simpleTransition.js";
const p = n.button`
  border: none;
  padding: 0;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: ${({ $fullHeight: o, $height: r }) => o ? "100%" : r};
  border-radius: ${({ $borderRadius: o }) => t(o, "borderRadius")};
  overflow: hidden;
  touch-action: manipulation;
`, d = n.div`
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
`, u = n.div`
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 2;
  gap: ${({ theme: o }) => o.spacing.xxs};

  * {
    color: ${({ theme: o, $isBright: r, $isDarkTheme: i }) => a({ theme: o, $isBright: r, $isDarkTheme: i })};
    ${e}
  }
  p {
    user-select: none;
  }

  &:active,
  &:hover {
    color: ${({ theme: o, $isBright: r, $isDarkTheme: i }) => r && i ? o.color.primary[4] : o.color.secondary[4]};
  }
`, a = ({ theme: o, $isBright: r, $isDarkTheme: i }) => i ? r ? o.color.primary[0] : o.color.secondary[0] : r ? o.color.secondary[0] : o.color.primary[0];
export {
  d as ColorDisplayContainer,
  u as Content,
  p as Wrapper
};