Add accented Links (#4662)

jpmorganchase · Feb 17, 2025 · 90b85d4 · 90b85d4
1 parent 9a75603
commit 90b85d4
Show file tree

Hide file tree

Showing 16 changed files with 189 additions and 135 deletions.
diff --git a/.changeset/angry-beans-relate.md b/.changeset/angry-beans-relate.md
@@ -0,0 +1,11 @@
+---
+"@salt-ds/core": minor
+---
+
+Added accent colored Links.
+
+```tsx
+<Link href="#" color="accent">
+  Link text
+</Link>
+```
diff --git a/.changeset/beige-horses-poke.md b/.changeset/beige-horses-poke.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": minor
+---
+
+Deprecated `--salt-palette-navigate-foreground-hover` and `--salt-palette-navigate-foreground-active` and replaced them with `--salt-palette-accent-foreground-informative`.
diff --git a/.changeset/happy-ties-float.md b/.changeset/happy-ties-float.md
@@ -0,0 +1,6 @@
+---
+"@salt-ds/core": patch
+---
+
+When Link is set to `color="inherit"` its hover, active and focus colors will now also be inherited.
+Fixed status colors being included in Link's `color` type. This was accidentally added when status color support was added to Text. If you need to achieve this behaviour you can use `color="inherit"`.
diff --git a/.changeset/tiny-snails-guess.md b/.changeset/tiny-snails-guess.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": minor
+---
+
+Added `--salt-content-accent-foreground` to theme and theme-next.
diff --git a/packages/core/src/link/Link.css b/packages/core/src/link/Link.css
@@ -1,33 +1,52 @@
 .saltLink {
-  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));
-  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));
-  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));
-  /* When focused, we also want hover style */
-  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));
+  --link-color: "inherit";
+  --link-color-hover: "inherit";
+  --link-color-active: "inherit";
+  --link-color-visited: var(--salt-content-foreground-visited);
+  --link-color-focus: "inherit";
+  --link-focus-outlineColor: currentColor;
 
   --link-textDecoration: var(--salt-navigable-textDecoration);
   --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);
 
   --link-fontFamily: var(--salt-text-fontFamily);
-  --link-focus-outline: var(--salt-focused-outline);
 }
 
 /* Main css class */
-.saltLink {
+.saltLink.saltText {
   color: var(--link-color);
   letter-spacing: var(--salt-text-letterSpacing);
   text-decoration: var(--link-textDecoration);
   font-family: var(--link-fontFamily);
 }
 
 /* Primary variant */
-.saltText-primary {
+.saltLink-primary {
   --link-color: var(--salt-content-primary-foreground);
+  --link-color-hover: var(--salt-content-primary-foreground);
+  --link-color-active: var(--salt-content-primary-foreground);
+  --link-color-focus: var(--salt-content-primary-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
 }
 
 /* Secondary variant */
-.saltText-secondary {
+.saltLink-secondary {
   --link-color: var(--salt-content-secondary-foreground);
+  --link-color-hover: var(--salt-content-secondary-foreground);
+  --link-color-active: var(--salt-content-secondary-foreground);
+  --link-color-focus: var(--salt-content-secondary-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
+}
+
+.saltLink-accent {
+  --link-color: var(--salt-content-accent-foreground);
+  --link-color-hover: var(--salt-content-accent-foreground);
+  --link-color-active: var(--salt-content-accent-foreground);
+  --link-color-focus: var(--salt-content-accent-foreground);
+  --link-focus-outlineColor: var(--salt-focused-outlineColor);
+  --link-color-visited: var(--salt-content-foreground-visited);
 }
 
 /* External link's icon */
@@ -38,24 +57,25 @@
 
 /* Set color for visited link */
 .saltLink:visited {
-  color: var(--link-color-visited);
+  color: var(--saltLink-color-visited, var(--link-color-visited));
 }
 
 /* Set color for hovered link */
 .saltLink:hover {
-  color: var(--link-color-hover);
+  color: var(--saltLink-color-hover, var(--link-color-hover));
   text-decoration: var(--link-textDecoration-hover);
 }
 
 /* Set color for active link */
 .saltLink:active {
-  color: var(--link-color-active);
+  color: var(--saltLink-color-active, var(--link-color-active));
 }
 
 /* Set color for focused link */
 .saltLink:focus {
-  outline: var(--link-focus-outline);
-  color: var(--link-color-focus);
+  color: var(--saltLink-color-focus, var(--link-color-focus));
+  outline: var(--salt-focused-outline);
+  outline-color: var(--link-focus-outlineColor);
   text-decoration: var(--link-textDecoration-hover);
 }
 

diff --git a/packages/core/src/link/Link.tsx b/packages/core/src/link/Link.tsx
@@ -24,12 +24,16 @@ const withBaseName = makePrefixer("saltLink");
  */
 export interface LinkProps
   extends Omit<ComponentPropsWithoutRef<"a">, "color">,
-    Pick<TextProps<"a">, "maxRows" | "styleAs" | "color" | "variant"> {
+    Pick<TextProps<"a">, "maxRows" | "styleAs" | "variant"> {
   IconComponent?: ComponentType<IconProps> | null;
   /**
    * Render prop to enable customisation of anchor element.
    */
   render?: RenderPropsType["render"];
+  /*
+   * The color of the text. Defaults to "primary".
+   */
+  color?: "inherit" | "primary" | "secondary" | "accent";
 }
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
@@ -60,11 +64,17 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   return (
     <Text
       as={LinkAction}
-      className={clsx(withBaseName(), className)}
+      className={clsx(
+        withBaseName(),
+        {
+          [withBaseName(color)]: color !== "inherit",
+        },
+        className,
+      )}
       href={href}
       ref={ref}
       target={target}
-      color={color}
+      color="inherit"
       {...rest}
     >
       {children}

diff --git a/packages/core/stories/link/link.qa.stories.tsx b/packages/core/stories/link/link.qa.stories.tsx
@@ -1,4 +1,4 @@
-import { Link } from "@salt-ds/core";
+import { Link, Text } from "@salt-ds/core";
 import { UserIcon } from "@salt-ds/icons";
 import type { Meta, StoryFn } from "@storybook/react";
 import {
@@ -27,14 +27,14 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
     <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" color="secondary" target="_blank">
-      Secondary Link target blank
+    <Link href="https://www.google.com" color="accent">
+      Accent Link
     </Link>
-    <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} color="secondary">
-        <strong>Strong</strong> and <small>small</small> truncation example
+    <Text color="error">
+      <Link href="https://www.google.com" color="inherit">
+        Inherit Link
       </Link>
-    </div>
+    </Text>
     <Link
       href="https://www.google.com"
       style={{ color: "var(--salt-content-foreground-visited)" }}
@@ -87,14 +87,20 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
     <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" color="secondary" target="_blank">
-      Secondary Link target blank
+    <Link href="https://www.google.com" color="accent">
+      Accent Link
     </Link>
-    <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} color="secondary">
-        <strong>Strong</strong> and <small>small</small> truncation example
+    <Text color="error">
+      <Link href="https://www.google.com" color="inherit">
+        Inherit Link
       </Link>
-    </div>
+    </Text>
+    <Link
+      href="https://www.google.com"
+      style={{ color: "var(--salt-content-foreground-visited)" }}
+    >
+      Forced visited
+    </Link>
     <Link
       href="https://www.google.com"
       target="_blank"