diff --git a/packages/orbit-components/src/TextLink/index.tsx b/packages/orbit-components/src/TextLink/index.tsx
index f04e5e81e6..992dc73646 100644
--- a/packages/orbit-components/src/TextLink/index.tsx
+++ b/packages/orbit-components/src/TextLink/index.tsx
@@ -9,12 +9,12 @@ import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
import createRel from "../primitives/ButtonPrimitive/common/createRel";
type GetTextLinkTokensType = ({
- type,
+ $type,
}: {
- type?: Type;
+ $type?: Type;
}) => ({ theme }: { theme: Theme }) => string | null;
-const getColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
+const getColor: GetTextLinkTokensType = ({ $type }) => ({ theme }) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextLinkPrimary,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextLinkSecondary,
@@ -25,12 +25,12 @@ const getColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite,
};
- if (!type) return null;
+ if (!$type) return null;
- return tokens[type];
+ return tokens[$type];
};
-const getHoverColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
+const getHoverColor: GetTextLinkTokensType = ({ $type }) => ({ theme }) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarkHover,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarkHover,
@@ -41,12 +41,12 @@ const getHoverColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight,
};
- if (!type) return null;
+ if (!$type) return null;
- return tokens[type];
+ return tokens[$type];
};
-const getActiveColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
+const getActiveColor: GetTextLinkTokensType = ({ $type }) => ({ theme }) => {
const tokens = {
[TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductDarker,
[TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductDarker,
@@ -57,9 +57,9 @@ const getActiveColor: GetTextLinkTokensType = ({ type }) => ({ theme }) => {
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteProductLight,
};
- if (!type) return null;
+ if (!$type) return null;
- return tokens[type];
+ return tokens[$type];
};
const getSizeToken = ({ theme, size }: { theme: Theme; size: Common.Size }): string => {
@@ -91,22 +91,22 @@ StyledIconContainer.defaultProps = {
};
const resolveUnderline = ({
- type,
+ $type,
theme,
$noUnderline,
}: {
- type: Type;
+ $type: Type;
theme: Theme;
$noUnderline: boolean;
}) => {
if ($noUnderline) return "none";
- return type === TYPE_OPTIONS.SECONDARY
+ return $type === TYPE_OPTIONS.SECONDARY
? theme.orbit.textDecorationTextLinkSecondary
: theme.orbit.textDecorationTextLinkPrimary;
};
// Common styles for TextLink and "a" in Text
-export const getLinkStyle = ({ theme }: { theme: Theme; type: Props["type"] }) => css`
+export const getLinkStyle = ({ theme }: { theme: Theme; $type: Props["type"] }) => css`
&,
&:link,
&:visited {
@@ -128,7 +128,7 @@ export const getLinkStyle = ({ theme }: { theme: Theme; type: Props["type"] }) =
}
`;
-export const StyledTextLink = styled(({ asComponent: Component, ...props }) => (
+export const StyledTextLink = styled(({ asComponent: Component, theme, ...props }) => (
{props.children}
))`
${({ theme, $standAlone, size }) => css`
@@ -187,7 +187,7 @@ const TextLink = ({