[CL-265] CL/extension refresh feature branch (#8696)

* [CL-245] Update palette to new light and dark theme colors (#8633)

* [CL-245] Add new color swatches to storybook (#8697)

* [CL-238] update typography (#8997)

* [CL-230] [CL-296] Update button styles (#9345)

* [CL-237] Update menu styles for extension refresh (#9525)

* [CL-267] Add 100-level color variants and update primary-600 (#9550)

* [CL-286] Update badge to use focus-visible instead of focus (#9551)

* [CL-250] Update badge styles for extension refresh (#9572)

* [CL-234] callout style refresh (#9920)

* [CL-233] Update form field styles (#9776)

* [CL-239][CL-251][CL-342] dialog style refresh (#10096)

* [CL-239] simple dialog style refresh

* [CL-342] fix text overflow in dialog; add story

* [CL-244] readonly fields (#10164)

* [CL-352] Fix Angular errors related to form element changes (#10211)

* [CL-273] Update styles for checkbox and form control (#10146)

* [CL-274] Update styling for radio button (#10333)

* [CL-338] Remove extra space in item content when end slot is empty (#10350)

* [CL-377] Fix extension style conflict for input background (#10351)

* [CL-271] Update styles for toggle (#10377)

* [CL-381] Update spacing around form elements (#10432)

* [CL-229] Update icon button styles (#10405)

* [CL-380] Remove hover state from disabled form fields (#10639)

* [CL-405] Allow toggle group input to be full width (#10658)

* [CL-389] Exclude end slot label content from truncation (#10508)

* [CL-383] Remove manual focus when password toggle is clicked (#10749)

* [CL-278][CL-391] misc bit-item style fixes (#10758)

* [CL-391] use pointer cursor on hover when link or button

* [CL-210] Change base font size from 14px to 16px (#10779)

* [CL-291] Finalize styling for chip select (#10771)

* [CL-257] update banner component styles (#10766)

* [CL-443] Fix sizing issues (#10893)

* [CL-445] Fix small sizing and spacing issues (#10962)

* [CL-382] Reduce element shifting on readonly hover (#10956)

* [CL-396] Update theme colors to new hexes (#10968)

* [CL-395] Remove text headers color (#10997)

* [CL-404] Switch to primary-600 for all focus indicators (#11015)

* [CL-397] Remove primary-500 (#11036)

* [CL-447] Ensure DM Sans displays correctly at all font weights (#11041)

* [CL-448] Scrollbar Styles (#11111)

* CL-252/update toast (#10996)

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

* [CL-446] Update hover state for unselected chip selects (#11172)

* [CL-454] Improve color a11y for toast and banner interactive elements (#11200)

* [CL-457] Center input text for select and multiselect (#11239)

* [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243)

* [CL-459] Fix chip behavior when opening menu while item is selected (#11227)

* [CL-388] Update vertical nav colors for new palette (#11226)

* scope styled scrollbar to only select elements (#11247)

* edit radio buttons to be block inputs and update spacing (#11291)

* [CL-453] Fix multiselect chip spacing and truncation (#11300)

* [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383)

* [CL-303] Prevent chip menu from running offscreen (#11348)

* [CL-476] Fix DM Sans font on Windows (#11409)

* implements scrollbar styles for firefox/chrome and safari (#11447)

* [CL-472] Fix search background color in extension (#11466)

* [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473)

* [CL-478] Remove underline on hover for most components (#11477)

* [CL-477] Remove focus styles for readonly input (#11510)

* [CL-487] Fix vault items virtual scroll height (#11581)

* [PM-8625] Increase popup width (#11686)

* [CL-494] Wrap long words in toggle group (#11659)

* [CL-13820] Add class to remove link underline (#11762)

* [CL-435] Prevent Windows extension from shifting (#11851)

* [CL-503] Add notification color variables (#11802)

* [PM-14043] Update size of toggle group label to fit more content (#11881)

* [CL-498] Set chip menu width minimum to chip select width (#11905)

---------

Co-authored-by: Will Martin <contact@willmartian.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com>
Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>

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

@@ -5,44 +5,37 @@ 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",
   "tw-border-none",
   "tw-rounded",
   "tw-transition",
+  "tw-no-underline",
   "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: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">