/* * MUD color palette — implements the class-name contract documented in * docs/COLOR_HTML_CONTRACT.md. The EditorAPI's HtmlColorCodec emits * markup; this stylesheet supplies the actual * colors. * * Variables hold the palette; class declarations reference the variables. * Themes only override variables — class structure stays stable. * * Default theme: dark (matches the terminal aesthetic of web/css/main.css). * Override via for the light variant. */ /* ─── Dark theme (default) ──────────────────────────────────────────── */ :root { /* Base 8 — foreground */ --mud-fg-black: #4a4a4a; --mud-fg-red: #ef5350; --mud-fg-green: #66bb6a; --mud-fg-yellow: #ffeb3b; --mud-fg-blue: #5c9ce6; --mud-fg-magenta: #ec407a; --mud-fg-cyan: #4dd0e1; --mud-fg-white: #fafafa; /* Base 8 — background (deeper variants of the same hues) */ --mud-bg-black: #1a1a1a; --mud-bg-red: #b71c1c; --mud-bg-green: #2e7d32; --mud-bg-yellow: #f9a825; --mud-bg-blue: #1565c0; --mud-bg-magenta: #ad1457; --mud-bg-cyan: #00838f; --mud-bg-white: #e0e0e0; /* Extended named — foreground */ --mud-fg-orange: #ff9800; --mud-fg-purple: #ba68c8; --mud-fg-brown: #a1887f; --mud-fg-pink: #f48fb1; --mud-fg-lime: #cddc39; --mud-fg-teal: #4db6ac; --mud-fg-navy: #5c6bc0; --mud-fg-maroon: #c2185b; --mud-fg-olive: #c0ca33; --mud-fg-silver: #bdbdbd; --mud-fg-gold: #ffd54f; --mud-fg-crimson: #ef5350; --mud-fg-forest: #43a047; --mud-fg-royal: #5e35b1; --mud-fg-violet: #ab47bc; --mud-fg-coral: #ff7043; --mud-fg-salmon: #ff8a65; --mud-fg-turquoise: #26c6da; --mud-fg-indigo: #5c6bc0; --mud-fg-jade: #4caf50; /* Extended named — background (darker, deeper) */ --mud-bg-orange: #ef6c00; --mud-bg-purple: #6a1b9a; --mud-bg-brown: #4e342e; --mud-bg-pink: #ad1457; --mud-bg-lime: #827717; --mud-bg-teal: #00695c; --mud-bg-navy: #283593; --mud-bg-maroon: #880e4f; --mud-bg-olive: #827717; --mud-bg-silver: #424242; --mud-bg-gold: #f9a825; --mud-bg-crimson: #b71c1c; --mud-bg-forest: #1b5e20; --mud-bg-royal: #311b92; --mud-bg-violet: #4a148c; --mud-bg-coral: #bf360c; --mud-bg-salmon: #d84315; --mud-bg-turquoise: #006064; --mud-bg-indigo: #283593; --mud-bg-jade: #1b5e20; /* Attribute knobs */ --mud-attr-low-opacity: 0.6; } /* ─── Light theme override ──────────────────────────────────────────── */ [data-theme="light"] { /* Base 8 — foreground (darker, saturated, readable on white) */ --mud-fg-black: #1a1a1a; --mud-fg-red: #c62828; --mud-fg-green: #2e7d32; --mud-fg-yellow: #b8860b; /* dark goldenrod — yellow is unreadable on white */ --mud-fg-blue: #1565c0; --mud-fg-magenta: #ad1457; --mud-fg-cyan: #00838f; --mud-fg-white: #1a1a1a; /* "white" = default text color: dark on light bg */ /* Base 8 — background (lighter, suitable behind dark text) */ --mud-bg-black: #757575; --mud-bg-red: #ef9a9a; --mud-bg-green: #a5d6a7; --mud-bg-yellow: #fff59d; --mud-bg-blue: #90caf9; --mud-bg-magenta: #f48fb1; --mud-bg-cyan: #80deea; --mud-bg-white: #f5f5f5; /* Extended named — foreground */ --mud-fg-orange: #e65100; --mud-fg-purple: #6a1b9a; --mud-fg-brown: #5d4037; --mud-fg-pink: #c2185b; --mud-fg-lime: #827717; --mud-fg-teal: #00695c; --mud-fg-navy: #283593; --mud-fg-maroon: #880e4f; --mud-fg-olive: #827717; --mud-fg-silver: #757575; --mud-fg-gold: #b8860b; --mud-fg-crimson: #b71c1c; --mud-fg-forest: #1b5e20; --mud-fg-royal: #311b92; --mud-fg-violet: #6a1b9a; --mud-fg-coral: #d84315; --mud-fg-salmon: #bf360c; --mud-fg-turquoise: #006064; --mud-fg-indigo: #283593; --mud-fg-jade: #1b5e20; /* Extended named — background (lighter) */ --mud-bg-orange: #ffcc80; --mud-bg-purple: #ce93d8; --mud-bg-brown: #bcaaa4; --mud-bg-pink: #f8bbd0; --mud-bg-lime: #e6ee9c; --mud-bg-teal: #80cbc4; --mud-bg-navy: #9fa8da; --mud-bg-maroon: #f48fb1; --mud-bg-olive: #dce775; --mud-bg-silver: #e0e0e0; --mud-bg-gold: #ffe082; --mud-bg-crimson: #ef9a9a; --mud-bg-forest: #a5d6a7; --mud-bg-royal: #b39ddb; --mud-bg-violet: #ce93d8; --mud-bg-coral: #ffab91; --mud-bg-salmon: #ffab91; --mud-bg-turquoise: #b2ebf2; --mud-bg-indigo: #9fa8da; --mud-bg-jade: #a5d6a7; } /* ─── Foreground classes ────────────────────────────────────────────── */ .mud-fg-black { color: var(--mud-fg-black); } .mud-fg-red { color: var(--mud-fg-red); } .mud-fg-green { color: var(--mud-fg-green); } .mud-fg-yellow { color: var(--mud-fg-yellow); } .mud-fg-blue { color: var(--mud-fg-blue); } .mud-fg-magenta { color: var(--mud-fg-magenta); } .mud-fg-cyan { color: var(--mud-fg-cyan); } .mud-fg-white { color: var(--mud-fg-white); } .mud-fg-orange { color: var(--mud-fg-orange); } .mud-fg-purple { color: var(--mud-fg-purple); } .mud-fg-brown { color: var(--mud-fg-brown); } .mud-fg-pink { color: var(--mud-fg-pink); } .mud-fg-lime { color: var(--mud-fg-lime); } .mud-fg-teal { color: var(--mud-fg-teal); } .mud-fg-navy { color: var(--mud-fg-navy); } .mud-fg-maroon { color: var(--mud-fg-maroon); } .mud-fg-olive { color: var(--mud-fg-olive); } .mud-fg-silver { color: var(--mud-fg-silver); } .mud-fg-gold { color: var(--mud-fg-gold); } .mud-fg-crimson { color: var(--mud-fg-crimson); } .mud-fg-forest { color: var(--mud-fg-forest); } .mud-fg-royal { color: var(--mud-fg-royal); } .mud-fg-violet { color: var(--mud-fg-violet); } .mud-fg-coral { color: var(--mud-fg-coral); } .mud-fg-salmon { color: var(--mud-fg-salmon); } .mud-fg-turquoise { color: var(--mud-fg-turquoise); } .mud-fg-indigo { color: var(--mud-fg-indigo); } .mud-fg-jade { color: var(--mud-fg-jade); } /* ─── Background classes ────────────────────────────────────────────── */ .mud-bg-black { background-color: var(--mud-bg-black); } .mud-bg-red { background-color: var(--mud-bg-red); } .mud-bg-green { background-color: var(--mud-bg-green); } .mud-bg-yellow { background-color: var(--mud-bg-yellow); } .mud-bg-blue { background-color: var(--mud-bg-blue); } .mud-bg-magenta { background-color: var(--mud-bg-magenta); } .mud-bg-cyan { background-color: var(--mud-bg-cyan); } .mud-bg-white { background-color: var(--mud-bg-white); } .mud-bg-orange { background-color: var(--mud-bg-orange); } .mud-bg-purple { background-color: var(--mud-bg-purple); } .mud-bg-brown { background-color: var(--mud-bg-brown); } .mud-bg-pink { background-color: var(--mud-bg-pink); } .mud-bg-lime { background-color: var(--mud-bg-lime); } .mud-bg-teal { background-color: var(--mud-bg-teal); } .mud-bg-navy { background-color: var(--mud-bg-navy); } .mud-bg-maroon { background-color: var(--mud-bg-maroon); } .mud-bg-olive { background-color: var(--mud-bg-olive); } .mud-bg-silver { background-color: var(--mud-bg-silver); } .mud-bg-gold { background-color: var(--mud-bg-gold); } .mud-bg-crimson { background-color: var(--mud-bg-crimson); } .mud-bg-forest { background-color: var(--mud-bg-forest); } .mud-bg-royal { background-color: var(--mud-bg-royal); } .mud-bg-violet { background-color: var(--mud-bg-violet); } .mud-bg-coral { background-color: var(--mud-bg-coral); } .mud-bg-salmon { background-color: var(--mud-bg-salmon); } .mud-bg-turquoise { background-color: var(--mud-bg-turquoise); } .mud-bg-indigo { background-color: var(--mud-bg-indigo); } .mud-bg-jade { background-color: var(--mud-bg-jade); } /* ─── Attribute classes ─────────────────────────────────────────────── */ .mud-attr-bold { font-weight: 700; } .mud-attr-underline { text-decoration: underline; } .mud-attr-low { opacity: var(--mud-attr-low-opacity); } .mud-attr-reverse { filter: invert(1); } .mud-attr-blink { animation: mud-blink 1s steps(2, start) infinite; } @keyframes mud-blink { 50% { opacity: 0; } } /* Honor user's reduced-motion preference: disable blink. */ @media (prefers-reduced-motion: reduce) { .mud-attr-blink { animation: none; } }