@patreon/studio
Version:
Patreon Studio Design System
46 lines (39 loc) • 2.06 kB
CSS
.root {
--TextLinkStyle-color-default: var(--TextLink-color-default, token("global.primary.action.default"));
--TextLinkStyle-color-hover: var(--TextLink-color-hover, token("global.primary.action.hover"));
--TextLinkStyle-color-pressed: var(--TextLink-color-pressed, token("global.primary.action.pressed"));
--TextLinkStyle-fg-color: var(--TextLinkStyle-color-default);
--TextLinkStyle-fg-color-hover: var(--TextLinkStyle-color-hover);
--TextLinkStyle-fg-color-pressed: var(--TextLinkStyle-color-pressed);
--TextLinkStyle-underline-color: token("global.border.action.default");
--TextLinkStyle-underline-color-hover: token("global.border.action.hover");;
--TextLinkStyle-underline-color-pressed: token("global.border.action.pressed");;
@supports (--variable: color-mix(in srgb, var(--TextLinkStyle-color-default), transparent 40%)) {
--TextLinkStyle-underline-color: color-mix(in srgb, var(--TextLinkStyle-color-default), transparent 40%);
--TextLinkStyle-underline-color-hover: color-mix(in srgb, var(--TextLinkStyle-color-hover), transparent 40%);
--TextLinkStyle-underline-color-pressed: color-mix(in srgb, var(--TextLinkStyle-color-pressed), transparent 40%);
}
background-color: transparent;
color: var(--TextLinkStyle-fg-color);
outline: none;
text-decoration: underline;
text-decoration-color: var(--TextLinkStyle-underline-color);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
&:not(.hasIconColor) svg {
fill: var(--TextLinkStyle-fg-color) ;
}
&.isActive {
&:focus,
&:hover {
--TextLinkStyle-bg-color: var(--TextLinkStyle-bg-color-hover);
--TextLinkStyle-fg-color: var(--TextLinkStyle-fg-color-hover);
--TextLinkStyle-underline-color: var(--TextLinkStyle-underline-color-hover);
}
&:active {
--TextLinkStyle-bg-color: var(--TextLinkStyle-bg-color-pressed);
--TextLinkStyle-fg-color: var(--TextLinkStyle-fg-color-pressed);
--TextLinkStyle-underline-color: var(--TextLinkStyle-underline-color-pressed);
}
}
}