mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-22 16:29:09 +01:00
[PM-2238] Add nord and solarize themes (#5491)
This commit is contained in:
Oscar Hinton
GitHub
parent
107c9052b8
commit
2a9efb2ebe
@ -6,19 +6,91 @@ import docJson from "../documentation.json";
|
||||
setCompodocJson(docJson);
|
||||
|
||||
const decorator = componentWrapperDecorator(
|
||||
(story) => `
|
||||
<ng-template #lightPreview>
|
||||
<div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
|
||||
</ng-template>
|
||||
<ng-template #darkPreview>
|
||||
<div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
|
||||
<ng-container *ngTemplateOutlet="darkPreview"></ng-container>`
|
||||
(story) => {
|
||||
return `
|
||||
<ng-template #lightPreview>
|
||||
<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'"
|
||||
>
|
||||
${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 }) => {
|
||||
return { theme: `${globals["theme"]}` };
|
||||
}
|
||||
);
|
||||
|
||||
const preview: Preview = {
|
||||
decorators: [decorator],
|
||||
globalTypes: {
|
||||
theme: {
|
||||
description: "Global theme for components",
|
||||
defaultValue: "both",
|
||||
toolbar: {
|
||||
title: "Theme",
|
||||
icon: "circlehollow",
|
||||
items: [
|
||||
{
|
||||
title: "Light & Dark",
|
||||
value: "both",
|
||||
icon: "sidebyside",
|
||||
},
|
||||
{
|
||||
title: "Light",
|
||||
value: "light",
|
||||
icon: "sun",
|
||||
},
|
||||
{
|
||||
title: "Dark",
|
||||
value: "dark",
|
||||
icon: "moon",
|
||||
},
|
||||
{
|
||||
title: "Nord",
|
||||
value: "nord",
|
||||
left: "⛰",
|
||||
},
|
||||
{
|
||||
title: "Solarized",
|
||||
value: "solarized",
|
||||
left: "☯",
|
||||
},
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
|
||||
@ -105,4 +105,6 @@ 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>
|
||||
|
||||
@ -80,4 +80,82 @@
|
||||
--tw-ring-offset-color: #1f242e;
|
||||
}
|
||||
|
||||
.theme_nord {
|
||||
--color-transparent-hover: rgb(255 255 255 / 0.12);
|
||||
|
||||
--color-background: 67 76 94;
|
||||
--color-background-alt: 59 66 82;
|
||||
--color-background-alt2: 76 86 106;
|
||||
--color-background-alt3: 76 86 106;
|
||||
--color-background-alt4: 67 76 94;
|
||||
|
||||
--color-primary-300: 108 153 166;
|
||||
--color-primary-500: 136 192 208;
|
||||
--color-primary-700: 160 224 242;
|
||||
|
||||
--color-secondary-100: 76 86 106;
|
||||
--color-secondary-300: 94 105 125;
|
||||
--color-secondary-500: 216 222 233;
|
||||
--color-secondary-700: 255 255 255;
|
||||
|
||||
--color-success-500: 163 190 140;
|
||||
--color-success-700: 144 170 122;
|
||||
|
||||
--color-danger-500: 228 129 139;
|
||||
--color-danger-700: 191 97 106;
|
||||
|
||||
--color-warning-500: 235 203 139;
|
||||
--color-warning-700: 210 181 121;
|
||||
|
||||
--color-info-500: 129 161 193;
|
||||
--color-info-700: 94 129 172;
|
||||
|
||||
--color-text-main: 229 233 240;
|
||||
--color-text-muted: 216 222 233;
|
||||
--color-text-contrast: 46 52 64;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 219 177 211;
|
||||
|
||||
--tw-ring-offset-color: #434c5e;
|
||||
}
|
||||
|
||||
.theme_solarized {
|
||||
--color-transparent-hover: rgb(255 255 255 / 0.12);
|
||||
|
||||
--color-background: 0 43 54;
|
||||
--color-background-alt: 7 54 66;
|
||||
--color-background-alt2: 31 72 87;
|
||||
--color-background-alt3: 31 72 87;
|
||||
--color-background-alt4: 0 43 54;
|
||||
|
||||
--color-primary-300: 42 161 152;
|
||||
--color-primary-500: 133 153 0;
|
||||
--color-primary-700: 192 203 123;
|
||||
|
||||
--color-secondary-100: 31 72 87;
|
||||
--color-secondary-300: 101 123 131;
|
||||
--color-secondary-500: 131 148 150;
|
||||
--color-secondary-700: 238 232 213;
|
||||
|
||||
--color-success-500: 133 153 0;
|
||||
--color-success-700: 192 203 123;
|
||||
|
||||
--color-danger-500: 220 50 47;
|
||||
--color-danger-700: 223 135 134;
|
||||
|
||||
--color-warning-500: 181 137 0;
|
||||
--color-warning-700: 220 189 92;
|
||||
|
||||
--color-info-500: 133 153 0;
|
||||
--color-info-700: 192 203 123;
|
||||
|
||||
--color-text-main: 253 246 227;
|
||||
--color-text-muted: 147 161 161;
|
||||
--color-text-contrast: 0 43 54;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 240 141 199;
|
||||
|
||||
--tw-ring-offset-color: #002b36;
|
||||
}
|
||||
|
||||
@import "./search/search.component.css";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user