mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-11 07:56:50 +02:00
7f450bc260
CRITICAL FIX: Plan 9 theme had a catastrophic contrast failure where tooltip text (HSL 60, 100%, 96%) was nearly identical to the background (HSL 60, 100%, 94%), creating a ~1:1 contrast ratio that made tooltips completely unreadable. Changes: - Added dedicated `tooltip` and `tooltipForeground` colors to theme system - Updated all three built-in themes (dark, light, plan9) with proper colors - Modified tooltip component to use new colors instead of primary/primary-foreground - Added rounded corners and shadow to tooltips for better visual separation Theme-specific tooltip colors: - Dark theme: Dark blue-gray background (#217.2 32.6% 17.5%) with light text - Light theme: Very dark background (#222.2 47.4% 11.2%) with light text - Plan 9 theme: Dark blue (#220 50% 25%) with pale yellow text All tooltip colors now meet WCAG AA standards (4.5:1+ contrast ratio) and are clearly visible against their respective theme backgrounds. Files modified: - src/lib/themes/types.ts: Added tooltip color types - src/lib/themes/builtin/*.ts: Added tooltip colors to all themes - src/lib/themes/apply.ts: Apply tooltip CSS variables on theme change - src/index.css: Added tooltip CSS variables for light/dark themes - tailwind.config.js: Exposed tooltip colors as Tailwind utilities - src/components/ui/tooltip.tsx: Use new tooltip colors with improved styling
468 lines
12 KiB
CSS
468 lines
12 KiB
CSS
/* Prism syntax highlighting theme */
|
|
@import "./styles/prism-theme.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Custom scrollbar styling - uses theme variables */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--scrollbar-thumb)) hsl(var(--scrollbar-track));
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: hsl(var(--scrollbar-track));
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--scrollbar-thumb));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--scrollbar-thumb-hover));
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Core colors - light theme defaults (overridden by ThemeProvider) */
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 222.2 47.4% 11.2%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 222.2 84% 4.9%;
|
|
--radius: 0.5rem;
|
|
|
|
/* Status colors */
|
|
--success: 142 76% 36%;
|
|
--warning: 45 93% 47%;
|
|
--info: 199 89% 48%;
|
|
|
|
/* Nostr-specific colors */
|
|
--zap: 45 93% 40%;
|
|
--live: 0 72% 45%;
|
|
|
|
/* UI highlight (active user, self-references) */
|
|
--highlight: 25 90% 35%;
|
|
|
|
/* Tooltip colors */
|
|
--tooltip: 222.2 47.4% 11.2%;
|
|
--tooltip-foreground: 210 40% 98%;
|
|
|
|
/* Syntax highlighting */
|
|
--syntax-comment: 215.4 16.3% 46.9%;
|
|
--syntax-punctuation: 222.2 84% 30%;
|
|
--syntax-property: 222.2 47.4% 11.2%;
|
|
--syntax-string: 142 60% 30%;
|
|
--syntax-keyword: 270 80% 50%;
|
|
--syntax-function: 222.2 47.4% 11.2%;
|
|
--syntax-variable: 222.2 84% 4.9%;
|
|
--syntax-operator: 222.2 84% 20%;
|
|
|
|
/* Diff colors */
|
|
--diff-inserted: 142 60% 30%;
|
|
--diff-inserted-bg: 142 60% 50% / 0.15;
|
|
--diff-deleted: 0 70% 45%;
|
|
--diff-deleted-bg: 0 70% 50% / 0.15;
|
|
--diff-meta: 199 80% 40%;
|
|
--diff-meta-bg: 199 80% 50% / 0.1;
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-thumb: 222.2 84% 4.9% / 0.2;
|
|
--scrollbar-thumb-hover: 222.2 84% 4.9% / 0.3;
|
|
--scrollbar-track: 0 0% 0% / 0;
|
|
|
|
/* Gradient colors (RGB values) */
|
|
--gradient-1: 234 179 8;
|
|
--gradient-2: 249 115 22;
|
|
--gradient-3: 147 51 234;
|
|
--gradient-4: 6 182 212;
|
|
}
|
|
|
|
/* Dark theme - applied via .dark class or ThemeProvider */
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 210 40% 98%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 70%;
|
|
--accent: 270 100% 70%;
|
|
--accent-foreground: 222.2 84% 4.9%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 212.7 26.8% 83.9%;
|
|
|
|
/* Status colors */
|
|
--success: 142 76% 36%;
|
|
--warning: 45 93% 47%;
|
|
--info: 199 89% 48%;
|
|
|
|
/* Nostr-specific colors */
|
|
--zap: 45 93% 58%;
|
|
--live: 0 72% 51%;
|
|
|
|
/* UI highlight (active user, self-references) */
|
|
--highlight: 27 96% 61%;
|
|
|
|
/* Tooltip colors */
|
|
--tooltip: 217.2 32.6% 17.5%;
|
|
--tooltip-foreground: 210 40% 98%;
|
|
|
|
/* Syntax highlighting */
|
|
--syntax-comment: 215 20.2% 70%;
|
|
--syntax-punctuation: 210 40% 70%;
|
|
--syntax-property: 210 40% 98%;
|
|
--syntax-string: 215 20.2% 70%;
|
|
--syntax-keyword: 210 40% 98%;
|
|
--syntax-function: 210 40% 98%;
|
|
--syntax-variable: 210 40% 98%;
|
|
--syntax-operator: 210 40% 98%;
|
|
|
|
/* Diff colors */
|
|
--diff-inserted: 134 60% 76%;
|
|
--diff-inserted-bg: 145 63% 42% / 0.1;
|
|
--diff-deleted: 0 100% 76%;
|
|
--diff-deleted-bg: 0 100% 60% / 0.1;
|
|
--diff-meta: 190 77% 70%;
|
|
--diff-meta-bg: 190 77% 70% / 0.08;
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-thumb: 0 0% 100% / 0.2;
|
|
--scrollbar-thumb-hover: 0 0% 100% / 0.3;
|
|
--scrollbar-track: 0 0% 0% / 0;
|
|
|
|
/* Gradient colors (RGB values) */
|
|
--gradient-1: 250 204 21;
|
|
--gradient-2: 251 146 60;
|
|
--gradient-3: 168 85 247;
|
|
--gradient-4: 34 211 238;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground font-mono;
|
|
/* iOS PWA safe area insets for notch support */
|
|
padding-top: env(safe-area-inset-top, 0);
|
|
padding-right: env(safe-area-inset-right, 0);
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
padding-left: env(safe-area-inset-left, 0);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.text-grimoire-gradient {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgb(var(--gradient-1)),
|
|
rgb(var(--gradient-2)),
|
|
rgb(var(--gradient-3)),
|
|
rgb(var(--gradient-4))
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* react-medium-image-zoom theme customization - uses background with opacity */
|
|
[data-rmiz-modal-overlay] {
|
|
background-color: hsl(var(--background) / 0.92) !important;
|
|
}
|
|
|
|
[data-rmiz-modal-content] {
|
|
box-shadow: 0 0 40px hsl(var(--foreground) / 0.2);
|
|
}
|
|
|
|
/* React Mosaic Theme Customization */
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* Smooth animations for window resizing and repositioning */
|
|
/* Only animate during preset application, not manual resize/drag */
|
|
body.animating-layout
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-tile {
|
|
transition:
|
|
width 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
|
|
height 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
|
|
top 150ms cubic-bezier(0.25, 0.1, 0.25, 1),
|
|
left 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
contain: layout; /* Isolate layout calculations for better performance */
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window
|
|
.mosaic-window-toolbar {
|
|
background: hsl(var(--background));
|
|
border: none;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window
|
|
.mosaic-window-title {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-window {
|
|
background: hsl(var(--background));
|
|
outline: none;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-window * {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-window::before,
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-window::after {
|
|
display: none;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme.bp4-dark .mosaic-window,
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme.bp4-dark .mosaic-preview {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window
|
|
.mosaic-window-toolbar {
|
|
background: hsl(var(--muted));
|
|
border: none;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
color: hsl(var(--foreground));
|
|
height: 30px;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window
|
|
.mosaic-window-title {
|
|
color: hsl(var(--foreground));
|
|
font-family: inherit;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window
|
|
.mosaic-window-body {
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-window-controls {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window-controls:hover {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window-toolbar
|
|
.separator {
|
|
border-left: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme
|
|
.mosaic-window-body-overlay {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-preview {
|
|
background: hsl(var(--accent) / 0.3);
|
|
border: 2px solid hsl(var(--primary));
|
|
outline: none;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-drop-target {
|
|
border: 2px solid var(--border);
|
|
outline: none;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-split:hover {
|
|
background: hsl(var(--primary));
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-split.-row {
|
|
width: 4px;
|
|
margin: 0 -2px;
|
|
}
|
|
|
|
.mosaic.mosaic-blueprint-theme.mosaic-blueprint-theme .mosaic-split.-column {
|
|
height: 4px;
|
|
margin: -2px 0;
|
|
}
|
|
|
|
/* Accessibility: Focus indicators for keyboard navigation */
|
|
@layer base {
|
|
/* Focus-visible for buttons and interactive elements */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
[role="button"]:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Focus-visible for input elements */
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 0;
|
|
}
|
|
|
|
/* Focus-visible for command launcher items */
|
|
[cmdk-item]:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Focus-visible for tab buttons */
|
|
.tabbar-button:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
/* TipTap Editor Styles */
|
|
.ProseMirror {
|
|
min-height: 1.25rem;
|
|
line-height: 1.25rem;
|
|
position: relative;
|
|
}
|
|
|
|
.ProseMirror:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror p {
|
|
margin: 0;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.ProseMirror p.is-editor-empty:first-child::before {
|
|
content: attr(data-placeholder);
|
|
color: hsl(var(--muted-foreground));
|
|
pointer-events: none;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* Mention styles */
|
|
.ProseMirror .mention {
|
|
color: hsl(var(--primary));
|
|
background-color: hsl(var(--primary) / 0.1);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 0.25rem;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ProseMirror .mention:hover {
|
|
background-color: hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
/* Emoji styles */
|
|
.ProseMirror .emoji-node {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ProseMirror .emoji-image {
|
|
height: 1.2em;
|
|
width: auto;
|
|
vertical-align: middle;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.ProseMirror .emoji-unicode {
|
|
font-size: 1.1em;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Nostr event preview styles */
|
|
.ProseMirror .nostr-event-preview {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.375rem;
|
|
background-color: hsl(var(--primary) / 0.1);
|
|
border: 1px solid hsl(var(--primary) / 0.3);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
vertical-align: middle;
|
|
cursor: default;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.ProseMirror .nostr-event-preview:hover {
|
|
background-color: hsl(var(--primary) / 0.15);
|
|
}
|
|
|
|
/* Hide scrollbar utility */
|
|
.hide-scrollbar {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari/Opera */
|
|
}
|
|
|
|
/* Hide scrollbar in RichEditor */
|
|
.rich-editor .ProseMirror {
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
.rich-editor .ProseMirror::-webkit-scrollbar {
|
|
display: none; /* Chrome/Safari/Opera */
|
|
}
|