[CL-984] link style updates (#18360)

* WIP

* add new link styles

* update link stories

* skip default screenshot as variations are covered in other stories

* updated docs and story background

* make default the default linkType value

* remove references to primary link type in CL

* use better bg colors in stories

* remove duplicate linkType

* update aria-disabled text to use new palette

* add back primary link type to story

* fix capitolization

* add backticks to variant names in docs

* remove important from link styles

* fix generic selector to find correct button

* fix capitolization

* mark variants as deprecated in docs

* fix link hover text colors

apps/browser/src/vault/popup/components/vault-v2/autofill-confirmation-dialog/autofill-confirmation-dialog.component.spec.ts

@@ -91,10 +91,18 @@ describe("AutofillConfirmationDialogComponent", () => {
     jest.resetAllMocks();
   });
 
-  const findShowAll = (inFx?: ComponentFixture<AutofillConfirmationDialogComponent>) =>
-    (inFx || fixture).nativeElement.querySelector(
-      "button.tw-text-sm.tw-font-medium.tw-cursor-pointer",
-    ) as HTMLButtonElement | null;
+  const findShowAll = (inFx?: ComponentFixture<AutofillConfirmationDialogComponent>) => {
+    // Find the button by its text content (showAll or showLess)
+    const buttons = Array.from(
+      (inFx || fixture).nativeElement.querySelectorAll("button"),
+    ) as HTMLButtonElement[];
+    return (
+      buttons.find((btn) => {
+        const text = btn.textContent?.trim() || "";
+        return text === "showAll" || text === "showLess";
+      }) || null
+    );
+  };
 
   it("normalizes currentUrl and savedUrls via Utils.getHostname", () => {
     expect(Utils.getHostname).toHaveBeenCalledTimes(1 + (params.savedUrls?.length ?? 0));

libs/components/src/breadcrumbs/breadcrumbs.component.html

@@ -2,7 +2,6 @@
   @if (breadcrumb.route(); as route) {
     <a
       bitLink
-      linkType="primary"
       class="tw-my-2 tw-inline-block"
       [routerLink]="route"
       [queryParams]="breadcrumb.queryParams()"
@@ -14,7 +13,6 @@
     <button
       type="button"
       bitLink
-      linkType="primary"
       class="tw-my-2 tw-inline-block"
       (click)="breadcrumb.onClick($event)"
     >
@@ -42,7 +40,6 @@
       @if (breadcrumb.route(); as route) {
         <a
           bitMenuItem
-          linkType="primary"
           [routerLink]="route"
           [queryParams]="breadcrumb.queryParams()"
           [queryParamsHandling]="breadcrumb.queryParamsHandling()"
@@ -50,7 +47,7 @@
           <ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
         </a>
       } @else {
-        <button type="button" bitMenuItem linkType="primary" (click)="breadcrumb.onClick($event)">
+        <button type="button" bitMenuItem (click)="breadcrumb.onClick($event)">
           <ng-container [ngTemplateOutlet]="breadcrumb.content()"></ng-container>
         </button>
       }
@@ -61,7 +58,6 @@
     @if (breadcrumb.route(); as route) {
       <a
         bitLink
-        linkType="primary"
         class="tw-my-2 tw-inline-block"
         [routerLink]="route"
         [queryParams]="breadcrumb.queryParams()"
@@ -73,7 +69,6 @@
       <button
         type="button"
         bitLink
-        linkType="primary"
         class="tw-my-2 tw-inline-block"
         (click)="breadcrumb.onClick($event)"
       >

libs/components/src/link/link.directive.ts

@@ -3,21 +3,34 @@ import { input, HostBinding, Directive, inject, ElementRef, booleanAttribute } f
 import { AriaDisableDirective } from "../a11y";
 import { ariaDisableElement } from "../utils";
 
-export type LinkType = "primary" | "secondary" | "contrast" | "light";
+export const LinkTypes = [
+  "primary",
+  "secondary",
+  "contrast",
+  "light",
+  "default",
+  "subtle",
+  "success",
+  "warning",
+  "danger",
+] as const;
+
+export type LinkType = (typeof LinkTypes)[number];
 
 const linkStyles: Record<LinkType, string[]> = {
-  primary: [
-    "!tw-text-primary-600",
-    "hover:!tw-text-primary-700",
-    "focus-visible:before:tw-ring-primary-600",
-  ],
-  secondary: ["!tw-text-main", "hover:!tw-text-main", "focus-visible:before:tw-ring-primary-600"],
+  primary: ["tw-text-fg-brand", "hover:tw-text-fg-brand-strong"],
+  default: ["tw-text-fg-brand", "hover:tw-text-fg-brand-strong"],
+  secondary: ["tw-text-fg-heading", "hover:tw-text-fg-heading"],
+  light: ["tw-text-fg-white", "hover:tw-text-fg-white", "focus-visible:before:tw-ring-fg-contrast"],
+  subtle: ["!tw-text-fg-heading", "hover:tw-text-fg-heading"],
+  success: ["tw-text-fg-success", "hover:tw-text-fg-success-strong"],
+  warning: ["tw-text-fg-warning", "hover:tw-text-fg-warning-strong"],
+  danger: ["tw-text-fg-danger", "hover:tw-text-fg-danger-strong"],
   contrast: [
-    "!tw-text-contrast",
-    "hover:!tw-text-contrast",
-    "focus-visible:before:tw-ring-text-contrast",
+    "tw-text-fg-contrast",
+    "hover:tw-text-fg-contrast",
+    "focus-visible:before:tw-ring-fg-contrast",
   ],
-  light: ["!tw-text-alt2", "hover:!tw-text-alt2", "focus-visible:before:tw-ring-text-alt2"],
 };
 
 const commonStyles = [
@@ -32,16 +45,18 @@ const commonStyles = [
   "tw-rounded",
   "tw-transition",
   "tw-no-underline",
+  "tw-cursor-pointer",
   "hover:tw-underline",
   "hover:tw-decoration-1",
   "disabled:tw-no-underline",
   "disabled:tw-cursor-not-allowed",
-  "disabled:!tw-text-secondary-300",
-  "disabled:hover:!tw-text-secondary-300",
+  "disabled:!tw-text-fg-disabled",
+  "disabled:hover:!tw-text-fg-disabled",
   "disabled:hover:tw-no-underline",
   "focus-visible:tw-outline-none",
   "focus-visible:tw-underline",
   "focus-visible:tw-decoration-1",
+  "focus-visible:before:tw-ring-border-focus",
 
   // Workaround for html button tag not being able to be set to `display: inline`
   // and at the same time not being able to use `tw-ring-offset` because of box-shadow issue.
@@ -63,14 +78,14 @@ const commonStyles = [
   "focus-visible:tw-z-10",
   "aria-disabled:tw-no-underline",
   "aria-disabled:tw-pointer-events-none",
-  "aria-disabled:!tw-text-secondary-300",
-  "aria-disabled:hover:!tw-text-secondary-300",
+  "aria-disabled:!tw-text-fg-disabled",
+  "aria-disabled:hover:!tw-text-fg-disabled",
   "aria-disabled:hover:tw-no-underline",
 ];
 
 @Directive()
 abstract class LinkDirective {
-  readonly linkType = input<LinkType>("primary");
+  readonly linkType = input<LinkType>("default");
 }
 
 /**

libs/components/src/link/link.mdx

@@ -18,10 +18,15 @@ import { LinkModule } from "@bitwarden/components";
 
 You can use one of the following variants by providing it as the `linkType` input:
 
-- `primary` - most common, uses brand color
-- `secondary` - matches the main text color
+- @deprecated `primary` => use `default` instead
+- @deprecated `secondary` => use `subtle` instead
+- `default` - most common, uses brand color
+- `subtle` - matches the main text color
 - `contrast` - for high contrast against a dark background (or a light background in dark mode)
 - `light` - always a light color, even in dark mode
+- `warning` - used in association with warning callouts/banners
+- `success` - used in association with success callouts/banners
+- `danger` - used in association with danger callouts/banners
 
 ## Sizes
 

libs/components/src/link/link.stories.ts

@@ -2,7 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 
-import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
+import { AnchorLinkDirective, ButtonLinkDirective, LinkTypes } from "./link.directive";
 import { LinkModule } from "./link.module";
 
 export default {
@@ -14,7 +14,7 @@ export default {
   ],
   argTypes: {
     linkType: {
-      options: ["primary", "secondary", "contrast"],
+      options: LinkTypes.map((type) => type),
       control: { type: "radio" },
     },
   },
@@ -30,48 +30,153 @@ type Story = StoryObj<ButtonLinkDirective>;
 
 export const Default: Story = {
   render: (args) => ({
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-      <a bitLink ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
+      <div class="tw-p-2" [class]="backgroundClass">
+        <a bitLink href="" ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
+      </div>
     `,
   }),
+  args: {
+    linkType: "primary",
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+export const AllVariations: Story = {
+  render: () => ({
+    template: /*html*/ `
+      <div class="tw-flex tw-flex-col tw-gap-6">
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="primary" href="#">Primary</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="secondary" href="#">Secondary</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-contrast">
+          <a bitLink linkType="contrast" href="#">Contrast</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-brand">
+          <a bitLink linkType="light" href="#">Light</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="default" href="#">Default</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="subtle" href="#">Subtle</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="success" href="#">Success</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="warning" href="#">Warning</a>
+        </div>
+        <div class="tw-flex tw-gap-4 tw-p-2">
+          <a bitLink linkType="danger" href="#">Danger</a>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: {
+      exclude: ["linkType"],
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export const InteractionStates: Story = {
   render: () => ({
     template: /*html*/ `
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">
+      <div class="tw-flex tw-flex-col tw-gap-6">
+        <div class="tw-flex tw-gap-4 tw-p-2">
         <a bitLink linkType="primary" href="#">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-hover">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-focus-visible">Primary</a>
         <a bitLink linkType="primary" href="#" class="tw-test-hover tw-test-focus-visible">Primary</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">
+      <div class="tw-flex tw-gap-4 tw-p-2">
         <a bitLink linkType="secondary" href="#">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-hover">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-focus-visible">Secondary</a>
         <a bitLink linkType="secondary" href="#" class="tw-test-hover tw-test-focus-visible">Secondary</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6 tw-bg-primary-600">
+      <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-contrast">
         <a bitLink linkType="contrast" href="#">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-hover">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-focus-visible">Contrast</a>
         <a bitLink linkType="contrast" href="#" class="tw-test-hover tw-test-focus-visible">Contrast</a>
       </div>
-      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6 tw-bg-primary-600">
+      <div class="tw-flex tw-gap-4 tw-p-2 tw-bg-bg-brand">
         <a bitLink linkType="light" href="#">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-hover">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-focus-visible">Light</a>
         <a bitLink linkType="light" href="#" class="tw-test-hover tw-test-focus-visible">Light</a>
       </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="default" href="#">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-hover">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-focus-visible">Default</a>
+        <a bitLink linkType="default" href="#" class="tw-test-hover tw-test-focus-visible">Default</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="subtle" href="#">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-hover">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-focus-visible">Subtle</a>
+        <a bitLink linkType="subtle" href="#" class="tw-test-hover tw-test-focus-visible">Subtle</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="success" href="#">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-hover">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-focus-visible">Success</a>
+        <a bitLink linkType="success" href="#" class="tw-test-hover tw-test-focus-visible">Success</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="warning" href="#">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-hover">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-focus-visible">Warning</a>
+        <a bitLink linkType="warning" href="#" class="tw-test-hover tw-test-focus-visible">Warning</a>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-p-2">
+        <a bitLink linkType="danger" href="#">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-hover">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-focus-visible">Danger</a>
+        <a bitLink linkType="danger" href="#" class="tw-test-hover tw-test-focus-visible">Danger</a>
+      </div>
+      </div>
     `,
   }),
+  parameters: {
+    controls: {
+      exclude: ["linkType"],
+      hideNoControlsWarning: true,
+    },
+  },
 };
 
 export const Buttons: Story = {
   render: (args) => ({
-    props: args,
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-    <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
+    <div class="tw-p-2" [class]="backgroundClass">
       <div class="tw-block tw-p-2">
         <button type="button" bitLink [linkType]="linkType">Button</button>
       </div>
@@ -100,9 +205,17 @@ export const Buttons: Story = {
 
 export const Anchors: StoryObj<AnchorLinkDirective> = {
   render: (args) => ({
-    props: args,
+    props: {
+      linkType: args.linkType,
+      backgroundClass:
+        args.linkType === "contrast"
+          ? "tw-bg-bg-contrast"
+          : args.linkType === "light"
+            ? "tw-bg-bg-brand"
+            : "tw-bg-transparent",
+    },
     template: /*html*/ `
-    <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
+    <div class="tw-p-2" [class]="backgroundClass">
       <div class="tw-block tw-p-2">
         <a bitLink [linkType]="linkType" href="#">Anchor</a>
       </div>
@@ -138,18 +251,15 @@ export const Inline: Story = {
       </span>
     `,
   }),
-  args: {
-    linkType: "primary",
-  },
 };
 
-export const Disabled: Story = {
+export const Inactive: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
       <button type="button" bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
       <button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
-      <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
+      <div class="tw-bg-bg-contrast tw-p-2 tw-inline-block">
         <button type="button" bitLink disabled linkType="contrast">Contrast</button>
       </div>
     `,

libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts

@@ -73,7 +73,6 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
           A random password
           <button
             bitLink
-            linkType="primary"
             [bitPopoverTriggerFor]="myPopover"
             #triggerRef="popoverTrigger"
             type="button"

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -112,13 +112,12 @@ class KitchenSinkDialogComponent {
 
     <div class="tw-my-6">
       <h1 bitTypography="h1">Bitwarden Kitchen Sink<bit-avatar text="Bit Warden"></bit-avatar></h1>
-      <a bitLink linkType="primary" href="#">This is a link</a>
+      <a bitLink href="#">This is a link</a>
       <p bitTypography="body1" class="tw-inline">
         &nbsp;and this is a link button popover trigger:&nbsp;
       </p>
       <button
         bitLink
-        linkType="primary"
         [bitPopoverTriggerFor]="myPopover"
         #triggerRef="popoverTrigger"
         type="button"