From 943cdc2fbd8c639016973ea04ff344bf402d0a6f Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Mon, 11 Aug 2025 15:04:53 -0400
Subject: [PATCH] [CL-753] Update popover styles (#15838)

---
 .../src/popover/default-positions.ts          |   2 +-
 .../src/popover/popover.component.css         |  10 +-
 .../src/popover/popover.component.html        |  13 +-
 libs/components/src/popover/popover.mdx       |   7 +
 .../components/src/popover/popover.stories.ts | 400 +++++++++++-------
 libs/components/src/tw-theme.css              |   2 +-
 6 files changed, 263 insertions(+), 171 deletions(-)

diff --git a/libs/components/src/popover/default-positions.ts b/libs/components/src/popover/default-positions.ts
index ae08c38a288..cf6adcb1f95 100644
--- a/libs/components/src/popover/default-positions.ts
+++ b/libs/components/src/popover/default-positions.ts
@@ -1,6 +1,6 @@
 import { ConnectedPosition } from "@angular/cdk/overlay";
 
-const ORIGIN_OFFSET_PX = 6;
+const ORIGIN_OFFSET_PX = 14;
 const OVERLAY_OFFSET_PX = 24;
 
 export type PositionIdentifier =
diff --git a/libs/components/src/popover/popover.component.css b/libs/components/src/popover/popover.component.css
index 548d1bea368..6077c051001 100644
--- a/libs/components/src/popover/popover.component.css
+++ b/libs/components/src/popover/popover.component.css
@@ -1,13 +1,13 @@
 .bit-popover-arrow {
-  @apply tw-absolute tw-z-10 tw-h-4 tw-w-4 tw-rotate-45 tw-border-solid tw-bg-background;
+  @apply tw-absolute tw-z-10 tw-size-4 tw-rotate-45 tw-bg-primary-100 tw-shadow-lg;
 }
 
 .bit-popover-right .bit-popover-arrow {
-  @apply tw-left-1 -tw-translate-x-1/2 tw-rounded-bl-sm tw-border-b tw-border-l tw-border-b-secondary-300 tw-border-l-secondary-300;
+  @apply tw-left-1 -tw-translate-x-3/4 tw-rounded-bl-sm;
 }
 
 .bit-popover-left .bit-popover-arrow {
-  @apply tw-right-1 tw-translate-x-1/2 tw-rounded-tr-sm tw-border-r tw-border-t tw-border-r-secondary-300 tw-border-t-secondary-300;
+  @apply tw-right-1 tw-translate-x-3/4 tw-rounded-tr-sm;
 }
 
 .bit-popover-right-start .bit-popover-arrow,
@@ -26,11 +26,11 @@
 }
 
 .bit-popover-below .bit-popover-arrow {
-  @apply tw-top-1 -tw-translate-y-1/2 tw-rounded-tl-sm tw-border-l tw-border-t tw-border-l-secondary-300 tw-border-t-secondary-300;
+  @apply tw-top-1 -tw-translate-y-3/4 tw-rounded-tl-sm;
 }
 
 .bit-popover-above .bit-popover-arrow {
-  @apply tw-bottom-1 tw-translate-y-1/2 tw-rounded-br-sm tw-border-b tw-border-r tw-border-b-secondary-300 tw-border-r-secondary-300;
+  @apply tw-bottom-1 tw-translate-y-3/4 tw-rounded-br-sm;
 }
 
 .bit-popover-below-start .bit-popover-arrow,
diff --git a/libs/components/src/popover/popover.component.html b/libs/components/src/popover/popover.component.html
index 03b6eaf77e3..328da284732 100644
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -1,8 +1,15 @@
 <ng-template>
-  <section cdkTrapFocus cdkTrapFocusAutoCapture class="tw-relative" role="dialog" aria-modal="true">
-    <div class="tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300">
+  <section
+    cdkTrapFocus
+    cdkTrapFocusAutoCapture
+    class="tw-relative"
+    role="dialog"
+    aria-modal="true"
+    [attr.aria-label]="title()"
+  >
+    <div class="tw-overflow-hidden tw-rounded-xl tw-shadow-lg">
       <div
