[CL-725] dialog adjustments (#15660)

* update dialog spacing/borders

* update scroll bottom threshold

* add shadow to dialog

* adjust simple dialog shadow

* update scroll util comment

* add background input to other dialog stories

* assign initial value to isScrollable

* add larger padding on alt background content

* update tab border color

* update tab content padding

* update tab content spacing

* revert tab border color change

* bring back tab border color changes

* update web header border to match new tab border

* add background to props in story

libs/components/src/tabs/shared/tab-header.component.ts

@@ -7,7 +7,7 @@ import { Component } from "@angular/core";
   selector: "bit-tab-header",
   host: {
     class:
-      "tw-h-16 tw-ps-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300",
+      "tw-h-16 tw-ps-4 tw-bg-background-alt tw-flex tw-items-end tw-border-0 tw-border-b tw-border-solid tw-border-secondary-100",
   },
   template: `<ng-content></ng-content>`,
 })

libs/components/src/tabs/shared/tab-list-item.directive.ts

@@ -84,7 +84,7 @@ export class TabListItemDirective implements FocusableOption {
   get activeClassList(): string[] {
     return [
       "tw--mb-px",
-      "tw-border-x-secondary-300",
+      "tw-border-x-secondary-100",
       "tw-border-t-primary-600",
       "tw-border-b",
       "tw-border-b-background",

libs/components/src/tabs/tab-group/tab-group.component.html

@@ -29,7 +29,7 @@
     }
   </div>
 </bit-tab-header>
-<div class="tw-px-4 tw-pt-5">
+<div class="tw-px-6 tw-pt-5">
   @for (tab of tabs; track tab; let i = $index) {
     <bit-tab-body
       role="tabpanel"