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

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>
       `,
   }),