[CL-275] Update link styles (#11174)

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

@@ -5,34 +5,23 @@ export type LinkType = "primary" | "secondary" | "contrast" | "light";
 const linkStyles: Record<LinkType, string[]> = {
   primary: [
     "!tw-text-primary-600",
-    "hover:!tw-text-primary-600",
-    "focus-visible:before:tw-ring-primary-700",
-    "disabled:!tw-text-primary-600/60",
-  ],
-  secondary: [
-    "!tw-text-main",
-    "hover:!tw-text-main",
-    "focus-visible:before:tw-ring-primary-700",
-    "disabled:!tw-text-muted/60",
+    "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"],
   contrast: [
     "!tw-text-contrast",
     "hover:!tw-text-contrast",
     "focus-visible:before:tw-ring-text-contrast",
-    "disabled:!tw-text-contrast/60",
-  ],
-  light: [
-    "!tw-text-alt2",
-    "hover:!tw-text-alt2",
-    "focus-visible:before:tw-ring-text-alt2",
-    "disabled:!tw-text-alt2/60",
   ],
+  light: ["!tw-text-alt2", "hover:!tw-text-alt2", "focus-visible:before:tw-ring-text-alt2"],
 };
 
 const commonStyles = [
   "tw-text-unset",
   "tw-leading-none",
-  "tw-p-0",
+  "tw-px-0",
+  "tw-py-0.5",
   "tw-font-semibold",
   "tw-bg-transparent",
   "tw-border-0",
@@ -43,6 +32,9 @@ const commonStyles = [
   "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:hover:tw-no-underline",
   "focus-visible:tw-outline-none",
   "focus-visible:tw-underline",
   "focus-visible:tw-decoration-1",

libs/components/src/link/link.mdx

@@ -10,23 +10,30 @@ import { LinkModule } from "@bitwarden/components";
 
 # Link / Text button
 
-Text Links and Buttons use the `primary-600` color and can use either the `<a>` or `<button>` tags.
-Choose which based on the action the button takes:
+Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action
+the button takes:
 
 - if navigating to a new page, use a `<a>`
-- if taking an action on the current page use a `<button>`
+- if taking an action on the current page, use a `<button>`
 
 Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions
 or show/hide additional form options.
 
 <Primary />
-<Controls />
+
+## Variants
+
+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
+- `contrast` - for high contrast against a dark background (or a light background in dark mode)
+- `light` - always a light color, even in dark mode
 
 ## Sizes
 
-There are 2 sizes for the component: default and small.
-
-Default uses `text-base` and small uses `text-xs`
+If you want to display a link with a smaller text size, apply the `tw-text-sm` class. This will
+match the `body2` variant of the Typography directive.
 
 ## With icons
 
@@ -40,4 +47,5 @@ show/hide additional content.
 
 ## Accessibility
 
-Make sure to only use the Link on backgrounds that maintain the WCAG color contrast ratios.
+- Make sure to only use the Link on backgrounds that maintain the WCAG color contrast ratios.
+- Be sure to select the correct element type (anchor or button) for the intended action.

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

@@ -26,10 +26,41 @@ export default {
 
 type Story = StoryObj<ButtonLinkDirective>;
 
+export const Default: Story = {
+  render: () => ({
+    template: /*html*/ `
+      <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">
+        <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">
+        <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">
+        <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">
+        <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>
+    `,
+  }),
+};
+
 export const Buttons: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
       <div class="tw-block tw-p-2">
         <button bitLink [linkType]="linkType">Button</button>
@@ -60,7 +91,7 @@ export const Buttons: Story = {
 export const Anchors: StoryObj<AnchorLinkDirective> = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
     <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
       <div class="tw-block tw-p-2">
         <a bitLink [linkType]="linkType" href="#">Anchor</a>
@@ -91,7 +122,7 @@ export const Anchors: StoryObj<AnchorLinkDirective> = {
 export const Inline: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <span class="tw-text-main">
         On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
       </span>
@@ -105,7 +136,7 @@ export const Inline: Story = {
 export const Disabled: Story = {
   render: (args) => ({
     props: args,
-    template: `
+    template: /*html*/ `
       <button bitLink disabled linkType="primary" class="tw-mr-2">Primary</button>
       <button bitLink disabled linkType="secondary" class="tw-mr-2">Secondary</button>
       <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">