bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vicki League
2025-02-14 16:49:56 -05:00
committed by GitHub
parent 8d8c4eb29b
commit 07d6f9433f
6 changed files with 14 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
.storybook/preview.tsx
View File

@@ -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,
},