// The TyperPunk mark.
//
// The mark is a prompt: a chevron, a baseline, and a block cursor resting on
// it. It says "text being entered at a terminal" without spelling anything
// out, and it stays legible at 16 pixels, which a more detailed drawing would
// not. The chevron is drawn twice, the lower copy offset and in the secondary
// colour, which is the one deliberate stylistic note.
//
// Everything is drawn in currentColor and the theme's own variables, so the
// mark follows the palette rather than carrying its own.
/// The mark on its own, for a favicon, a tab, or anywhere the name is already
/// present. Sized by its container.
export const LOGO_MARK = `
`;
/// Mark and wordmark together. The wordmark is split so the two halves of the
/// name carry different weight: "Typer" is what it does, "Punk" is what it
/// looks like, and the accent colour goes on the second.
export function logoLockup({ tag = 'div', className = 'logo', action = 'menu' } = {}) {
return `<${tag} class="${className}"${action ? ` data-action="${action}"` : ''}>
${LOGO_MARK}
TyperPunk
`;
}
/// The same mark as a standalone SVG document, for the favicon. Colours are
/// literal here because a favicon is rendered outside the page and cannot
/// read its variables.
export function faviconDataUri({ accent = '#00ff9d', ghost = '#00e5ff', background = '#000000' } = {}) {
const svg = ``;
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}