7b9f1155b4
- i18n ligero de la interfaz del REPL (castellano, inglés, francés, alemán, italiano, portugués...) con selector en el header - Pestaña Projects: gestor local de proyectos con carpetas, buscador y librería de tracks de fábrica (bases techno/acid originales) - Barra de transporte bajo el editor: play/pausa/anterior/siguiente, tiempo y barra de progreso arrastrable; seek real vía Cyclist.setCycle() - Pestaña Guía: chuleta de síntesis y sonidos para el directo - Packs de temas del editor: neon-madrid + hacklab-pack (5 neón + 5 estándar) - pnpm-workspace: allowBuilds para instalación limpia en Linux
240 lines
9.4 KiB
JavaScript
240 lines
9.4 KiB
JavaScript
import { tags as t } from '@lezer/highlight';
|
|
import { createTheme } from './theme-helper.mjs';
|
|
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
// PACK HACKLAB · 10 temas: 5 NEÓN sobre negro + 5 estándar
|
|
// Mismo formato que neon-madrid.mjs: default = createTheme, settings aparte.
|
|
// ═══════════════════════════════════════════════════════════════════
|
|
|
|
// ── helper: genera un tema neón sobre negro a partir de 3 acentos ──
|
|
const neon = ({ base, acento, extra, seleccion }) => ({
|
|
settings: {
|
|
background: '#050507',
|
|
lineBackground: '#05050799',
|
|
foreground: base,
|
|
muted: `${base}40`,
|
|
caret: acento,
|
|
selection: seleccion,
|
|
selectionMatch: `${acento}33`,
|
|
lineHighlight: `${base}0d`,
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: `${base}66`,
|
|
},
|
|
theme: createTheme({
|
|
theme: 'dark',
|
|
settings: {
|
|
background: '#050507',
|
|
lineBackground: '#05050799',
|
|
foreground: base,
|
|
caret: acento,
|
|
selection: seleccion,
|
|
selectionMatch: `${acento}33`,
|
|
lineHighlight: `${base}0d`,
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: `${base}66`,
|
|
},
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: extra },
|
|
{ tag: t.labelName, color: acento },
|
|
{ tag: t.keyword, color: acento },
|
|
{ tag: t.operator, color: acento },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: base },
|
|
{ tag: t.definition(t.variableName), color: extra },
|
|
{ tag: [t.string, t.special(t.string)], color: extra },
|
|
{ tag: t.comment, color: `${base}77` },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: acento },
|
|
{ tag: [t.meta, t.attributeName], color: extra },
|
|
{ tag: t.className, color: extra },
|
|
{ tag: t.invalid, color: '#ff2222' },
|
|
],
|
|
}),
|
|
});
|
|
|
|
// ── 5 NEÓN ──────────────────────────────────────────────────────────
|
|
|
|
// cian eléctrico + magenta
|
|
const neonCian_ = neon({ base: '#00e5ff', acento: '#ff00d4', extra: '#7dff00', seleccion: 'rgba(255,0,212,.25)' });
|
|
export const neonCianSettings = neonCian_.settings;
|
|
export const neonCian = neonCian_.theme;
|
|
|
|
// magenta/rosa + cian
|
|
const neonMagenta_ = neon({ base: '#ff2ec4', acento: '#00e5ff', extra: '#ffe600', seleccion: 'rgba(0,229,255,.25)' });
|
|
export const neonMagentaSettings = neonMagenta_.settings;
|
|
export const neonMagenta = neonMagenta_.theme;
|
|
|
|
// verde matrix + lima
|
|
const neonVerde_ = neon({ base: '#39ff14', acento: '#00ffc8', extra: '#eaff00', seleccion: 'rgba(0,255,200,.25)' });
|
|
export const neonVerdeSettings = neonVerde_.settings;
|
|
export const neonVerde = neonVerde_.theme;
|
|
|
|
// violeta + rosa
|
|
const neonVioleta_ = neon({ base: '#b26bff', acento: '#ff4fd8', extra: '#00e5ff', seleccion: 'rgba(255,79,216,.25)' });
|
|
export const neonVioletaSettings = neonVioleta_.settings;
|
|
export const neonVioleta = neonVioleta_.theme;
|
|
|
|
// rave multicolor: base ámbar, acentos cian/verde (fiesta total)
|
|
const neonRave_ = neon({ base: '#ffb300', acento: '#00e5ff', extra: '#ff2ec4', seleccion: 'rgba(57,255,20,.25)' });
|
|
export const neonRaveSettings = neonRave_.settings;
|
|
export const neonRave = neonRave_.theme;
|
|
|
|
// ── 5 ESTÁNDAR ──────────────────────────────────────────────────────
|
|
|
|
// claro limpio (blanco, azules/teal — para trabajar de día)
|
|
export const madridClaroSettings = {
|
|
background: '#ffffff',
|
|
lineBackground: '#ffffff99',
|
|
foreground: '#1e293b',
|
|
muted: '#1e293b26',
|
|
caret: '#0369a1',
|
|
selection: 'rgba(2,132,199,.18)',
|
|
selectionMatch: 'rgba(2,132,199,.12)',
|
|
lineHighlight: 'rgba(2,132,199,.05)',
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: '#1e293b55',
|
|
};
|
|
export const madridClaro = createTheme({
|
|
theme: 'light',
|
|
settings: madridClaroSettings,
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: '#0d9488' },
|
|
{ tag: t.labelName, color: '#c026d3' },
|
|
{ tag: t.keyword, color: '#7c3aed' },
|
|
{ tag: t.operator, color: '#0369a1' },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#0f172a' },
|
|
{ tag: t.definition(t.variableName), color: '#b45309' },
|
|
{ tag: [t.string, t.special(t.string)], color: '#15803d' },
|
|
{ tag: t.comment, color: '#94a3b8' },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: '#0369a1' },
|
|
{ tag: [t.meta, t.attributeName], color: '#0d9488' },
|
|
{ tag: t.className, color: '#b45309' },
|
|
{ tag: t.invalid, color: '#dc2626' },
|
|
],
|
|
});
|
|
|
|
// oscuro neutro (gris carbón, acentos suaves — sobrio)
|
|
export const madridOscuroSettings = {
|
|
background: '#1c1e24',
|
|
lineBackground: '#1c1e2499',
|
|
foreground: '#d7dae0',
|
|
muted: '#d7dae026',
|
|
caret: '#61afef',
|
|
selection: 'rgba(97,175,239,.22)',
|
|
selectionMatch: 'rgba(97,175,239,.15)',
|
|
lineHighlight: 'rgba(215,218,224,.05)',
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: '#d7dae055',
|
|
};
|
|
export const madridOscuro = createTheme({
|
|
theme: 'dark',
|
|
settings: madridOscuroSettings,
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: '#d19a66' },
|
|
{ tag: t.labelName, color: '#c678dd' },
|
|
{ tag: t.keyword, color: '#c678dd' },
|
|
{ tag: t.operator, color: '#56b6c2' },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#e5c07b' },
|
|
{ tag: t.definition(t.variableName), color: '#61afef' },
|
|
{ tag: [t.string, t.special(t.string)], color: '#98c379' },
|
|
{ tag: t.comment, color: '#7f848e' },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: '#56b6c2' },
|
|
{ tag: [t.meta, t.attributeName], color: '#d19a66' },
|
|
{ tag: t.className, color: '#e5c07b' },
|
|
{ tag: t.invalid, color: '#f14c4c' },
|
|
],
|
|
});
|
|
|
|
// papel sepia (cálido tipo solarized claro — descansa la vista)
|
|
export const papelSepiaSettings = {
|
|
background: '#f5edda',
|
|
lineBackground: '#f5edda99',
|
|
foreground: '#59493a',
|
|
muted: '#59493a26',
|
|
caret: '#b58900',
|
|
selection: 'rgba(181,137,0,.22)',
|
|
selectionMatch: 'rgba(181,137,0,.14)',
|
|
lineHighlight: 'rgba(89,73,58,.06)',
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: '#59493a55',
|
|
};
|
|
export const papelSepia = createTheme({
|
|
theme: 'light',
|
|
settings: papelSepiaSettings,
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: '#b58900' },
|
|
{ tag: t.labelName, color: '#d33682' },
|
|
{ tag: t.keyword, color: '#859900' },
|
|
{ tag: t.operator, color: '#cb4b16' },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#268bd2' },
|
|
{ tag: t.definition(t.variableName), color: '#6c71c4' },
|
|
{ tag: [t.string, t.special(t.string)], color: '#2aa198' },
|
|
{ tag: t.comment, color: '#9d8f77' },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: '#cb4b16' },
|
|
{ tag: [t.meta, t.attributeName], color: '#b58900' },
|
|
{ tag: t.className, color: '#6c71c4' },
|
|
{ tag: t.invalid, color: '#dc322f' },
|
|
],
|
|
});
|
|
|
|
// medianoche (azul profundo — clásico nocturno)
|
|
export const medianocheSettings = {
|
|
background: '#0f172a',
|
|
lineBackground: '#0f172a99',
|
|
foreground: '#cbd5e1',
|
|
muted: '#cbd5e126',
|
|
caret: '#38bdf8',
|
|
selection: 'rgba(56,189,248,.22)',
|
|
selectionMatch: 'rgba(56,189,248,.14)',
|
|
lineHighlight: 'rgba(203,213,225,.05)',
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: '#cbd5e155',
|
|
};
|
|
export const medianoche = createTheme({
|
|
theme: 'dark',
|
|
settings: medianocheSettings,
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: '#fbbf24' },
|
|
{ tag: t.labelName, color: '#f472b6' },
|
|
{ tag: t.keyword, color: '#818cf8' },
|
|
{ tag: t.operator, color: '#38bdf8' },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#7dd3fc' },
|
|
{ tag: t.definition(t.variableName), color: '#c4b5fd' },
|
|
{ tag: [t.string, t.special(t.string)], color: '#6ee7b7' },
|
|
{ tag: t.comment, color: '#64748b' },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: '#38bdf8' },
|
|
{ tag: [t.meta, t.attributeName], color: '#fbbf24' },
|
|
{ tag: t.className, color: '#c4b5fd' },
|
|
{ tag: t.invalid, color: '#f87171' },
|
|
],
|
|
});
|
|
|
|
// grafito (monocromo con un solo acento ámbar — minimalista)
|
|
export const grafitoSettings = {
|
|
background: '#232323',
|
|
lineBackground: '#23232399',
|
|
foreground: '#c9c9c9',
|
|
muted: '#c9c9c926',
|
|
caret: '#ffb300',
|
|
selection: 'rgba(255,179,0,.22)',
|
|
selectionMatch: 'rgba(255,179,0,.14)',
|
|
lineHighlight: 'rgba(201,201,201,.05)',
|
|
gutterBackground: 'transparent',
|
|
gutterForeground: '#c9c9c955',
|
|
};
|
|
export const grafito = createTheme({
|
|
theme: 'dark',
|
|
settings: grafitoSettings,
|
|
styles: [
|
|
{ tag: [t.atom, t.bool, t.number], color: '#ffb300' },
|
|
{ tag: t.labelName, color: '#ffb300' },
|
|
{ tag: t.keyword, color: '#e0e0e0' },
|
|
{ tag: t.operator, color: '#9e9e9e' },
|
|
{ tag: [t.variableName, t.propertyName, t.tagName, t.typeName], color: '#dedede' },
|
|
{ tag: t.definition(t.variableName), color: '#ffffff' },
|
|
{ tag: [t.string, t.special(t.string)], color: '#ffd54f' },
|
|
{ tag: t.comment, color: '#757575' },
|
|
{ tag: [t.bracket, t.unit, t.punctuation], color: '#9e9e9e' },
|
|
{ tag: [t.meta, t.attributeName], color: '#ffb300' },
|
|
{ tag: t.className, color: '#ffffff' },
|
|
{ tag: t.invalid, color: '#ff5252' },
|
|
],
|
|
});
|