mirror of
https://github.com/prodigist/ReactiveNotes.git
synced 2026-07-22 12:30:26 +00:00
Overhauled CSS styling and added Tailwind Support
This commit is contained in:
Elias
parent
72a620b59b
commit
34fb6894e2
3 changed files with 2178 additions and 41 deletions
137
main.tsx
137
main.tsx
|
|
@ -3,19 +3,13 @@ import { createRoot } from 'react-dom/client';
|
|||
import { transform } from '@babel/standalone';
|
||||
import * as React from 'react';
|
||||
import postcss from 'postcss';
|
||||
import tailwindcss from 'tailwindcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import { StorageManager } from 'src/core/storage';
|
||||
import { useStorage } from 'src/hooks/useStorage';
|
||||
import { ComponentRegistry } from 'src/components/componentRegistry';
|
||||
import { ErrorBoundary } from 'src/components/ErrorBoundary';
|
||||
|
||||
//Optional niche market analysis tools
|
||||
import { useMarketData } from 'src/core/useMarketData';
|
||||
import { createMarketDataHook } from 'src/core/useMarketData';
|
||||
import { MarketDataService } from 'src/services/marketDataService';
|
||||
import { OrderBlockAnalysisService } from 'src/services/OrderBlockAnalysis';
|
||||
import { MarketDataStorage } from 'src/services/marketDataStorage';
|
||||
|
||||
|
||||
class ReactComponentChild extends MarkdownRenderChild {
|
||||
private root: ReturnType<typeof createRoot>;
|
||||
|
|
@ -25,6 +19,7 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
private noteFile: TFile;
|
||||
private ctx: MarkdownPostProcessorContext;
|
||||
private app: App;
|
||||
|
||||
|
||||
constructor(containerEl: HTMLElement, plugin: Plugin, ctx: MarkdownPostProcessorContext) {
|
||||
super(containerEl);
|
||||
|
|
@ -34,15 +29,25 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
this.app = plugin.app; // Get app from plugin
|
||||
// Get the source file from context
|
||||
if (ctx.sourcePath) {
|
||||
this.noteFile = plugin.app.vault.getAbstractFileByPath(ctx.sourcePath) as TFile;
|
||||
const abstractFile = plugin.app.vault.getAbstractFileByPath(ctx.sourcePath);
|
||||
if (abstractFile instanceof TFile) {
|
||||
this.noteFile = abstractFile;
|
||||
} else {
|
||||
// Handle the case where it's not a TFile
|
||||
console.warn(`Source path ${ctx.sourcePath} is not a file`);
|
||||
throw new Error(`Cannot initialize component: Source path "${ctx.sourcePath}" is not a file.`);
|
||||
}
|
||||
}
|
||||
// Add these classes to the container
|
||||
containerEl.classList.add('react-component-container');
|
||||
if (document.body.hasClass('theme-dark')) {
|
||||
containerEl.classList.add('theme-dark');
|
||||
containerEl.classList.add('dark');
|
||||
}else {
|
||||
containerEl.classList.add('theme-light');
|
||||
containerEl.classList.remove('dark');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private async getFrontmatterData<T>(key: string, defaultValue: T): Promise<T> {
|
||||
|
|
@ -98,6 +103,34 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
private needsThree(code: string): boolean {
|
||||
// Check if the code contains any Three.js specific imports or usage
|
||||
// More comprehensive detection of THREE usage
|
||||
const hasThreeImports = /import\s+.*?three['"];?\s*$/gm.test(code) ||
|
||||
/import\s*{\s*[^}]*}\s*from\s*['"]three['"];?\s*$/gm.test(code) ||
|
||||
/import\s+.*?\s+as\s+(\w+)\s+from\s+['"]three['"];?\s*$/gm.test(code);
|
||||
|
||||
// Save any custom import name from "import * as CustomName from 'three'"
|
||||
const threeAliasMatch = code.match(/import\s+\*\s+as\s+(\w+)\s+from\s+['"]three['"];?\s*$/m);
|
||||
const threeAlias = threeAliasMatch ? threeAliasMatch[1] : null;
|
||||
|
||||
// Check for various THREE usage patterns
|
||||
let hasThreeUsage = /\bTHREE\.|\bnew\s+THREE\.|\bextends\s+THREE\./.test(code) || // Direct THREE usage
|
||||
/\bUtilities\.THREE\.|\bnew\s+Utilities\.THREE\./.test(code) || // Utilities.THREE usage
|
||||
/\bComponentRegistry\.Utilities\.THREE\./.test(code); // Full path usage
|
||||
|
||||
// If there's a custom alias, check for that too
|
||||
if (threeAlias) {
|
||||
hasThreeUsage = hasThreeUsage || new RegExp(`\\b${threeAlias}\\.`).test(code);
|
||||
}
|
||||
|
||||
// Also check for common THREE classes even without the THREE prefix
|
||||
const commonThreeClasses = /\b(Scene|PerspectiveCamera|WebGLRenderer|Vector3|BoxGeometry|MeshBasicMaterial|Mesh|Object3D|Group|AmbientLight|DirectionalLight)\b/.test(code);
|
||||
|
||||
// Combined check
|
||||
return hasThreeImports || hasThreeUsage || commonThreeClasses;
|
||||
}
|
||||
|
||||
private preprocessCode(code: string): string {
|
||||
|
||||
// Replace CDN imports with script loading
|
||||
|
|
@ -143,8 +176,8 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
`;
|
||||
|
||||
// Find the component name
|
||||
const componentMatch = code.match(/(?:const|function|class)\s+(\w+)\s*=\s*(?:(?:\([^)]*\)|)\s*=>|function\s*\(|React\.memo\(|React\.forwardRef\(|class\s+extends\s+React\.Component)/);
|
||||
const componentName = componentMatch ? componentMatch[1] : 'EmptyComponent';
|
||||
const componentMatch = code.match(/(?:function\s+(\w+)|(?:const|class)\s+(\w+)\s*=\s*(?:(?:\([^)]*\)|)\s*=>|function\s*\(|React\.memo\(|React\.forwardRef\(|class\s+extends\s+React\.Component))/);
|
||||
const componentName = componentMatch ? (componentMatch[1] || componentMatch[2]) : 'EmptyComponent';
|
||||
console.log('Found component:', componentName); // Debug info
|
||||
if (!componentMatch) {
|
||||
throw new Error('No React component found');
|
||||
|
|
@ -181,20 +214,51 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
`;
|
||||
}
|
||||
|
||||
// Helper to get THREE.js directly
|
||||
private getThreeJs() {
|
||||
// Check if THREE exists in window
|
||||
if (typeof window !== 'undefined' && 'THREE' in window) {
|
||||
return window.THREE;
|
||||
}
|
||||
|
||||
// Fall back to require - only execute if needed
|
||||
try {
|
||||
return require('three');
|
||||
} catch (error) {
|
||||
console.warn('Failed to load THREE.js:', error);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
async render(code: string) {
|
||||
console.time('component-render');
|
||||
try {
|
||||
|
||||
// Add container classes for styling isolation
|
||||
this.containerEl.classList.add('react-component-container');
|
||||
|
||||
// Apply theme class for dark mode
|
||||
/*
|
||||
if (document.body.classList.contains('theme-dark')) {
|
||||
this.containerEl.classList.add('dark');
|
||||
} else {
|
||||
this.containerEl.classList.remove('dark');
|
||||
}*/
|
||||
|
||||
//console.log('Original code:', code);
|
||||
console.time('preprocess');
|
||||
// Preprocess code
|
||||
const needsThree=this.needsThree(code);
|
||||
const processedCode = this.preprocessCode(code);
|
||||
//console.log('Processed code:', processedCode);
|
||||
console.timeEnd('preprocess');
|
||||
|
||||
console.time('tailwind');
|
||||
// Process Tailwind
|
||||
//Could potentially generate tailwind css based on specific user code using build:css script defined in config
|
||||
// This would let it work with any user defined tailwind classes
|
||||
//await this.processTailwind(processedCode);
|
||||
console.timeEnd('tailwind');
|
||||
//console.timeEnd('tailwind');
|
||||
|
||||
console.time('babel');
|
||||
const isTypeScript = code.includes(':') || code.includes('interface') || code.includes('<');
|
||||
|
|
@ -235,15 +299,10 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
return [value, updateValue] as const;
|
||||
};
|
||||
// Create scoped market data hook
|
||||
const useMarketData = createMarketDataHook(this.storage, this.noteFile);
|
||||
// Create scope with all required dependencies
|
||||
const scope = {
|
||||
...ComponentRegistry,
|
||||
useStorage: boundUseStorage,
|
||||
useMarketData,
|
||||
MarketDataStorage,
|
||||
OrderBlockAnalysisService,
|
||||
MarketDataService,
|
||||
getTheme: () => document.body.hasClass('theme-dark') ? 'dark' : 'light',
|
||||
// Add note context
|
||||
noteContext: {
|
||||
|
|
@ -260,6 +319,8 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
color: document.body.hasClass('theme-dark') ? '#ffffff' : '#000000'
|
||||
}
|
||||
}),
|
||||
//lazy load THREE if needed
|
||||
...needsThree ? this.getThreeJs() : undefined,
|
||||
};
|
||||
|
||||
// Execute the code and get the component
|
||||
|
|
@ -282,6 +343,7 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
}
|
||||
|
||||
onunload() {
|
||||
|
||||
this.root.unmount();
|
||||
}
|
||||
|
||||
|
|
@ -305,10 +367,26 @@ class ReactComponentChild extends MarkdownRenderChild {
|
|||
}
|
||||
|
||||
export default class ReactNotesPlugin extends Plugin {
|
||||
private tailwindStyles: HTMLStyleElement | null = null; // Tailwind styles reference
|
||||
async onload() {
|
||||
try {
|
||||
// Read the CSS file using Obsidian's API
|
||||
const css = await this.app.vault.adapter.read(`${this.manifest.dir}/outStyles.css`);
|
||||
|
||||
// Inject the CSS
|
||||
const style = document.createElement('style');
|
||||
style.id = 'tailwind-styles';
|
||||
style.textContent = css;
|
||||
document.head.appendChild(style);
|
||||
this.tailwindStyles = style;
|
||||
} catch (error) {
|
||||
console.error("Failed to load CSS file:", error);
|
||||
}
|
||||
// Listen for theme changes
|
||||
this.registerEvent(
|
||||
this.app.workspace.on('css-change', this.updateTheme)
|
||||
this.app.workspace.on('css-change', () => {
|
||||
this.updateTheme();
|
||||
})
|
||||
);
|
||||
// Register markdown processor
|
||||
this.registerMarkdownCodeBlockProcessor(
|
||||
|
|
@ -326,14 +404,23 @@ export default class ReactNotesPlugin extends Plugin {
|
|||
// Initial theme setup
|
||||
this.updateTheme();
|
||||
}
|
||||
|
||||
onunload() {
|
||||
// Clean up styles
|
||||
if (this.tailwindStyles) {
|
||||
this.tailwindStyles.remove();
|
||||
}
|
||||
}
|
||||
private updateTheme = () => {
|
||||
// Update theme class on all react component containers
|
||||
document.querySelectorAll('.react-component-container').forEach(el => {
|
||||
if (document.body.hasClass('theme-dark')) {
|
||||
el.classList.add('theme-dark');
|
||||
el.classList.add('dark');
|
||||
el.classList.remove('theme-light');
|
||||
} else {
|
||||
el.classList.add('theme-light');
|
||||
el.classList.remove('dark');
|
||||
el.classList.remove('theme-dark');
|
||||
}
|
||||
});
|
||||
|
|
@ -349,11 +436,25 @@ export default class ReactNotesPlugin extends Plugin {
|
|||
|
||||
// Render Markdown for the inner content of each block
|
||||
await MarkdownRenderer.renderMarkdown(
|
||||
block.innerHTML, // Raw HTML content
|
||||
block.textContent || "", // // Get text content
|
||||
block, // Target container for rendered Markdown
|
||||
'', // Path (optional, current file path if needed)
|
||||
this // Plugin context
|
||||
);
|
||||
/*
|
||||
// Alternative if more control is needed:
|
||||
// Create a temporary div to safely extract text
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.appendChild(block.cloneNode(true));
|
||||
const safeContent = tempDiv.textContent || "";
|
||||
|
||||
await MarkdownRenderer.renderMarkdown(
|
||||
safeContent,
|
||||
block,
|
||||
'',
|
||||
this
|
||||
);
|
||||
*/
|
||||
|
||||
// After rendering, mark the block to avoid double processing
|
||||
block.classList.add('markdown-rendered');
|
||||
|
|
|
|||
1618
outStyles.css
Normal file
1618
outStyles.css
Normal file
File diff suppressed because it is too large
Load diff
464
styles.css
464
styles.css
|
|
@ -1,19 +1,6 @@
|
|||
/* styles.css */
|
||||
|
||||
/* Spacing utilities */
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.p-2 { padding: 0.5rem; }
|
||||
.p-4 { padding: 1rem; }
|
||||
|
||||
/* Layout utilities */
|
||||
.flex { display: flex; }
|
||||
.grid { display: grid; }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
|
||||
.w-full { width: 100%; }
|
||||
.space-y-2 > * + * { margin-top: 0.5rem; }
|
||||
|
|
@ -28,7 +15,6 @@
|
|||
.text-sm { font-size: 0.875rem; }
|
||||
.text-lg { font-size: 1.125rem; }
|
||||
|
||||
|
||||
/* Border utilities */
|
||||
.rounded { border-radius: 4px; }
|
||||
.border { border: 1px solid var(--background-modifier-border); }
|
||||
|
|
@ -92,6 +78,7 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* List styles */
|
||||
.list-content {
|
||||
margin: 0;
|
||||
|
|
@ -120,7 +107,13 @@
|
|||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
||||
.react-component-container svg {
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
/* Dark mode adjustments are handled by Tailwind classes */
|
||||
/*
|
||||
|
||||
|
|
@ -234,18 +227,41 @@ If your plugin does not need CSS, delete this file.
|
|||
.space-y-4 > * + * { margin-top: 1rem; }
|
||||
.space-y-2 > * + * { margin-top: 0.5rem; }
|
||||
|
||||
/* Container styles - ensures proper rendering in Obsidian */
|
||||
.react-component-container {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
font-family: var(--font-interface);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
|
||||
.theme-dark .react-component-container {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Ensure buttons display properly */
|
||||
.react-component-container button {
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Color variables for icons */
|
||||
.react-component-container .icon-like {
|
||||
color: var(--text-error) ;
|
||||
}
|
||||
|
||||
.react-component-container .icon-comment {
|
||||
color: var(--text-accent) ;
|
||||
}
|
||||
|
||||
/* Stats styling for post metrics */
|
||||
.react-component-container .stats-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.react-component-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background-color: var(--background-primary);
|
||||
|
|
@ -332,4 +348,406 @@ If your plugin does not need CSS, delete this file.
|
|||
/* Ensure proper spacing */
|
||||
.nested-block + .nested-block {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add these styles to the existing styles.css file */
|
||||
|
||||
/* ===== Component UI Framework ===== */
|
||||
/* These styles directly map Tailwind-like classes to CSS properties */
|
||||
|
||||
/* Layout */
|
||||
.w-full { width: 100% !important; }
|
||||
.max-w-3xl { max-width: 48rem !important; }
|
||||
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
|
||||
/* Borders */
|
||||
.border { border-width: 1px !important; border-style: solid !important; }
|
||||
.border-t { border-top-width: 1px !important; border-top-style: solid !important; }
|
||||
.border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; }
|
||||
.border-b-2 { border-bottom-width: 2px !important; border-bottom-style: solid !important; }
|
||||
.rounded-md { border-radius: 0.375rem !important; }
|
||||
.rounded-lg { border-radius: 0.5rem !important; }
|
||||
|
||||
/* Spacing */
|
||||
.p-2 { padding: 0.5rem !important; }
|
||||
.p-4 { padding: 1rem !important; }
|
||||
.p-6 { padding: 1.5rem !important; }
|
||||
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
|
||||
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
|
||||
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
|
||||
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
|
||||
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
|
||||
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
|
||||
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
|
||||
.m-4 { margin: 1rem !important; }
|
||||
.mt-2 { margin-top: 0.5rem !important; }
|
||||
.mb-2 { margin-bottom: 0.5rem !important; }
|
||||
.mb-4 { margin-bottom: 1rem !important; }
|
||||
.mr-4 { margin-right: 1rem !important; }
|
||||
.gap-1 { gap: 0.25rem !important; }
|
||||
.gap-2 { gap: 0.5rem !important; }
|
||||
.gap-4 { gap: 1rem !important; }
|
||||
.space-y-2 > * + * { margin-top: 0.5rem !important; }
|
||||
.space-y-3 > * + * { margin-top: 0.75rem !important; }
|
||||
.space-y-4 > * + * { margin-top: 1rem !important; }
|
||||
|
||||
/* Typography */
|
||||
.text-sm { font-size: 0.875rem !important; }
|
||||
.text-lg { font-size: 1.125rem !important; }
|
||||
.text-xl { font-size: 1.25rem !important; }
|
||||
.font-medium { font-weight: 500 !important; }
|
||||
.font-semibold { font-weight: 600 !important; }
|
||||
|
||||
/* Flex */
|
||||
.flex { display: flex !important; }
|
||||
.flex-col { flex-direction: column !important; }
|
||||
.items-center { align-items: center !important; }
|
||||
.justify-between { justify-content: space-between !important; }
|
||||
|
||||
/* Grid */
|
||||
.grid { display: grid !important; }
|
||||
|
||||
/* ===== Component Styling - Light Theme ===== */
|
||||
|
||||
/* Card & Container */
|
||||
.react-component-container {
|
||||
background-color: white;
|
||||
color: rgb(31, 41, 55);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid rgb(229, 231, 235);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.react-component-container [class*="header"],
|
||||
.react-component-container .bg-gray-50,
|
||||
.react-component-container .bg-gray-100 {
|
||||
background-color: rgb(249, 250, 251);
|
||||
border-color: rgb(229, 231, 235);
|
||||
}
|
||||
|
||||
/* Dark background areas */
|
||||
.react-component-container .bg-gray-700 {
|
||||
background-color: rgb(55, 65, 81);
|
||||
color: rgb(243, 244, 246);
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.react-component-container .border-blue-600 {
|
||||
border-color: rgb(37, 99, 235);
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
|
||||
.react-component-container .text-blue-600,
|
||||
.react-component-container .text-blue-500 {
|
||||
color: rgb(37, 99, 235);
|
||||
}
|
||||
|
||||
.react-component-container .text-red-500,
|
||||
.react-component-container .text-red-400 {
|
||||
color: rgb(239, 68, 68);
|
||||
}
|
||||
|
||||
.react-component-container .text-green-600,
|
||||
.react-component-container .text-green-400 {
|
||||
color: rgb(22, 163, 74);
|
||||
}
|
||||
|
||||
.react-component-container .text-gray-500,
|
||||
.react-component-container .text-gray-400 {
|
||||
color: rgb(107, 114, 128);
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
.react-component-container button {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.react-component-container button.bg-gray-200,
|
||||
.react-component-container .bg-gray-200 {
|
||||
background-color: rgb(229, 231, 235);
|
||||
}
|
||||
|
||||
.react-component-container button.hover\:bg-gray-300:hover {
|
||||
background-color: rgb(209, 213, 219);
|
||||
}
|
||||
|
||||
.react-component-container button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== Dark Theme Overrides ===== */
|
||||
.theme-dark .react-component-container {
|
||||
background-color: rgb(17, 24, 39);
|
||||
color: rgb(243, 244, 246);
|
||||
border-color: rgb(55, 65, 81);
|
||||
}
|
||||
/*
|
||||
.theme-dark .react-component-container > div > div {
|
||||
background-color: #0800f8 ;
|
||||
border: 1px solid #3e4c5a;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 1rem;
|
||||
}*/
|
||||
.theme-dark .react-component-container [class*="header"]{
|
||||
background-color: rgb(31, 41, 55);
|
||||
border-color: rgb(55, 65, 81);
|
||||
}
|
||||
|
||||
.theme-dark .react-component-container button.bg-gray-700,
|
||||
.theme-dark .react-component-container .bg-gray-700 {
|
||||
background-color: rgb(55, 65, 81);
|
||||
}
|
||||
|
||||
.theme-dark .react-component-container button.hover\:bg-gray-600:hover {
|
||||
background-color: rgb(75, 85, 99);
|
||||
}
|
||||
|
||||
/* Tailwind Color System - Properly Scoped for Obsidian */
|
||||
|
||||
/* Base color variables in light mode */
|
||||
:root {
|
||||
/* Gray scale */
|
||||
--gray-50: rgb(249, 250, 251);
|
||||
--gray-100: rgb(243, 244, 246);
|
||||
--gray-200: rgb(229, 231, 235);
|
||||
--gray-300: rgb(209, 213, 219);
|
||||
--gray-400: rgb(156, 163, 175);
|
||||
--gray-500: rgb(107, 114, 128);
|
||||
--gray-600: rgb(75, 85, 99);
|
||||
--gray-700: rgb(55, 65, 81);
|
||||
--gray-800: rgb(31, 41, 55);
|
||||
--gray-900: rgb(17, 24, 39);
|
||||
|
||||
/* Blue scale */
|
||||
--blue-50: rgb(239, 246, 255);
|
||||
--blue-100: rgb(219, 234, 254);
|
||||
--blue-200: rgb(191, 219, 254);
|
||||
--blue-300: rgb(147, 197, 253);
|
||||
--blue-400: rgb(96, 165, 250);
|
||||
--blue-500: rgb(59, 130, 246);
|
||||
--blue-600: rgb(37, 99, 235);
|
||||
--blue-700: rgb(29, 78, 216);
|
||||
--blue-800: rgb(30, 64, 175);
|
||||
--blue-900: rgb(30, 58, 138);
|
||||
|
||||
/* Red scale */
|
||||
--red-50: rgb(254, 242, 242);
|
||||
--red-100: rgb(254, 226, 226);
|
||||
--red-200: rgb(254, 202, 202);
|
||||
--red-300: rgb(252, 165, 165);
|
||||
--red-400: rgb(248, 113, 113);
|
||||
--red-500: rgb(239, 68, 68);
|
||||
--red-600: rgb(220, 38, 38);
|
||||
--red-700: rgb(185, 28, 28);
|
||||
--red-800: rgb(153, 27, 27);
|
||||
--red-900: rgb(127, 29, 29);
|
||||
|
||||
/* Green scale */
|
||||
--green-50: rgb(240, 253, 244);
|
||||
--green-100: rgb(220, 252, 231);
|
||||
--green-200: rgb(187, 247, 208);
|
||||
--green-300: rgb(134, 239, 172);
|
||||
--green-400: rgb(74, 222, 128);
|
||||
--green-500: rgb(34, 197, 94);
|
||||
--green-600: rgb(22, 163, 74);
|
||||
--green-700: rgb(21, 128, 61);
|
||||
--green-800: rgb(22, 101, 52);
|
||||
--green-900: rgb(20, 83, 45);
|
||||
}
|
||||
|
||||
/* Dark mode color overrides - properly scoped */
|
||||
.theme-dark .react-component-container {
|
||||
/* Invert gray scale for dark mode */
|
||||
--gray-50: rgb(17, 24, 39);
|
||||
--gray-100: rgb(31, 41, 55);
|
||||
--gray-200: rgb(55, 65, 81);
|
||||
--gray-300: rgb(75, 85, 99);
|
||||
--gray-400: rgb(107, 114, 128);
|
||||
--gray-500: rgb(156, 163, 175);
|
||||
--gray-600: rgb(209, 213, 219);
|
||||
--gray-700: rgb(229, 231, 235);
|
||||
--gray-800: rgb(243, 244, 246);
|
||||
--gray-900: rgb(249, 250, 251);
|
||||
|
||||
/* Adjust other colors for better visibility in dark mode */
|
||||
--blue-400: rgb(129, 182, 245);
|
||||
--blue-500: rgb(96, 165, 250);
|
||||
--blue-600: rgb(59, 130, 246);
|
||||
|
||||
--red-400: rgb(252, 165, 165);
|
||||
--red-500: rgb(248, 113, 113);
|
||||
|
||||
--green-400: rgb(134, 239, 172);
|
||||
--green-600: rgb(74, 222, 128);
|
||||
}
|
||||
|
||||
/* Background colors - keep these at root level */
|
||||
.react-component-container .bg-gray-50 { background-color: var(--gray-50); }
|
||||
.react-component-container .bg-gray-100 { background-color: var(--gray-100); }
|
||||
.react-component-container .bg-gray-200 { background-color: var(--gray-200); }
|
||||
.react-component-container .bg-gray-300 { background-color: var(--gray-300); }
|
||||
.react-component-container .bg-gray-400 { background-color: var(--gray-400); }
|
||||
.react-component-container .bg-gray-500 { background-color: var(--gray-500); }
|
||||
.react-component-container .bg-gray-600 { background-color: var(--gray-600); }
|
||||
.react-component-container .bg-gray-700 { background-color: var(--gray-700); }
|
||||
.react-component-container .bg-gray-800 { background-color: var(--gray-800); }
|
||||
.react-component-container .bg-gray-900 { background-color: var(--gray-900); }
|
||||
|
||||
.react-component-container .bg-blue-50 { background-color: var(--blue-50); }
|
||||
.react-component-container .bg-blue-100 { background-color: var(--blue-100); }
|
||||
.react-component-container .bg-blue-200 { background-color: var(--blue-200); }
|
||||
.react-component-container .bg-blue-300 { background-color: var(--blue-300); }
|
||||
.react-component-container .bg-blue-400 { background-color: var(--blue-400); }
|
||||
.react-component-container .bg-blue-500 { background-color: var(--blue-500); }
|
||||
.react-component-container .bg-blue-600 { background-color: var(--blue-600); }
|
||||
.react-component-container .bg-blue-700 { background-color: var(--blue-700); }
|
||||
.react-component-container .bg-blue-800 { background-color: var(--blue-800); }
|
||||
.react-component-container .bg-blue-900 { background-color: var(--blue-900); }
|
||||
|
||||
.react-component-container .bg-red-50 { background-color: var(--red-50); }
|
||||
.react-component-container .bg-red-100 { background-color: var(--red-100); }
|
||||
.react-component-container .bg-red-200 { background-color: var(--red-200); }
|
||||
.react-component-container .bg-red-300 { background-color: var(--red-300); }
|
||||
.react-component-container .bg-red-400 { background-color: var(--red-400); }
|
||||
.react-component-container .bg-red-500 { background-color: var(--red-500); }
|
||||
.react-component-container .bg-red-600 { background-color: var(--red-600); }
|
||||
.react-component-container .bg-red-700 { background-color: var(--red-700); }
|
||||
.react-component-container .bg-red-800 { background-color: var(--red-800); }
|
||||
.react-component-container .bg-red-900 { background-color: var(--red-900); }
|
||||
|
||||
.react-component-container .bg-green-50 { background-color: var(--green-50); }
|
||||
.react-component-container .bg-green-100 { background-color: var(--green-100); }
|
||||
.react-component-container .bg-green-200 { background-color: var(--green-200); }
|
||||
.react-component-container .bg-green-300 { background-color: var(--green-300); }
|
||||
.react-component-container .bg-green-400 { background-color: var(--green-400); }
|
||||
.react-component-container .bg-green-500 { background-color: var(--green-500); }
|
||||
.react-component-container .bg-green-600 { background-color: var(--green-600); }
|
||||
.react-component-container .bg-green-700 { background-color: var(--green-700); }
|
||||
.react-component-container .bg-green-800 { background-color: var(--green-800); }
|
||||
.react-component-container .bg-green-900 { background-color: var(--green-900); }
|
||||
|
||||
/* Text colors - all scoped to react-component-container */
|
||||
.react-component-container .text-gray-50 { color: var(--gray-50); }
|
||||
.react-component-container .text-gray-100 { color: var(--gray-100); }
|
||||
.react-component-container .text-gray-200 { color: var(--gray-200); }
|
||||
.react-component-container .text-gray-300 { color: var(--gray-300); }
|
||||
.react-component-container .text-gray-400 { color: var(--gray-400); }
|
||||
.react-component-container .text-gray-500 { color: var(--gray-500); }
|
||||
.react-component-container .text-gray-600 { color: var(--gray-600); }
|
||||
.react-component-container .text-gray-700 { color: var(--gray-700); }
|
||||
.react-component-container .text-gray-800 { color: var(--gray-800); }
|
||||
.react-component-container .text-gray-900 { color: var(--gray-900); }
|
||||
|
||||
.react-component-container .text-blue-50 { color: var(--blue-50); }
|
||||
.react-component-container .text-blue-100 { color: var(--blue-100); }
|
||||
.react-component-container .text-blue-200 { color: var(--blue-200); }
|
||||
.react-component-container .text-blue-300 { color: var(--blue-300); }
|
||||
.react-component-container .text-blue-400 { color: var(--blue-400); }
|
||||
.react-component-container .text-blue-500 { color: var(--blue-500); }
|
||||
.react-component-container .text-blue-600 { color: var(--blue-600); }
|
||||
.react-component-container .text-blue-700 { color: var(--blue-700); }
|
||||
.react-component-container .text-blue-800 { color: var(--blue-800); }
|
||||
.react-component-container .text-blue-900 { color: var(--blue-900); }
|
||||
|
||||
.react-component-container .text-red-50 { color: var(--red-50); }
|
||||
.react-component-container .text-red-100 { color: var(--red-100); }
|
||||
.react-component-container .text-red-200 { color: var(--red-200); }
|
||||
.react-component-container .text-red-300 { color: var(--red-300); }
|
||||
.react-component-container .text-red-400 { color: var(--red-400); }
|
||||
.react-component-container .text-red-500 { color: var(--red-500); }
|
||||
.react-component-container .text-red-600 { color: var(--red-600); }
|
||||
.react-component-container .text-red-700 { color: var(--red-700); }
|
||||
.react-component-container .text-red-800 { color: var(--red-800); }
|
||||
.react-component-container .text-red-900 { color: var(--red-900); }
|
||||
|
||||
.react-component-container .text-green-50 { color: var(--green-50); }
|
||||
.react-component-container .text-green-100 { color: var(--green-100); }
|
||||
.react-component-container .text-green-200 { color: var(--green-200); }
|
||||
.react-component-container .text-green-300 { color: var(--green-300); }
|
||||
.react-component-container .text-green-400 { color: var(--green-400); }
|
||||
.react-component-container .text-green-500 { color: var(--green-500); }
|
||||
.react-component-container .text-green-600 { color: var(--green-600); }
|
||||
.react-component-container .text-green-700 { color: var(--green-700); }
|
||||
.react-component-container .text-green-800 { color: var(--green-800); }
|
||||
.react-component-container .text-green-900 { color: var(--green-900); }
|
||||
|
||||
/* Border colors */
|
||||
.react-component-container .border-gray-50 { border-color: var(--gray-50); }
|
||||
.react-component-container .border-gray-100 { border-color: var(--gray-100); }
|
||||
.react-component-container .border-gray-200 { border-color: var(--gray-200); }
|
||||
.react-component-container .border-gray-300 { border-color: var(--gray-300); }
|
||||
.react-component-container .border-gray-400 { border-color: var(--gray-400); }
|
||||
.react-component-container .border-gray-500 { border-color: var(--gray-500); }
|
||||
.react-component-container .border-gray-600 { border-color: var(--gray-600); }
|
||||
.react-component-container .border-gray-700 { border-color: var(--gray-700); }
|
||||
.react-component-container .border-gray-800 { border-color: var(--gray-800); }
|
||||
.react-component-container .border-gray-900 { border-color: var(--gray-900); }
|
||||
|
||||
.react-component-container .border-blue-400 { border-color: var(--blue-400); }
|
||||
.react-component-container .border-blue-500 { border-color: var(--blue-500); }
|
||||
.react-component-container .border-blue-600 { border-color: var(--blue-600); }
|
||||
|
||||
.react-component-container .border-red-400 { border-color: var(--red-400); }
|
||||
.react-component-container .border-red-500 { border-color: var(--red-500); }
|
||||
|
||||
.react-component-container .border-green-400 { border-color: var(--green-400); }
|
||||
.react-component-container .border-green-600 { border-color: var(--green-600); }
|
||||
|
||||
|
||||
/* General tab button reset*/
|
||||
.react-component-container [role="tab"],
|
||||
.react-component-container [class*="tab-trigger"],
|
||||
.react-component-container div[class*="flex"][class*="border-b"] > button {
|
||||
/* Reset background to transparent by default */
|
||||
background-color: transparent !important;
|
||||
transition: background-color 0.2s, color 0.2s, border-color 0.2s !important;
|
||||
}
|
||||
|
||||
/* Target all elements that might have background color issues */
|
||||
.react-component-container pre,
|
||||
.react-component-container code,
|
||||
.react-component-container [class*="code-"],
|
||||
.react-component-container [class*="cm-"] {
|
||||
/* Force inheritance and override Obsidian's Code Styler */
|
||||
all: inherit;
|
||||
display: block;
|
||||
white-space: inherit;
|
||||
background-color: inherit !important;
|
||||
color: inherit !important;
|
||||
padding: inherit !important;
|
||||
margin: inherit !important;
|
||||
border: inherit !important;
|
||||
border-radius: inherit !important;
|
||||
box-shadow: none !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
/* Restore code-specific properties after inheritance */
|
||||
.react-component-container pre,
|
||||
.react-component-container code {
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
.react-component-container .code-styler-pre,
|
||||
.react-component-container .code-styler-pre * {
|
||||
background-color: inherit !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Navigation buttons */
|
||||
.react-component-container .w-14 {width: 3.5rem !important;}
|
||||
.react-component-container .h-14 {height: 3.5rem !important;}
|
||||
.react-component-container .rounded-full {border-radius: 9999px !important;}
|
||||
.react-component-container .border {border-width: 1px !important; border-style: solid !important;}
|
||||
.react-component-container .shadow-xl {box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;}
|
||||
.react-component-container .backdrop-blur-sm {backdrop-filter: blur(4px) !important;}
|
||||
.react-component-container .disabled\:opacity-30:disabled {opacity: 0.3 !important;}
|
||||
.react-component-container .disabled\:cursor-not-allowed:disabled {cursor: not-allowed !important;}
|
||||
|
||||
/* Add more component-specific styles as needed */
|
||||
Loading…
Reference in a new issue