Temas
Los temas de Clepit se controlan mediante variables CSS. Establece theme: "auto" | "light" | "dark", o pasa themeOverrides explícitos.
theme
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'El preajuste auto sigue el esquema de colores del sistema operativo mediante prefers-color-scheme y cambia en vivo cuando se modifica.
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
Los 22 tokens son opcionales. Todo lo que omitas recurre al preajuste seleccionado.
| Token | Controla |
|---|---|
| bg | Fondo principal del editor / renderizador |
| surface | Superficie secundaria: paneles de comandos, encabezados de la barra de modo |
| surface2 | Superficie terciaria: fondos de menús al pasar el cursor |
| text | Color de texto principal |
| textMuted | Texto secundario: etiquetas, párrafos de respaldo |
| textSubtle | Texto sutil: elementos atenuados, marcadores de fecha |
| border | Color de borde principal |
| borderSubtle | Borde sutil: divisores sin énfasis |
| primary | Color de marca principal: botones, enlaces de anclaje |
| primaryHover | Color de hover principal: estado hover/focus del botón |
| primaryBg | Fondo primario tintado: anillos de enfoque |
| marker | Color de resaltado de texto: herramienta inline marcador |
| selectionBg | Fondo de selección de texto |
| blockHighlightBg | Fondo del bloque activo |
| success | Color de texto/icono del estado de éxito |
| successBg | Fondo tingido de éxito: cajas de notificación |
| warning | Color de texto/icono del estado de advertencia |
| warningBg | Fondo tingido de advertencia |
| error | Color de texto/icono del estado de error |
| errorBg | Fondo tingido de error |
| info | Color de texto/icono del estado informativo |
| infoBg | Fondo tingido informativo |
themeOverrides
Sobrescribe cualquier subconjunto de tokens. El editor los inyecta como variables CSS limitadas a su contenedor.
// themeOverrides accepts separate light and dark token sets.
// Both keys are optional — omit one to use the preset for that mode.
Editor.create({
containerId: 'editor',
theme: 'auto',
themeOverrides: {
light: {
primary: '#5b5bff',
primaryHover: '#4747e6',
bg: '#ffffff',
text: '#0a0a0a',
},
dark: {
primary: '#7c7cff',
primaryHover: '#9494ff',
bg: '#161b22',
text: 'rgba(240, 246, 252, 0.92)',
},
},
});Propiedades personalizadas de CSS
Cada token se asigna a una variable --clepit-* limitada al contenedor del editor. Puedes leerlas o ampliarlas desde tu propia hoja de estilos.
/* Every ThemeToken maps to a --clepit-* CSS variable.
Variables are scoped to .clepit-editor, .clepit-renderer-content, and body[data-clepit-theme]. */
--clepit-bg
--clepit-surface
--clepit-surface-2
--clepit-text
--clepit-text-muted
--clepit-text-subtle
--clepit-border
--clepit-border-subtle
--clepit-primary
--clepit-primary-hover
--clepit-primary-bg
--clepit-marker
--clepit-selection-bg
--clepit-block-highlight-bg
--clepit-success
--clepit-success-bg
--clepit-warning
--clepit-warning-bg
--clepit-error
--clepit-error-bg
--clepit-info
--clepit-info-bg#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}styles y classNames por bloque
RendererConfig.styles canaliza propiedades CSS independientes del framework directamente al elemento raíz del componente. RendererConfig.classNames añade clases CSS adicionales sin tocar los estilos integrados. Ambos pueden combinarse.
import { Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames } from '@clepit/core';
const styles: BlockStyles = {
// alert block — keyed by variant
alert: {
error: { borderRadius: '8px', padding: '12px 16px' },
info: { borderRadius: '8px', padding: '12px 16px' },
},
// header block — keyed by level
header: {
h1: { fontFamily: 'Georgia, serif' },
h2: { fontFamily: 'Georgia, serif' },
},
// paragraph block — flat CSSProperties
paragraph: { lineHeight: '1.75' },
// table block — sub-element keys
table: { cell: { padding: '8px 12px' } },
// code block — sub-element keys
code: { container: { borderRadius: '6px' } },
};
const classNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Renderer.create({ containerId: 'output', data, styles, classNames });StyleManager.subscribe
Suscríbete a los cambios de tokens en tiempo de ejecución. Útil para sincronizar la interfaz circundante con los cambios de tema del editor.
import { StyleManager } from '@clepit/core';
const unsubscribe = StyleManager.subscribe(theme => {
// theme is 'light' | 'dark' — sync surrounding UI
document.documentElement.setAttribute('data-theme', theme);
});
// later — clean up when the component unmounts
unsubscribe();