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

apps/web/src/app/auth/settings/verify-email.component.html

@@ -3,7 +3,7 @@
   <button
     id="sendBtn"
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     bitButton
     type="button"
     buttonType="unstyled"

apps/web/src/app/vault/individual-vault/vault-banners/vault-banners.component.html

@@ -8,7 +8,7 @@
   {{ "updateBrowserDesc" | i18n }}
   <a
     bitLink
-    linkType="contrast"
+    linkType="secondary"
     target="_blank"
     href="https://browser-update.org/update-browser.html"
     rel="noreferrer noopener"
@@ -25,7 +25,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.KDFSettings)"
 >
   {{ "lowKDFIterationsBanner" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/security/security-keys">
+  <a bitLink linkType="secondary" routerLink="/settings/security/security-keys">
     {{ "changeKDFSettings" | i18n }}
   </a>
 </bit-banner>
@@ -46,7 +46,7 @@
   (onClose)="dismissBanner(VisibleVaultBanner.Premium)"
 >
   {{ "premiumUpgradeUnlockFeatures" | i18n }}
-  <a bitLink linkType="contrast" routerLink="/settings/subscription/premium">
+  <a bitLink linkType="secondary" routerLink="/settings/subscription/premium">
     {{ "goPremium" | i18n }}
   </a>
 </bit-banner>

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -50,7 +50,7 @@
     <a
       href="https://bitwarden.com/contact/"
       bitLink
-      linkType="contrast"
+      linkType="secondary"
       target="_blank"
       rel="noreferrer"
     >

libs/components/src/banner/banner.component.html

@@ -1,5 +1,5 @@
 <div
-  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-contrast tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
+  class="tw-flex tw-items-center tw-gap-2 tw-p-2 tw-pl-4 tw-text-main tw-border-transparent tw-bg-clip-padding tw-border-solid tw-border-b tw-border-0"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
@@ -12,7 +12,7 @@
     *ngIf="showClose"
     type="button"
     bitIconButton="bwi-close"
-    buttonType="contrast"
+    buttonType="main"
     size="default"
     (click)="onClose.emit()"
     [attr.title]="'close' | i18n"

libs/components/src/banner/banner.component.ts

@@ -28,13 +28,13 @@ export class BannerComponent implements OnInit {
   get bannerClass() {
     switch (this.bannerType) {
       case "danger":
-        return "tw-bg-danger-600";
+        return "tw-bg-danger-100 tw-border-b-danger-700";
       case "info":
-        return "tw-bg-info-600";
+        return "tw-bg-info-100 tw-border-b-info-700";
       case "premium":
-        return "tw-bg-success-600";
+        return "tw-bg-success-100 tw-border-b-success-700";
       case "warning":
-        return "tw-bg-warning-600";
+        return "tw-bg-warning-100 tw-border-b-warning-700";
     }
   }
 }

libs/components/src/banner/banner.mdx

@@ -15,7 +15,8 @@ persist across all pages a user navigates to.
 - Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
   effectiveness may decrease if too many are used.
 - Avoid stacking multiple banners.
-- Banners support a button link (text button).
+- Banners can contain a button or anchor that uses the `bitLink` directive with
+  `linkType="secondary"`.
 
 <Primary />
 

libs/components/src/banner/banner.stories.ts

@@ -53,7 +53,7 @@ export const Premium: Story = {
     template: `
       <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
-        <button bitLink linkType="contrast">Button</button>
+        <button bitLink linkType="secondary">Button</button>
       </bit-banner>
       `,
   }),