[CL-317][CL-502] Remove Storybook combined Light + Dark theme, Nord theme, and Solarized theme (#13360)

.storybook/preview.tsx

@@ -7,46 +7,25 @@ setCompodocJson(docJson);
 
 const decorator = componentWrapperDecorator(
   (story) => {
-    return `
-    <ng-template #lightPreview>
+    return /*html*/ `
       <div
-        class="theme_light tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff] tw-px-5 tw-py-10 tw-mb-5"
-        *ngIf="theme == 'both' || theme == 'light'"
+        class="tw-border-2 tw-border-solid tw-px-5 tw-py-10"
+        [ngClass]="{
+          'tw-bg-[#ffffff] tw-border-secondary-300': theme === 'light',
+          'tw-bg-[#1f242e]': theme === 'dark',
+        }"
       >
         ${story}
       </div>
-    </ng-template>
-    <ng-template #darkPreview>
-      <div
-        class="theme_dark tw-border-2 tw-border-solid tw-bg-[#1f242e] tw-px-5 tw-py-10"
-        *ngIf="theme == 'both' || theme == 'dark'"
-      >
-        ${story}
-      </div>
-    </ng-template>
-    <ng-template #nordPreview>
-      <div
-        class="theme_nord tw-border-2 tw-border-solid tw-bg-[#434C5E] tw-px-5 tw-py-10"
-        *ngIf="theme == 'nord'">
-        ${story}
-      </div>
-    </ng-template>
-    <ng-template #solarizedPreview>
-      <div
-        class="theme_solarized tw-border-2 tw-border-solid tw-bg-[#002b36] tw-px-5 tw-py-10"
-        *ngIf="theme == 'solarized'"
-      >
-        ${story}
-      </div>
-    </ng-template>
-
-    <ng-container *ngTemplateOutlet="lightPreview"></ng-container>
-    <ng-container *ngTemplateOutlet="darkPreview"></ng-container>
-    <ng-container *ngTemplateOutlet="nordPreview"></ng-container>
-    <ng-container *ngTemplateOutlet="solarizedPreview"></ng-container>
   `;
   },
   ({ globals }) => {
+    // We need to add the theme class to the body to support body-appended content like popovers and menus
+    document.body.classList.remove("theme_light");
+    document.body.classList.remove("theme_dark");
+
+    document.body.classList.add(`theme_${globals["theme"]}`);
+
     return { theme: `${globals["theme"]}` };
   },
 );
@@ -56,16 +35,11 @@ const preview: Preview = {
   globalTypes: {
     theme: {
       description: "Global theme for components",
-      defaultValue: "both",
+      defaultValue: "light",
       toolbar: {
         title: "Theme",
         icon: "circlehollow",
         items: [
-          {
-            title: "Light & Dark",
-            value: "both",
-            icon: "sidebyside",
-          },
           {
             title: "Light",
             value: "light",
@@ -76,16 +50,6 @@ const preview: Preview = {
             value: "dark",
             icon: "moon",
           },
-          {
-            title: "Nord",
-            value: "nord",
-            left: "⛰",
-          },
-          {
-            title: "Solarized",
-            value: "solarized",
-            left: "☯",
-          },
         ],
         dynamicTitle: true,
       },

apps/browser/src/platform/popup/layout/popup-layout.mdx

@@ -4,9 +4,6 @@ import * as stories from "./popup-layout.stories";
 
 <Meta of={stories} />
 
-Please note that because these stories use `router-outlet`, there are issues with rendering content
-when Light & Dark mode is selected. The stories are best viewed by selecting one color mode.
-
 # Popup Tab Navigation
 
 The popup tab navigation component composes together the popup page and the bottom tab navigation

libs/auth/src/angular/anon-layout/anon-layout-wrapper.mdx

@@ -6,10 +6,6 @@ import * as stories from "./anon-layout-wrapper.stories";
 
 # Anon Layout Wrapper
 
-NOTE: These stories will treat "Light & Dark" mode as "Light" mode. This is done to avoid a bug with
-the way that we render the same component twice in the same iframe and how that interacts with the
-`router-outlet`.
-
 ## Anon Layout Wrapper Component
 
 The auth owned `AnonLayoutWrapperComponent` orchestrates routing configuration data and feeds it

libs/components/src/stories/colors.mdx

@@ -13,7 +13,7 @@ export const Table = (args) => (
   <table class={"border tw-table-auto !tw-text-main " + args.class}>
     <thead>
       <tr>
-        <th>General usage</th>
+        <th class="tw-w-40">General usage</th>
         <th class="tw-w-20"></th>
       </tr>
     </thead>
@@ -119,6 +119,4 @@ Below are all the permited colors. Please consult design before considering addi
 <div class="tw-flex tw-space-x-4">
   <Table />
   <Table class="theme_dark tw-bg-background" />
-  <Table class="theme_nord tw-bg-background" />
-  <Table class="theme_solarize tw-bg-background" />
 </div>

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -56,12 +56,6 @@ class KitchenSinkDialog {
         isolated stories. The stories for the Kitchen Sink exist to be tested by the Chromatic UI
         tests.
       </p>
-
-      <p bitTypography="body1">
-        NOTE: These stories will treat "Light & Dark" mode as "Light" mode. This is done to avoid a
-        bug with the way that we render the same component twice in the same iframe and how that
-        interacts with the <code>router-outlet</code>.
-      </p>
     </bit-callout>
 
     <bit-tab-group label="Main content tabs" class="tw-text-main">

libs/components/src/stories/kitchen-sink/kitchen-sink.mdx

@@ -9,7 +9,3 @@ import * as stories from "./kitchen-sink.stories";
 The purpose of this story is to compose together all of our components. When snapshot tests run,
 we'll be able to spot-check visual changes in a more app-like environment than just the isolated
 stories. The stories for the Kitchen Sink exist to be tested by the Chromatic UI tests.
-
-NOTE: These stories will treat "Light & Dark" mode as "Light" mode. This is done to avoid a bug with
-the way that we render the same component twice in the same iframe and how that interacts with the
-`router-outlet`.