-        class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
+        class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-primary-100 tw-pb-4 tw-pt-2 tw-text-main"
       >
         <div class="tw-me-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-ps-4">
           <h2 bitTypography="h5" class="tw-font-semibold tw-mt-1">
diff --git a/libs/components/src/popover/popover.mdx b/libs/components/src/popover/popover.mdx
index 17762acbdfb..2d18303ea78 100644
--- a/libs/components/src/popover/popover.mdx
+++ b/libs/components/src/popover/popover.mdx
@@ -26,6 +26,13 @@ page.
 
 <Primary />
 
+## Implementation Notes
+
+The popover should have even spacing above and below the content. If you are using element(s) inside
+the popover that have built-in bottom margin, please remove the bottom margin on the last element.
+
+<Canvas of={stories.OpenLongTitle} />
+
 ## Open on Page Load
 
 A Popover can be set to initially open on page load by setting `[popoverOpen]="true"` on the trigger
diff --git a/libs/components/src/popover/popover.stories.ts b/libs/components/src/popover/popover.stories.ts
index c8798d42ba2..5807252a4bb 100644
--- a/libs/components/src/popover/popover.stories.ts
+++ b/libs/components/src/popover/popover.stories.ts
@@ -1,4 +1,5 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { getByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -76,14 +77,15 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56">
+      <div class="tw-mt-44 tw-h-[400px]">
         <button
           type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
+          class="tw-border-none tw-bg-transparent tw-text-primary-600 tw-p-0"
           [bitPopoverTriggerFor]="myPopover"
           #triggerRef="popoverTrigger"
           aria-label="Open popover"
           title="Open popover"
+          bitLink
         >
           <i class="bwi bwi-question-circle"></i>
         </button>
@@ -91,74 +93,48 @@ export const Default: Story = {
       ${popoverContent}
       `,
   }),
-};
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
 
-export const Open: Story = {
-  render: (args) => ({
-    props: args,
-    template: /*html*/ `
-      <bit-popover [title]="'Example Title'" #myPopover="popoverComponent">
-        <div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
-        <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
-          <li>Dolor sit amet consectetur</li>
-          <li>Esse labore veniam tempora</li>
-          <li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
-        </ul>
-      </bit-popover>
-
-      <div class="tw-h-40">
-        <div class="cdk-overlay-pane bit-popover-right bit-popover-right-start">
-          <ng-container *ngTemplateOutlet="myPopover.templateRef"></ng-container>
-        </div>
-      </div>
-      `,
-  }),
+    await userEvent.click(button);
+  },
 };
 
 export const OpenLongTitle: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
-        <div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
-        <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
-          <li>Dolor sit amet consectetur</li>
-          <li>Esse labore veniam tempora</li>
-          <li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
-        </ul>
-      </bit-popover>
-
-      <div class="tw-h-40">
-        <div class="cdk-overlay-pane bit-popover-right bit-popover-right-start">
-          <ng-container *ngTemplateOutlet="myPopover.templateRef"></ng-container>
-        </div>
-      </div>
-      `,
-  }),
-};
-
-export const InitiallyOpen: Story = {
-  render: (args) => ({
-    props: args,
-    template: /*html*/ `
-      <div class="tw-mt-56">
+      <div class="tw-h-[400px] tw-mt-44">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
           [bitPopoverTriggerFor]="myPopover"
-          [popoverOpen]="true"
           #triggerRef="popoverTrigger"
           aria-label="Open popover"
           title="Open popover"
+          bitLink
         >
           <i class="bwi bwi-question-circle"></i>
         </button>
       </div>
-      ${popoverContent}
+
+      <bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover>
+        <div>Lorem ipsum dolor <a href="#" bitLink>adipisicing elit</a>.</div>
+        <ul class="tw-mt-2 tw-ps-4">
+          <li>Dolor sit amet consectetur</li>
+          <li>Esse labore veniam tempora</li>
+          <li>Adipisicing elit ipsum <a href="#" bitLink>iustolaborum</a></li>
+        </ul>
+        <p class="tw-mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      </bit-popover>
       `,
   }),
-  parameters: {
-    chromatic: { disableSnapshot: true },
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
   },
 };
 
