themer/dist/template/hyper.js

Customizable theme creator for editors, terminals, wallpaper, and more.

import Color from 'color';
import { source } from 'common-tags';
import { colorSetToVariants } from '../color-set/index.js';
import { dirname, join, version } from './index.js';
function packageName(variant) {
    return `hyper-${variant.title.kebab}`;
}
const template = {
    name: 'Hyper',
    render: async function* (colorSet) {
        const variants = colorSetToVariants(colorSet);
        for (const variant of variants) {
            const indexFileName = 'index.js';
            yield {
                path: join(packageName(variant), 'package.json'),
                content: JSON.stringify({
                    name: packageName(variant),
                    version,
                    description: `${variant.title.human} theme for Hyper.app, generated by themer`,
                    keywords: ['themer', colorSet.name, variant.name, 'hyper'],
                    main: indexFileName,
                }, null, 2),
            };
            yield {
                path: join(packageName(variant), indexFileName),
                content: source `
          module.exports.decorateConfig = config => {
            return Object.assign({}, config, {
              cursorColor: '${Color(variant.colors.accent6)
                    .fade(0.5)
                    .rgb()
                    .string()}',
              cursorAccentColor: '${variant.colors.shade0}',
              foregroundColor: '${variant.colors.shade6}',
              backgroundColor: '${variant.colors.shade0}',
              selectionColor: '${Color(variant.colors.accent5)
                    .fade(0.9)
                    .rgb()
                    .string()}',
              borderColor: '${variant.colors.accent4}',
              colors: {
                black: '${variant.colors.shade0}',
                red: '${variant.colors.accent0}',
                green: '${variant.colors.accent3}',
                yellow: '${variant.colors.accent2}',
                blue: '${variant.colors.accent5}',
                magenta: '${variant.colors.accent7}',
                cyan: '${variant.colors.accent4}',
                white: '${variant.colors.shade6}',
                lightBlack: '${variant.colors.shade1}',
                lightRed: '${variant.colors.accent1}',
                lightGreen: '${variant.colors.accent3}',
                lightYellow: '${variant.colors.accent2}',
                lightBlue: '${variant.colors.accent5}',
                lightMagenta: '${variant.colors.accent7}',
                lightCyan: '${variant.colors.accent4}',
                lightWhite: '${variant.colors.shade7}',
              },
            });
          };
        `,
            };
        }
    },
    renderInstructions: (paths, colorSet) => {
        const directories = [...new Set(paths.map(dirname))];
        const packageNames = colorSetToVariants(colorSet).map(packageName);
        return source `
      First, copy (or symlink) the outputted package ${directories.length > 1 ? 'directories' : 'directory'} to the Hyper local plugins directory:

      \`\`\`
      ${directories.map((dir) => `cp -R '${dir}' ~/.hyper_plugins/local/`)}
      \`\`\`

      Then edit \`~/.hyper.js\` and ad the package to the \`localPlugins\` array:

      \`\`\`
      ...
      localPlugins: [
        ${packageNames.map((name) => `'${name}'`).join(' // or ')}
      ],
      ...
      \`\`\`
    `;
    },
};
export default template;
//# sourceMappingURL=hyper.js.map