refactor: update styling and color classes across components
- Changed error message styling in ICalImportModal to use new color classes. - Updated task completion styling in TaskListView to use new success color classes. - Modified selected styling in ContactListItem tests to reflect new background class. - Adjusted duplicate warning styling in ContactImportDialog to use new warning color classes. - Refactored background and border colors in CalendarInvitationBanner for various statuses. - Updated email list item and viewer components to use new warning and success color classes. - Refined styling for unread indicators in email components. - Enhanced error fallback styling in error components to use new warning color classes. - Updated filter rule modal button hover styles to use new destructive color classes. - Added experimental feature descriptions in Plugins and Themes settings. - Refined vacation settings validation warning styling to use new warning color classes. - Updated toast component styles to use new color classes for different states. - Introduced a new built-in theme 'Qui' with specific color variables. - Adjusted email security status colors to use new warning color classes.
This commit is contained in:
Linus Rath
@@ -1,5 +1,87 @@
|
||||
import type { InstalledTheme } from './plugin-types';
|
||||
|
||||
const quiCSS = `
|
||||
:root {
|
||||
--color-border: #e4e4e7;
|
||||
--color-input: #e4e4e7;
|
||||
--color-ring: #3b82f6;
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #09090b;
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-secondary: #f4f4f5;
|
||||
--color-secondary-foreground: #18181b;
|
||||
--color-muted: #f4f4f5;
|
||||
--color-muted-foreground: #71717a;
|
||||
--color-accent: #dbeafe;
|
||||
--color-accent-foreground: #1d4ed8;
|
||||
--color-destructive: #ef4444;
|
||||
--color-destructive-foreground: #ffffff;
|
||||
--color-popover: #ffffff;
|
||||
--color-popover-foreground: #09090b;
|
||||
--color-sidebar: #fafafa;
|
||||
--color-sidebar-foreground: #09090b;
|
||||
--color-sidebar-border: #e4e4e7;
|
||||
--color-sidebar-accent: #f4f4f5;
|
||||
--color-sidebar-accent-foreground: #18181b;
|
||||
--color-card: #ffffff;
|
||||
--color-card-foreground: #09090b;
|
||||
--color-success: #22c55e;
|
||||
--color-success-foreground: #ffffff;
|
||||
--color-warning: #eab308;
|
||||
--color-warning-foreground: #ffffff;
|
||||
--color-info: #3b82f6;
|
||||
--color-info-foreground: #ffffff;
|
||||
--color-selection: #dbeafe;
|
||||
--color-selection-foreground: #1d4ed8;
|
||||
--color-unread: #3b82f6;
|
||||
--color-chart-1: #3b82f6;
|
||||
--color-chart-2: #22c55e;
|
||||
--color-chart-3: #f59e0b;
|
||||
--color-chart-4: #ef4444;
|
||||
--color-chart-5: #8b5cf6;
|
||||
}
|
||||
.dark {
|
||||
--color-border: #27272a;
|
||||
--color-input: #27272a;
|
||||
--color-ring: #3b82f6;
|
||||
--color-background: #09090b;
|
||||
--color-foreground: #fafafa;
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-foreground: #ffffff;
|
||||
--color-secondary: #18181b;
|
||||
--color-secondary-foreground: #fafafa;
|
||||
--color-muted: #18181b;
|
||||
--color-muted-foreground: #a1a1aa;
|
||||
--color-accent: #172554;
|
||||
--color-accent-foreground: #93c5fd;
|
||||
--color-destructive: #ef4444;
|
||||
--color-destructive-foreground: #fafafa;
|
||||
--color-popover: #18181b;
|
||||
--color-popover-foreground: #fafafa;
|
||||
--color-sidebar: #09090b;
|
||||
--color-sidebar-foreground: #fafafa;
|
||||
--color-sidebar-border: #27272a;
|
||||
--color-sidebar-accent: #18181b;
|
||||
--color-sidebar-accent-foreground: #fafafa;
|
||||
--color-card: #141414;
|
||||
--color-card-foreground: #fafafa;
|
||||
--color-success: #16a34a;
|
||||
--color-success-foreground: #ffffff;
|
||||
--color-warning: #ca8a04;
|
||||
--color-warning-foreground: #ffffff;
|
||||
--color-info: #60a5fa;
|
||||
--color-info-foreground: #ffffff;
|
||||
--color-selection: rgba(59, 130, 246, 0.25);
|
||||
--color-selection-foreground: #93c5fd;
|
||||
--color-unread: #60a5fa;
|
||||
--color-chart-1: #60a5fa;
|
||||
--color-chart-2: #4ade80;
|
||||
--color-chart-3: #fbbf24;
|
||||
--color-chart-4: #f87171;
|
||||
--color-chart-5: #a78bfa;
|
||||
}`;
|
||||
|
||||
const nordCSS = `
|
||||
:root {
|
||||
--color-border: #d8dee9;
|
||||
@@ -19,6 +101,27 @@ const nordCSS = `
|
||||
--color-destructive-foreground: #eceff4;
|
||||
--color-popover: #eceff4;
|
||||
--color-popover-foreground: #2e3440;
|
||||
--color-sidebar: #e5e9f0;
|
||||
--color-sidebar-foreground: #2e3440;
|
||||
--color-sidebar-border: #d8dee9;
|
||||
--color-sidebar-accent: #d8dee9;
|
||||
--color-sidebar-accent-foreground: #2e3440;
|
||||
--color-card: #eceff4;
|
||||
--color-card-foreground: #2e3440;
|
||||
--color-success: #a3be8c;
|
||||
--color-success-foreground: #2e3440;
|
||||
--color-warning: #ebcb8b;
|
||||
--color-warning-foreground: #2e3440;
|
||||
--color-info: #81a1c1;
|
||||
--color-info-foreground: #eceff4;
|
||||
--color-selection: #d8dee9;
|
||||
--color-selection-foreground: #5e81ac;
|
||||
--color-unread: #5e81ac;
|
||||
--color-chart-1: #5e81ac;
|
||||
--color-chart-2: #a3be8c;
|
||||
--color-chart-3: #ebcb8b;
|
||||
--color-chart-4: #bf616a;
|
||||
--color-chart-5: #b48ead;
|
||||
}
|
||||
.dark {
|
||||
--color-border: #3b4252;
|
||||
@@ -38,6 +141,27 @@ const nordCSS = `
|
||||
--color-destructive-foreground: #eceff4;
|
||||
--color-popover: #3b4252;
|
||||
--color-popover-foreground: #eceff4;
|
||||
--color-sidebar: #2e3440;
|
||||
--color-sidebar-foreground: #eceff4;
|
||||
--color-sidebar-border: #3b4252;
|
||||
--color-sidebar-accent: #3b4252;
|
||||
--color-sidebar-accent-foreground: #eceff4;
|
||||
--color-card: #3b4252;
|
||||
--color-card-foreground: #eceff4;
|
||||
--color-success: #a3be8c;
|
||||
--color-success-foreground: #2e3440;
|
||||
--color-warning: #ebcb8b;
|
||||
--color-warning-foreground: #2e3440;
|
||||
--color-info: #88c0d0;
|
||||
--color-info-foreground: #2e3440;
|
||||
--color-selection: rgba(136, 192, 208, 0.2);
|
||||
--color-selection-foreground: #88c0d0;
|
||||
--color-unread: #88c0d0;
|
||||
--color-chart-1: #88c0d0;
|
||||
--color-chart-2: #a3be8c;
|
||||
--color-chart-3: #ebcb8b;
|
||||
--color-chart-4: #bf616a;
|
||||
--color-chart-5: #b48ead;
|
||||
}`;
|
||||
|
||||
const catppuccinCSS = `
|
||||
@@ -59,6 +183,27 @@ const catppuccinCSS = `
|
||||
--color-destructive-foreground: #eff1f5;
|
||||
--color-popover: #eff1f5;
|
||||
--color-popover-foreground: #4c4f69;
|
||||
--color-sidebar: #e6e9ef;
|
||||
--color-sidebar-foreground: #4c4f69;
|
||||
--color-sidebar-border: #ccd0da;
|
||||
--color-sidebar-accent: #dce0e8;
|
||||
--color-sidebar-accent-foreground: #4c4f69;
|
||||
--color-card: #eff1f5;
|
||||
--color-card-foreground: #4c4f69;
|
||||
--color-success: #40a02b;
|
||||
--color-success-foreground: #eff1f5;
|
||||
--color-warning: #df8e1d;
|
||||
--color-warning-foreground: #eff1f5;
|
||||
--color-info: #1e66f5;
|
||||
--color-info-foreground: #eff1f5;
|
||||
--color-selection: #dce0e8;
|
||||
--color-selection-foreground: #8839ef;
|
||||
--color-unread: #8839ef;
|
||||
--color-chart-1: #8839ef;
|
||||
--color-chart-2: #40a02b;
|
||||
--color-chart-3: #df8e1d;
|
||||
--color-chart-4: #d20f39;
|
||||
--color-chart-5: #1e66f5;
|
||||
}
|
||||
.dark {
|
||||
--color-border: #45475a;
|
||||
@@ -78,6 +223,27 @@ const catppuccinCSS = `
|
||||
--color-destructive-foreground: #1e1e2e;
|
||||
--color-popover: #313244;
|
||||
--color-popover-foreground: #cdd6f4;
|
||||
--color-sidebar: #1e1e2e;
|
||||
--color-sidebar-foreground: #cdd6f4;
|
||||
--color-sidebar-border: #45475a;
|
||||
--color-sidebar-accent: #313244;
|
||||
--color-sidebar-accent-foreground: #cdd6f4;
|
||||
--color-card: #313244;
|
||||
--color-card-foreground: #cdd6f4;
|
||||
--color-success: #a6e3a1;
|
||||
--color-success-foreground: #1e1e2e;
|
||||
--color-warning: #f9e2af;
|
||||
--color-warning-foreground: #1e1e2e;
|
||||
--color-info: #89b4fa;
|
||||
--color-info-foreground: #1e1e2e;
|
||||
--color-selection: rgba(203, 166, 247, 0.2);
|
||||
--color-selection-foreground: #cba6f7;
|
||||
--color-unread: #cba6f7;
|
||||
--color-chart-1: #cba6f7;
|
||||
--color-chart-2: #a6e3a1;
|
||||
--color-chart-3: #f9e2af;
|
||||
--color-chart-4: #f38ba8;
|
||||
--color-chart-5: #89b4fa;
|
||||
}`;
|
||||
|
||||
const solarizedCSS = `
|
||||
@@ -99,6 +265,27 @@ const solarizedCSS = `
|
||||
--color-destructive-foreground: #fdf6e3;
|
||||
--color-popover: #fdf6e3;
|
||||
--color-popover-foreground: #657b83;
|
||||
--color-sidebar: #eee8d5;
|
||||
--color-sidebar-foreground: #657b83;
|
||||
--color-sidebar-border: #eee8d5;
|
||||
--color-sidebar-accent: #eee8d5;
|
||||
--color-sidebar-accent-foreground: #586e75;
|
||||
--color-card: #fdf6e3;
|
||||
--color-card-foreground: #657b83;
|
||||
--color-success: #859900;
|
||||
--color-success-foreground: #fdf6e3;
|
||||
--color-warning: #b58900;
|
||||
--color-warning-foreground: #fdf6e3;
|
||||
--color-info: #268bd2;
|
||||
--color-info-foreground: #fdf6e3;
|
||||
--color-selection: #eee8d5;
|
||||
--color-selection-foreground: #268bd2;
|
||||
--color-unread: #268bd2;
|
||||
--color-chart-1: #268bd2;
|
||||
--color-chart-2: #859900;
|
||||
--color-chart-3: #b58900;
|
||||
--color-chart-4: #dc322f;
|
||||
--color-chart-5: #6c71c4;
|
||||
}
|
||||
.dark {
|
||||
--color-border: #073642;
|
||||
@@ -118,9 +305,41 @@ const solarizedCSS = `
|
||||
--color-destructive-foreground: #fdf6e3;
|
||||
--color-popover: #073642;
|
||||
--color-popover-foreground: #93a1a1;
|
||||
--color-sidebar: #002b36;
|
||||
--color-sidebar-foreground: #839496;
|
||||
--color-sidebar-border: #073642;
|
||||
--color-sidebar-accent: #073642;
|
||||
--color-sidebar-accent-foreground: #93a1a1;
|
||||
--color-card: #073642;
|
||||
--color-card-foreground: #93a1a1;
|
||||
--color-success: #859900;
|
||||
--color-success-foreground: #002b36;
|
||||
--color-warning: #b58900;
|
||||
--color-warning-foreground: #002b36;
|
||||
--color-info: #268bd2;
|
||||
--color-info-foreground: #002b36;
|
||||
--color-selection: rgba(38, 139, 210, 0.2);
|
||||
--color-selection-foreground: #268bd2;
|
||||
--color-unread: #268bd2;
|
||||
--color-chart-1: #268bd2;
|
||||
--color-chart-2: #859900;
|
||||
--color-chart-3: #b58900;
|
||||
--color-chart-4: #dc322f;
|
||||
--color-chart-5: #6c71c4;
|
||||
}`;
|
||||
|
||||
export const BUILTIN_THEMES: InstalledTheme[] = [
|
||||
{
|
||||
id: 'builtin-qui',
|
||||
name: 'Qui',
|
||||
version: '1.0.0',
|
||||
author: 'Built-in',
|
||||
description: 'Clean, modern zinc-and-blue theme inspired by autobrr/qui',
|
||||
css: quiCSS,
|
||||
variants: ['light', 'dark'],
|
||||
enabled: true,
|
||||
builtIn: true,
|
||||
},
|
||||
{
|
||||
id: 'builtin-nord',
|
||||
name: 'Nord',
|
||||
|
||||
Reference in New Issue
Block a user