@@ -169,7 +145,7 @@ export const RightStart: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56">
+      <div class="tw-h-[400px] tw-mt-44">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -178,6 +154,7 @@ export const RightStart: Story = {
           [position]="'${args.position}'"
           aria-label="Open popover"
           title="Open popover"
+          bitLink
         >
           <i class="bwi bwi-question-circle"></i>
         </button>
@@ -185,6 +162,12 @@ export const RightStart: Story = {
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const RightCenter: Story = {
@@ -194,7 +177,7 @@ export const RightCenter: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56">
+      <div class="tw-h-[400px] tw-mt-44">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -203,6 +186,7 @@ export const RightCenter: Story = {
           [position]="'${args.position}'"
           aria-label="Open popover"
           title="Open popover"
+          bitLink
         >
           <i class="bwi bwi-question-circle"></i>
         </button>
@@ -210,6 +194,12 @@ export const RightCenter: Story = {
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const RightEnd: Story = {
@@ -219,7 +209,7 @@ export const RightEnd: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56">
+      <div class="tw-h-[400px] tw-mt-44">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -228,6 +218,7 @@ export const RightEnd: Story = {
           [position]="'${args.position}'"
           aria-label="Open popover"
           title="Open popover"
+          bitLink
         >
           <i class="bwi bwi-question-circle"></i>
         </button>
@@ -235,6 +226,12 @@ export const RightEnd: Story = {
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const LeftStart: Story = {
@@ -244,22 +241,31 @@ export const LeftStart: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-end">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-end">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const LeftCenter: Story = {
@@ -269,22 +275,31 @@ export const LeftCenter: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-end">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-end">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 export const LeftEnd: Story = {
   args: {
@@ -293,22 +308,31 @@ export const LeftEnd: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-end">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-end">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const BelowStart: Story = {
@@ -318,22 +342,31 @@ export const BelowStart: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const BelowCenter: Story = {
@@ -343,22 +376,31 @@ export const BelowCenter: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const BelowEnd: Story = {
@@ -368,22 +410,31 @@ export const BelowEnd: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const AboveStart: Story = {
@@ -393,22 +444,31 @@ export const AboveStart: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const AboveCenter: Story = {
@@ -418,22 +478,31 @@ export const AboveCenter: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
 
 export const AboveEnd: Story = {
@@ -443,20 +512,29 @@ export const AboveEnd: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <div class="tw-mt-56 tw-flex tw-justify-center">
-        <button
-          type="button"
-          class="tw-border-none tw-bg-transparent tw-text-primary-600"
-          [bitPopoverTriggerFor]="myPopover"
-          #triggerRef="popoverTrigger"
-          [position]="'${args.position}'"
-          aria-label="Open popover"
-          title="Open popover"
-        >
-          <i class="bwi bwi-question-circle"></i>
-        </button>
+      <div class="tw-h-[400px] tw-mt-44">
+        <div class="tw-flex tw-justify-center">
+          <button
+            type="button"
+            class="tw-border-none tw-bg-transparent tw-text-primary-600"
+            [bitPopoverTriggerFor]="myPopover"
+            #triggerRef="popoverTrigger"
+            [position]="'${args.position}'"
+            aria-label="Open popover"
+            title="Open popover"
+            bitLink
+          >
+            <i class="bwi bwi-question-circle"></i>
+          </button>
+        </div>
       </div>
       ${popoverContent}
       `,
   }),
+  play: async (context) => {
+    const canvasEl = context.canvasElement;
+    const button = getByRole(canvasEl, "button");
+
+    await userEvent.click(button);
+  },
 };
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index fc85dcda3bd..2c00eaf7d6f 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -87,7 +87,7 @@
   --color-background-alt3: 48 57 70;
   --color-background-alt4: 18 26 39;
 
-  --color-primary-100: 26 39 78;
+  --color-primary-100: 29 46 99;
   --color-primary-300: 26 65 172;
   --color-primary-600: 101 171 255;
   --color-primary-700: 170 195 239;