@monochrome-edge/ui/ui/components/editor/styles/editor-theme-fix.css

A modern, minimalist UI with Warm and Cold themes

/**
 * Editor Theme Integration with Monochrome Edge
 * This file ensures the editor uses ONLY Monochrome Edge theme variables
 * No hardcoded colors allowed!
 */

/* Force all editor components to use Monochrome Edge variables */
.editor-wrapper,
.editor-content-wrapper,
.editor-content,
.editor-toolbar-container,
.ProseMirror {
    /* Reset any hardcoded colors */
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Editor wrapper - use theme background */
.editor-wrapper {
    background: var(--theme-background) !important;
    color: var(--theme-text-primary) !important;
}

/* Content wrapper */
.editor-content-wrapper {
    background: var(--theme-background) !important;
}

/* Editor content area */
.editor-content {
    background: var(--theme-surface) !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border) !important;
}

/* ProseMirror content */
.ProseMirror {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
}

/* Toolbar */
.editor-toolbar-container {
    background: var(--theme-surface) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

/* Toolbar buttons */
.toolbar-btn {
    background: transparent !important;
    color: var(--theme-text-secondary) !important;
    border: 1px solid transparent !important;
}

.toolbar-btn:hover {
    background: var(--theme-background) !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border) !important;
}

.toolbar-btn.active,
.toolbar-btn:active {
    background: var(--theme-accent) !important;
    color: var(--theme-accent-contrast) !important;
    border-color: var(--theme-accent) !important;
}

/* Text elements */
.editor-block,
.block-heading1,
.block-heading2,
.block-heading3,
.block-heading4,
.block-paragraph,
.block-bullet,
.block-number {
    color: var(--theme-text-primary) !important;
}

/* Secondary text */
.block-quote,
.list-marker,
.editor-block[data-placeholder]:empty:before {
    color: var(--theme-text-secondary) !important;
}

/* Accents */
.block-quote {
    border-left-color: var(--theme-accent) !important;
}

.editor-block a {
    color: var(--theme-accent) !important;
}

/* Floating toolbar */
.floating-toolbar {
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

.floating-toolbar button {
    color: var(--theme-text-secondary) !important;
}

.floating-toolbar button:hover {
    background: var(--theme-background) !important;
    color: var(--theme-text-primary) !important;
}

.floating-toolbar button.active {
    background: var(--theme-accent) !important;
    color: var(--theme-accent-contrast) !important;
}

/* Slash menu */
.slash-menu-enhanced {
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

.slash-menu-enhanced .menu-search {
    background: var(--theme-background) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text-primary) !important;
}

.slash-menu-enhanced .menu-item {
    color: var(--theme-text-primary) !important;
}

.slash-menu-enhanced .menu-item:hover,
.slash-menu-enhanced .menu-item.selected {
    background: var(--theme-background) !important;
}

/* Code blocks */
.block-codeblock-wrapper {
    background: var(--theme-surface) !important;
    border: 1px solid var(--theme-border) !important;
}

.code-header {
    background: var(--theme-background) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

.code-language,
.code-copy-btn {
    border-color: var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}

/* Tables */
.editor-table,
.editor-table td {
    border-color: var(--theme-border) !important;
}

.table-header .table-cell-content {
    background: var(--theme-surface) !important;
}

/* Status bar */
.editor-status-bar {
    background: var(--theme-surface) !important;
    border-top: 1px solid var(--theme-border) !important;
    color: var(--theme-text-secondary) !important;
}

/* Remove ALL transitions - let theme handle it */
* {
    transition: none !important;
}