@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
71 lines (70 loc) • 2.57 kB
JavaScript
import { css } from "styled-components";
import { TYPE_OPTIONS } from "../consts";
const getColor = ({
$type
}) => ({
theme
}) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextLinkPrimary,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextLinkSecondary,
[TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
[TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
[TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
[TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite
};
if (!$type) return null;
return tokens[$type];
};
const getHoverColor = ({
$type
}) => ({
theme
}) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarkHover,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarkHover,
[TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarkHover,
[TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarkHover,
[TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarkHover,
[TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarkHover,
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight
};
if (!$type) return null;
return tokens[$type];
};
const getActiveColor = ({
$type
}) => ({
theme
}) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarkActive,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarkActive,
[TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarker,
[TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarker,
[TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarker,
[TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarker,
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight
};
if (!$type) return null;
return tokens[$type];
};
const resolveUnderline = ({
$type,
theme,
$noUnderline
}) => {
if ($noUnderline) return "none";
return $type === TYPE_OPTIONS.SECONDARY ? theme.orbit.textDecorationTextLinkSecondary : theme.orbit.textDecorationTextLinkPrimary;
};
/**
* @deprecated kept until StyledText is removed
*/
export const getLinkStyle = ({
theme,
$type
}) => {
return css(["&,&:link,&:visited{color:", " ", ";text-decoration:", " ", ";font-weight:", " ", ";}&:hover{outline:none;text-decoration:none;color:", ";}&:active{outline:none;text-decoration:none;color:", ";}"], getColor, $type === TYPE_OPTIONS.SECONDARY && `!important`, resolveUnderline, $type === TYPE_OPTIONS.SECONDARY && `!important`, theme.orbit.fontWeightLinks, $type === TYPE_OPTIONS.SECONDARY && `!important`, getHoverColor, getActiveColor);
};